Sidebar

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

GitHub

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#

PropTypeDefaultDescription
...propsreact-resizable-panels group props—Groups the sidebar and adjacent resizable columns.

ResizablePanel#

PropTypeDefaultDescription
...propsreact-resizable-panels panel props—Defines one resizable column in the group.

ResizableHandle#

PropTypeDefaultDescription
...propsreact-resizable-panels separator props—Resize handle between adjacent panels.

SidebarRoot#

PropTypeDefaultDescription
...propsdiv props—Full-height sidebar frame that keeps the header and scroll body aligned.

SidebarHeader#

PropTypeDefaultDescription
...propsdiv props—Header layout slot for app-owned navigation and controls.

SidebarHeaderTitle#

PropTypeDefaultDescription
...propsdiv props—Truncated sidebar heading.

SidebarBody#

PropTypeDefaultDescription
...propsdiv props—Owns the sidebar's scrollable body region.

SidebarContent#

PropTypeDefaultDescription
...propsdiv props—Full-height scroll-content wrapper.

SidebarLiveActivity#

PropTypeDefaultDescription
...propsdiv props—Optional desktop live-agent overlay. It owns the full-width fade, theme spacing, and matching scroll-content clearance.

SidebarMenu#

PropTypeDefaultDescription
...propsbutton props—Top-level destination such as Saved.

SidebarMenuIcon#

PropTypeDefaultDescription
...propsspan props—Leading icon slot for a menu destination.

SidebarMenuTitle#

PropTypeDefaultDescription
...propsspan props—Menu destination label.

SidebarMenuAside#

PropTypeDefaultDescription
...propsspan props—Trailing metadata slot for a menu destination.

SidebarMenuCount#

PropTypeDefaultDescription
...propsspan props—Compact trailing count for a menu destination.

SidebarSection#

PropTypeDefaultDescription
...propssection props—Groups a saved, pinned, channel, joint, or DM region.

SidebarSectionHeader#

PropTypeDefaultDescription
...propsdiv props—Structural header wrapper for a sidebar section.

SidebarSectionDisclosure#

PropTypeDefaultDescription
...propsbutton props—Collapsible section trigger.

SidebarSectionTitle#

PropTypeDefaultDescription
...propsspan props—Section heading label.

SidebarSectionCount#

PropTypeDefaultDescription
...propsspan props—Section item count.

SidebarSectionChevron#

PropTypeDefaultDescription
...propsspan props—Disclosure indicator for a collapsible section.

SidebarSectionTrailing#

PropTypeDefaultDescription
...propsdiv props—Trailing area of a section header.

SidebarSectionAttention#

PropTypeDefaultDescription
...propsspan props—Unread or attention indicator in a section header.

SidebarSectionControls#

PropTypeDefaultDescription
...propsdiv props—Control group in a section header.

SidebarSectionControl#

PropTypeDefaultDescription
...propsbutton props—Single section-header control slot.

SidebarSectionEmpty#

PropTypeDefaultDescription
...propsdiv props—Compact empty-state wrapper for a section.

SidebarList#

PropTypeDefaultDescription
...propsdiv props—List wrapper for sidebar rows.

SidebarGroupLabel#

PropTypeDefaultDescription
...propsdiv props—Static, non-interactive heading for sidebar groups that do not collapse.

SidebarControl#

PropTypeDefaultDescription
...propsbutton props—Theme-aware control button shared by the sidebar header and section control slots.