Layouts

Sidebar

A collapsible panel for navigation or additional content, typically positioned on the side of the screen.

Basic

The sidebar is a versatile component designed to organize your site's content and navigation. It offers a structured overview of your site's layout, making it easier for users to explore and locate information.

Fullscreen

Installation

If you hit any issues, make sure you check out the installation guide here for more information.

Composed Components

When you install this component via the CLI, it automatically loads all composed components, so you don’t need to add them individually.

The Sidebar comes packed with several components to enhance functionality and provide a seamless experience.

Buttons play a crucial role in functionality, whether for submitting a form or navigating to another page.
A slide-in panel for presenting additional content without disrupting the main screen.
A brief, informative message that appears when hovering or focusing on an element.
A small, attention-grabbing UI element used to display notifications, status indicators, or counts in a compact format.

Manual Installation

Make sure you also install the composed components and the required packages for the component to function properly.

Anatomy

CSS Variables

The sidebar just need one base color to work, the accent will generate from the base and the primary color just taking from the primary color you have. Make sure you have set evertyhing up, or hover into theme page to see the bunch of colors you can get. Too lazy? just copy the default color below to your stylesheet.

@theme {
  --color-sidebar: var(--sidebar);
  --color-sidebar-fg: var(--sidebar-fg);
}
 
@layer base {
  :root {
    --sidebar: oklch(0.967 0.001 286.375);
    --sidebar-fg: oklch(0.141 0.005 285.823);
  }
 
  .dark {
    --sidebar: oklch(0.16 0.006 285.885);
    --sidebar-fg: oklch(0.985 0 0);
  }
}

Not sure if it's your style, but it's a great starting point. If you’d like to tweak the colors, check out the theme customization page for more options.

Intent

The sidebar comes in three variations: "sidebar", "float", and "inset". By default, the variation is set to "sidebar".

The default variation is a traditional sidebar often used for navigation. Preview.

<Sidebar intent="default" />

Inset

The inset variation adds padding to the main content for a visually distinct layout. Explore the demo to see it in action, or switch to full-screen mode for a better view. Preview.

<Sidebar intent="inset" />

Float

The float variation introduces an inner border within the sidebar, while the wrapper includes padding around the content. Preview

<Sidebar intent="float" />

Fleet

The fleet variation removes horizontal padding from the items. Check out how it works in action: Preview

Loading source code...

Collapsible

The sidebar can be made collapsible by using the collapsible prop in the SidebarProvider. The default collapsible behavior is "hidden".

Hidden

When toggled, the sidebar hides completely from view. Preview

<Sidebar collapsible="hidden" />

Dock

When toggled, the sidebar docks to a minimal state, showing only icons. Hovering over an icon reveals a tooltip with additional information. Preview

<Sidebar intent="dock" />

Default Open

The sidebar’s initial state can be controlled using the defaultOpen prop. For example, you can set defaultOpen to false and keep the sidebar docked.

<SidebarProvider defaultOpen={false}>
  <Sidebar collapsible="dock" />

The sidebar section is a container for sidebar items. It accepts a title prop, which will be displayed as a heading.

<SidebarSection>
  <SidebarItem isCurrent href="#">
    <SidebarLabel>Item 1</SidebarLabel>
  </SidebarItem>
</SidebarSection>
<SidebarSection title="Other Section">
  <SidebarItem isCurrent href="#">
    <SidebarLabel>Item 1</SidebarLabel>
  </SidebarItem>
</SidebarSection>

If you need to collapse multiple items, you can use the SidebarDisclosureGroup component. Preview

{sections.map((section, sectionIndex) => (
  <SidebarDisclosureGroup defaultExpandedKeys={[1, 2]} key={sectionIndex}>
    <SidebarDisclosure id={sectionIndex + 1}>
      <SidebarDisclosureTrigger>
        <section.icon />
        <SidebarLabel> {section.label}</SidebarLabel>
      </SidebarDisclosureTrigger>
      <SidebarDisclosurePanel>
        {section.items.map((item, itemIndex) => (
          <SidebarItem key={itemIndex} href="#">
            {({ isHovered }) => (
              <>
                <i aria-hidden className="content-center size-4">
                  <IconBullet className={`${isHovered ? "fill-sky-500 text-sky-500" : ""} size-2 m-auto`} />
                </i>
                <SidebarLabel>{item}</SidebarLabel>
              </>
            )}
          </SidebarItem>
        ))}
      </SidebarDisclosurePanel>
    </SidebarDisclosure>
  </SidebarDisclosureGroup>
))}
 
