Components

Sidebar

Complete collaboration in one place

When to use

The Sidebar component renders the Cord sidebar, positioned fixed on the right side of your website. You can customize its width, and you can use the open and close events to adjust your website’s CSS so the sidebar doesn’t overlap with your content.

This component pairs well with:

How to use

import { Sidebar } from "@cord-sdk/react";

export const Example = () => (
  <Sidebar
    showPresence={true}
    onOpen={() => {
      console.log("sidebar is open");
    }}
  />
);

<cord-sidebar show-presence="true" id="sidebar"></cord-sidebar>

<script>
  document
    .getElementById("sidebar")
    .addEventListener("cord-sidebar:open", () => {
      console.log("sidebar is open");
    });
</script>

Properties

Attributes & Events

Properties
`location`	`optional`	`default: current URL`	The location for the sidebar.
`open`	`optional`	`default: true`	Whether the sidebar should be open or closed.
`showCloseButton`	`optional`	`default: true`	Whether to show the close button in the top navigation bar.
`showPresence`	`optional`	`default: true`	Whether to show the presence facepile for the location in the top navigation bar.
`showInbox`	`optional`	`default: true`	Whether to show the inbox button in the top navigation bar.
`excludeViewerFromPresence`	`optional`	`default: false`	Whether to exclude the current user from the presence facepile in the top navigation bar.
`showLauncher`	`optional`	`default: true`	Whether to show the floating launcher button in the bottom-right corner of the page. Set this to `false` if you use the `<cord-sidebar-launcher>` component.
`showAllActivity`	`optional`	`default: true`	Whether to show the “All Activity” button in the top navigation bar.
`showPinsOnPage`	`optional`	`default: true`	Whether to show the annotation pins on the page.
`onOpen`	`optional`	Callback invoked when sidebar is opened.
`onClose`	`optional`	Callback invoked when sidebar is closed.

Attributes
`location`	`optional`	`default: current URL`	The location for the sidebar.
`open`	`optional`	`default: true`	Whether the sidebar should be open or closed.
`show-close-button`	`optional`	`default: true`	Whether to show the close button in the top navigation bar.
`show-presence`	`optional`	`default: true`	Whether to show the presence facepile for the location in the top navigation bar.
`show-inbox`	`optional`	`default: true`	Whether to show the inbox button in the top navigation bar.
`exclude-viewer-from-presence`	`optional`	`default: false`	Whether to exclude the current user from the presence facepile in the top navigation bar.
`show-launcher`	`optional`	`default: true`	Whether to show the floating launcher button in the bottom-right corner of the page. Set this to `false` if you use the `<cord-sidebar-launcher>` component.
`show-all-activity`	`optional`	`default: true`	Whether to show the “All Activity” button in the top navigation bar.
`show-pins-on-page`	`optional`	`default: true`	Whether to show the annotation pins on the page.

Events
`cord-sidebar:open`	This event is fired when sidebar is opened.
`cord-sidebar:close`	This event is fired when sidebar is closed.

CSS Variables

These can be used to customize the component. You can learn more about customization here.

Name	Default Value
`--cord-launcher-background`	`--cord-color-launcher` `#F4FFA0`
`--cord-launcher-content-color`	`--cord-color-content-emphasis` `#F4FFA0`
`--cord-sidebar-background-color`	`--cord-color-base` `#FFFFFF`
`--cord-sidebar-header-background-color`	`--cord-color-base` `#FFFFFF`
`--cord-sidebar-width`	`312px`
`--cord-sidebar-z-index`	`2147483645`

Want to customize the component further?

Head to the full list of CSS Variables available for the Sidebar →

Next up

Page Presence

Let people know who else is on the page

Sidebar Launcher

Integrate the button to open the sidebar into your UI

On this page

When to use
How to use
Properties
Attributes & Events
CSS Variables