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

location
optionaldefault: current URL

The location for the sidebar.

open
optionaldefault: true

Whether the sidebar should be open or closed.

showCloseButton
optionaldefault: true

Whether to show the close button in the top navigation bar.

showPresence
optionaldefault: true

Whether to show the presence facepile for the location in the top navigation bar.

showInbox
optionaldefault: true

Whether to show the inbox button in the top navigation bar.

excludeViewerFromPresence
optionaldefault: false

Whether to exclude the current user from the presence facepile in the top navigation bar.

showLauncher
optionaldefault: 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
optionaldefault: true

Whether to show the “All Activity” button in the top navigation bar.

showPinsOnPage
optionaldefault: true

Whether to show the annotation pins on the page.

threadName
optionaldefault: current page's title

Sets the name of any threads created by this sidebar. The thread name is used in a small number of places where a short name or header is useful to distinguish the thread; the default value is nearly always fine. A newly-created thread will have its title set to this value, and an existing thread will have its title updated to this value.

onOpen
optional

Callback invoked when sidebar is opened. Is passed a single argument, an object with the following properties:

Property Description
width The width of the sidebar which just opened
onClose
optional

Callback invoked when sidebar is closed.

onThreadOpen
optional

Callback invoked when one of the threads in the sidebar is opened. Is passed a single argument, the ID of the opened thread.

onThreadClose
optional

Callback invoked when one of the threads in the sidebar is closed. Is passed a single argument, the ID of the closed thread.

location
optionaldefault: current URL

The location for the sidebar.

open
optionaldefault: true

Whether the sidebar should be open or closed.

show-close-button
optionaldefault: true

Whether to show the close button in the top navigation bar.

show-presence
optionaldefault: true

Whether to show the presence facepile for the location in the top navigation bar.

show-inbox
optionaldefault: true

Whether to show the inbox button in the top navigation bar.

exclude-viewer-from-presence
optionaldefault: false

Whether to exclude the current user from the presence facepile in the top navigation bar.

show-launcher
optionaldefault: 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
optionaldefault: true

Whether to show the “All Activity” button in the top navigation bar.

show-pins-on-page
optionaldefault: true

Whether to show the annotation pins on the page.

thread-name
optionaldefault: current page's title

Sets the name of any threads created by this sidebar. The thread name is used in a small number of places where a short name or header is useful to distinguish the thread; the default value is nearly always fine. A newly-created thread will have its title set to this value, and an existing thread will have its title updated to this value.

cord-sidebar:open

This event is fired when sidebar is opened.

cord-sidebar:close

This event is fired when sidebar is closed.

cord-sidebar:threadopen

This event is fired when one of the threads in the sidebar is opened. The event.detail[0] is the thread-id of the opened thread.

cord-sidebar:threadclose

This event is fired when one of the threads in the sidebar is closed. The event.detail[0] is the thread-id of the closed thread.


CSS Variables

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

Name Default Value Notes
--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 Minimum 312px, maximum 500px
--cord-sidebar-z-index 2147483645  

Next up