const sections = [
  {
    icon: IconNotes,
    label: "Blog",
    items: ["Articles", "Categories", "Tags", "Comments", "Authors"]
  },
  {
    icon: IconStore,
    label: "Commerce",
    items: ["Orders", "Products", "Customers", "Coupons", "Discounts"]
  },
  {
    icon: IconWhiteboard,
    label: "Analytics",
    items: ["Reports", "Traffic", "Conversions", "Audience", "Engagement"]
  },
  {
    icon: IconSettings,
    label: "Settings",
    items: ["General", "Profile", "Billing", "Notifications", "Integrations"]
  }
]

The sidebar supports menus, which can be used to display additional actions or options.

Fullscreen

Badge

The sidebar supports badges, which can be used to indicate the number of unread messages, tasks, or other items. Preview

<SidebarSection>
  {navigation.map((item, index) => (
    <SidebarItem key={index} isCurrent={item.isCurrent} href="#" badge={item?.badge}>
      {item.icon}
      <SidebarLabel>{item.label}</SidebarLabel>
    </SidebarItem>
  ))}
</SidebarSection>
 
const navigation = [
  { label: "Overview", icon: <IconDashboard />, isCurrent: true, badge: undefined },
  { label: "Orders", icon: <IconCart />, isCurrent: false, badge: 24 },
  { label: "Products", icon: <IconCube />, isCurrent: false, badge: "31.51K" },
  { label: "Customers", icon: <IconPeople />, isCurrent: false, badge: "12K" },
  { label: "Reports", icon: <IconChartBar />, isCurrent: false, badge: 3 },
  { label: "Settings", icon: <IconGear />, isCurrent: false, badge: undefined }
]

Separator

The sidebar supports separators, which can be used to separate sections or groups of items. Preview

<SidebarContent>
  <SidebarSection/>
  <SidebarSeparator />
  <SidebarSection/>
  <SidebarSection/>
  <SidebarSeparator />
  <SidebarSectionGroup/>
  <SidebarSectionGroup/>
  <SidebarSeparator />
  <SidebarSectionGroup/>
</SidebarContent>

The example previews will appear similar to the ones in the YouTube sidebar.

Loading source code...

Tooltip

The sidebar supports tooltips, which can be used to display additional information when you're on docked mode.

Fullscreen

The sidebar supports headers, which can be used to display additional actions or options.

<Sidebar {...props}>
  <SidebarHeader>
    <Link
      className="flex items-center group-data-[collapsible=dock]:size-10 group-data-[collapsible=dock]:justify-center gap-x-2"
      href="/docs/components/layouts/sidebar"
    >
      <IconBrandApple className="size-5" />
      <SidebarLabel className="font-medium">Apple</SidebarLabel>
    </Link>
  </SidebarHeader>
  ...
</Sidebar>

The sidebar supports footers, which can be used to display additional actions or options.

<Sidebar {...props}>
  ...
  <SidebarFooter>
    <Menu>
      <Menu.Trigger aria-label="Profile" data-slot="menu-trigger">
        <Avatar shape="square" src="/images/avatar/cobain.jpg" />
        <div className="group-data-[collapsible=dock]:hidden text-sm">
          Kurt Cobain
          <span className="block -mt-0.5 text-muted-fg">kurt@cobain.com</span>
        </div>
        <IconChevronLgDown className="absolute right-3 transition-transform size-4 group-pressed:rotate-180" />
      </Menu.Trigger>
      <Menu.Content placement="bottom right" className="sm:min-w-(--trigger-width)">
        <Menu.Item/>
      </Menu.Content>
    </Menu>
  </SidebarFooter>
</Sidebar>

Side

The sidebar has two sides, left and right. You can set the side of the sidebar by using the side prop. Preview

<Sidebar side='left | right'/>
Loading source code...

Put Anything

This is justd sidebar, so you can put anything you want in it. You can use the SidebarContent component to wrap your content. Let's try to add a range-calendar and search-field to the sidebar. Preview

Loading source code...

Shortcut

By default, you can collapse the sidebar by clicking or pressing the ⌘b shortcut. To customize the shortcut, pass the desired key combination via the shortcut prop.

<Sidebar shortcut="1" />

The preview can be seen in the Sidebar Shortcut page.

Props

The sidebar supports the following props:

PropertyTypeDefault
intent"default" | "float" | | "fleet" | "inset""default"
collapsible"hidden" | "dock" | "none""hidden"
side"left" | "right""left"
closeButtonboolean"true"

SidebarContextProps

PropertyType
state"expanded" | "collapsed"
openboolean
setOpen(open: boolean) => void
isOpenOnMobileboolean
setIsOpenOnMobile(open: boolean) => void
isMobileboolean
toggleSidebar() => void

SidebarProviderProps

PropertyTypeDefault
defaultOpenbooleantrue
isOpenbooleanundefined
onOpenChange(open: boolean) => voidundefined
shortcutstring"b"
Previous
Navbar
Next
Avatar