Link copied to clipboard!
Mobile navigation button - closed state

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

Next up