Sidebar

A sidebar to help people quickly navigate to key areas of your app or top-level collections of content, like folders and playlists

Anatomy

<Sidebar activeKey="...">
  <SidebarMenuContent>
    <SidebarMenuItem menuKey="..." icon={<></>}>
      ...
    </SidebarMenuItem>
    <SidebarMenuItem menuKey="..." icon={<></>}>
      ...
    </SidebarMenuItem>
    <SidebarMenuItem menuKey="..." icon={<></>} suffix={<></>}>
      ...
    </SidebarMenuItem>
    <SidebarMenuItem menuKey="..." icon={<></>}>
      ...
    </SidebarMenuItem>
    <SidebarMenuItem menuKey="..." icon={<></>}>
      ...
    </SidebarMenuItem>
    // Creates a collapsible group of menu items
    <SidebarSub>
      <SidebarSubTrigger icon={<></>}>...</SidebarSubTrigger>
      <SidebarSubContent>
        <SidebarSubMenuItem menuKey="..." icon={<></>}>
          ...
        </SidebarSubMenuItem>
        <SidebarSubMenuItem menuKey="..." icon={<></>}>
          ...
        </SidebarSubMenuItem>
        <SidebarSubMenuItem menuKey="..." icon={<></>}>
          ...
        </SidebarSubMenuItem>
      </SidebarSubContent>
    </SidebarSub>
  </SidebarMenuContent>
</Sidebar>

Dependencies

• framer-motion (opens in a new tab) - Used for animations.

Usage

Controlled

Active Menu in SubMenu

If a menu inside a SubMenu is active, the SubMenu will be open by default. Any active menu indication can be done with the menuKey props to Sidebar Component which should match the menuKey props of the SidebarMenuItem or SidebarSubMenuItem Component that you want to be active.

API Reference

Sidebar

The main component of the sidebar. It should be used to wrap SidebarMenuContent component and add any other custom components at the top.

SidebarMenuContent

This component is used to wrap SidebarMenuItem and SidebarSub components.

SidebarMenuItem

The sidebar menu item is used to render a single menu item. It can be used in the root of the sidebar or within a SidebarContent component.

SidebarSub

This component is used to wrap SidebarSubTrigger & SidebarSubMenuItem components. It takes care of all the state going inside the submenu.

SidebarSubMenuTrigger

This component is used to trigger the expansion of SidebarSubContent. It must be within a SidebarSub component.

SidebarSubContent

This component is used to wrap a group of SidebarSubMenuItem components. It is used to group menu items together and make them collapsible. It must be within a SidebarSub component.

SidebarSubMenuItem

The sidebar sub menu item is used to render a single menu item. It must be within a SidebarSubContent component. It auto opens the parent SidebarSubContent component when it is active.