Link copied to pasteboard!

Sidebar

The easiest way to add collaboration in your website. This 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.

Usage

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

Properties

Name Default Description
context current URL The context for the sidebar.
open true Whether the sidebar should be open or closed.
show-close-button true Whether to show the close button in the top navigation bar.
show-presence true Whether to show the presence facepile for the context in the top navigation bar.
exclude-viewer-from-presence false Whether to exclude the current user from the presence facepile in the top navigation bar.
show-launcher 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.

Events

Name Description
cord-sidebar:open The sidebar is now open.
cord-sidebar:close The sidebar is now closed.

CSS Custom Properties

Name Default Description
--cord-sidebar-width 312px Width of the sidebar. Cannot be wider than 500px or narrower than 312px.

In this section

Sidebar

Sidebar Launcher

Page Presence

Presence Facepile

Presence Observer

Thread