Sidebar

Composable sidebar column structure for menus, grouped lists, and app-owned destinations.

Preview#

Chat
Opened proj-uiux
Preparing the next release candidate
Controls
Content
Live activity

Anatomy#

import {
  LiveAgentActivityBar,
  SidebarBody,
  SidebarContent,
  SidebarControl,
  SidebarHeader,
  SidebarHeaderTitle,
  SidebarItem,
  SidebarList,
  SidebarLiveActivity,
  SidebarRoot,
  SidebarSection,
  SidebarSectionAttention,
  SidebarSectionChevron,
  SidebarSectionControls,
  SidebarSectionCount,
  SidebarSectionDisclosure,
  SidebarSectionEmpty,
  SidebarSectionHeader,
  SidebarSectionTitle,
  SidebarSectionTrailing,
} from "raft-ui";

<SidebarRoot>
  <SidebarHeader>
    <SidebarHeaderTitle />
    <SidebarControl />
  </SidebarHeader>
  <SidebarBody>
    <SidebarContent>
      <SidebarSection>
        <SidebarSectionHeader>
          <SidebarSectionDisclosure>
            <SidebarSectionTitle />
            <SidebarSectionCount />
            <SidebarSectionChevron />
          </SidebarSectionDisclosure>
          <SidebarSectionTrailing>
            <SidebarSectionAttention />
            <SidebarSectionControls>
              <SidebarControl />
            </SidebarSectionControls>
          </SidebarSectionTrailing>
        </SidebarSectionHeader>
        <SidebarList>
          <SidebarItem />
        </SidebarList>
        <SidebarSectionEmpty />
      </SidebarSection>
    </SidebarContent>
  </SidebarBody>
  <SidebarLiveActivity>
    <LiveAgentActivityBar />
  </SidebarLiveActivity>
</SidebarRoot>

API#WIP

SidebarItem and its row parts have a separate, complete API reference on the SidebarItem page. AppShellSidebarSlot is documented with the other shell regions on the AppShell page.

ResizableGroup#

...props
react-resizable-panels group props
Groups the sidebar and adjacent resizable columns.

ResizablePanel#

...props
react-resizable-panels panel props
Defines one resizable column in the group.

ResizableHandle#

...props
react-resizable-panels separator props
Resize handle between adjacent panels.

SidebarRoot#

...props
div props
Full-height sidebar frame that keeps the header and scroll body aligned.

SidebarHeader#

...props
div props
Header layout slot for app-owned navigation and controls.

SidebarHeaderTitle#

...props
div props
Truncated sidebar heading.

SidebarBody#

...props
div props
Owns the sidebar's scrollable body region.

SidebarContent#

...props
div props
Full-height scroll-content wrapper.

SidebarLiveActivity#

...props
div props
Optional desktop live-agent overlay. It pins the bar full-width to the sidebar bottom and owns the matching scroll-content clearance.

SidebarMenu#

...props
button props
Top-level destination such as Saved.

SidebarMenuIcon#

...props
span props
Leading icon slot for a menu destination.

SidebarMenuTitle#

...props
span props
Menu destination label.

SidebarMenuAside#

...props
span props
Trailing metadata slot for a menu destination.

SidebarMenuCount#

...props
span props
Compact trailing count for a menu destination.

SidebarSection#

...props
section props
Groups a saved, pinned, channel, joint, or DM region.

SidebarSectionHeader#

...props
div props
Structural header wrapper for a sidebar section.

SidebarSectionDisclosure#

...props
button props
Collapsible section trigger.

SidebarSectionTitle#

...props
span props
Section heading label.

SidebarSectionCount#

...props
span props
Section item count.

SidebarSectionChevron#

...props
span props
Disclosure indicator for a collapsible section.

SidebarSectionTrailing#

...props
div props
Trailing area of a section header.

SidebarSectionAttention#

...props
span props
Unread or attention indicator in a section header.

SidebarSectionControls#

...props
div props
Control group in a section header.

SidebarSectionControl#

...props
button props
Single section-header control slot.

SidebarSectionEmpty#

...props
div props
Compact empty-state wrapper for a section.

SidebarList#

...props
div props
List wrapper for sidebar rows.

SidebarGroupLabel#

...props
div props
Static, non-interactive heading for sidebar groups that do not collapse.

SidebarControl#

...props
button props
Control button shared by the sidebar header and section control slots.