Skip to main content

​
About Sidebar

Sidebar is a collapsible vertical navigation component for applications. It provides primary navigation and can be configured to collapse into a compact bar or hide completely.

​
Components

The Sidebar package includes many subcomponents:
  • Sidebar - Main container
  • SidebarBody - Main content area
  • SidebarHeader - Top section with logo/title
  • SidebarHeaderLabel - Header text
  • SidebarHeaderIconButton - Header action button
  • SidebarFooter - Bottom section
  • SidebarCollapseButton - Toggle collapse state
  • SidebarNavigation - Navigation list container
  • SidebarNavigationItem - Navigation link
  • SidebarNavigationDisclosure - Collapsible nav section
  • SidebarNavigationSeparator - Visual divider
  • SidebarBetaBadge - Beta feature indicator
  • SidebarPushContentWrapper - Pushes content when sidebar opens
  • SidebarOverlayContentWrapper - Overlays content when sidebar opens

​
Installation

yarn add @twilio-paste/sidebar

​
Usage

import {
  Sidebar,
  SidebarHeader,
  SidebarHeaderLabel,
  SidebarBody,
  SidebarNavigation,
  SidebarNavigationItem,
  SidebarFooter,
  SidebarCollapseButton
} from '@twilio-paste/sidebar';

const MySidebar = () => {
  const [collapsed, setCollapsed] = React.useState(false);
  
  return (
    <Sidebar
      collapsed={collapsed}
      variant="compact"
      mainContentSkipLinkID="main-content"
      topbarSkipLinkID="topbar"
      sidebarNavigationSkipLinkID="sidebar-nav"
    >
      <SidebarHeader>
        <SidebarHeaderLabel>My App</SidebarHeaderLabel>
      </SidebarHeader>
      <SidebarBody>
        <SidebarNavigation aria-label="Main navigation" id="sidebar-nav">
          <SidebarNavigationItem href="/dashboard">Dashboard</SidebarNavigationItem>
          <SidebarNavigationItem href="/settings">Settings</SidebarNavigationItem>
        </SidebarNavigation>
      </SidebarBody>
      <SidebarFooter>
        <SidebarCollapseButton
          onClick={() => setCollapsed(!collapsed)}
          i18nCollapseLabel="Collapse sidebar"
          i18nExpandLabel="Expand sidebar"
        />
      </SidebarFooter>
    </Sidebar>
  );
};

​
Props

​
Sidebar

​
SidebarNavigation

​
SidebarNavigationItem

​
SidebarNavigationDisclosure

Collapsible navigation section with state management: 
import { useSidebarNavigationDisclosureState } from '@twilio-paste/sidebar';

const disclosure = useSidebarNavigationDisclosureState();

<SidebarNavigationDisclosure {...disclosure}>
  {/* nested navigation items */}
</SidebarNavigationDisclosure>

​
Variants

​
Compact Variant

Shows icons when collapsed, full content when expanded: 
<Sidebar variant="compact" collapsed={collapsed}>
  {/* sidebar content */}
</Sidebar>

​
Default Variant

Completely hides when collapsed: 
<Sidebar variant="default" collapsed={collapsed}>
  {/* sidebar content */}
</Sidebar>

​
Responsive Behavior

On mobile (breakpoint 0), the sidebar becomes a full-width overlay regardless of variant.

​
Accessibility

  • Sidebar uses semantic HTML with <aside> element
  • Navigation requires aria-label for context
  • Skip links enable keyboard navigation to main sections
  • Collapse state is announced to screen readers
  • Focus management when opening/closing

​
Animation

Sidebar uses spring animations for smooth transitions when expanding/collapsing.

​
Related components

Build docs developers (and LLMs) love

Get started for freeTalk to us