A collapsible panel for navigation or additional content, typically positioned on the side of the screen. It offers various intents, behaviors, and customization options.

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.

Installation

npx shadcn@latest add @intentui/sidebar

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.

This component comes packed with several components to enhance functionality and provide a seamless experience.

tooltip sheet link button

Manual installation

npm i react-aria-components @heroicons/react tailwind-merge

CSS variables

The sidebar just needs one base color to work; the accent is generated from the base, and the primary color is taken from the primary color you already have. Make sure you have set everything up, or head to the theme page to see the colors you can use. Too lazy? Just copy the default color below to your stylesheet.

@theme inline {
  --color-sidebar: var(--sidebar);
  --color-sidebar-fg: var(--sidebar-fg);
  --color-sidebar-primary: var(--sidebar-primary);
  --color-sidebar-primary-fg: var(--sidebar-primary-fg);
  --color-sidebar-accent: var(--sidebar-accent);
  --color-sidebar-accent-fg: var(--sidebar-accent-fg);
  --color-sidebar-border: var(--sidebar-border);
  --color-sidebar-ring: var(--sidebar-ring);
}

:root {
  --sidebar: oklch(0.985 0 0);
  --sidebar-fg: oklch(0.141 0.005 285.823);
  --sidebar-primary: oklch(0.623 0.214 259.815 / 0.15);
  --sidebar-primary-fg: oklch(0.488 0.243 264.376);
  --sidebar-accent: oklch(0.92 0.004 286.32);
  --sidebar-accent-fg: oklch(0.141 0.005 285.823);
  --sidebar-border: oklch(0.901 0.006 286.286);
  --sidebar-ring: oklch(0.546 0.245 262.881);
}

.dark {
  --sidebar: oklch(0.21 0.006 285.885);
  --sidebar-fg: oklch(0.985 0 0);
  --sidebar-primary: oklch(0.623 0.214 259.815 / 0.1);
  --sidebar-primary-fg: oklch(0.707 0.165 254.624);
  --sidebar-accent: oklch(0.274 0.006 286.033);
  --sidebar-accent-fg: oklch(0.985 0 0);
  --sidebar-border: oklch(0.274 0.006 286.033);
  --sidebar-ring: oklch(0.546 0.245 262.881);
}

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".

Default

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" />

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 label prop, which will be displayed as a heading.

<SidebarSection>
  <SidebarItem isCurrent href="#">
    <SidebarLabel>Item 1</SidebarLabel>
  </SidebarItem>
</SidebarSection>
<SidebarSection label="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 for displaying additional actions or options. When using a menu, be sure to include data-slot="menu-action-trigger".

<SidebarItem tooltip="Orders">
  {({ isCollapsed, isFocused }) => (
    <>
      <SidebarLink href="#">
        <SidebarLabel>Orders</SidebarLabel>
      </SidebarLink>
      {(!isCollapsed || isFocused) && (
        <Menu>
          <SidebarMenuTrigger aria-label="Manage">
            <EllipsisHorizontalIcon />
          </MenuTrigger>
          <MenuContent popover={{ offset: 0, placement: "right top" }}>
            <MenuItem href="#new-order">
              <PlusIcon />
              Create New Order
            </MenuItem>
            <MenuItem href="#view-all">
              View All Orders
            </MenuItem>
            <MenuItem href="#pending-orders">
              Pending Orders
            </MenuItem>
            <MenuItem href="#completed-orders">
              Completed Orders
            </MenuItem>
            <MenuItem href="#export-orders">
              Export Orders
            </MenuItem>
          </MenuContent>
        </Menu>
      )}
    </>
  )}
</SidebarItem>

By default, the sidebar menu trigger will be visible when you hover over the sidebar item. If you want to always show the menu trigger, you can use the alwaysVisible prop.

<SidebarMenuTrigger alwaysVisible aria-label="Manage">
  <EllipsisHorizontalIcon />
</SidebarMenuTrigger>

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: <HomeIcon />, isCurrent: true, badge: undefined },
  { label: "Products", icon: <CubeIcon />, isCurrent: false, badge: "31.51K" },
]

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...

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

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"
    >
      <SidebarLabel className="font-medium">Intent UI</SidebarLabel>
    </Link>
  </SidebarHeader>
  ...
</Sidebar>

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

<Sidebar {...props}>
  ...
  <SidebarFooter>
    <Menu>
      <MenuTrigger aria-label="Profile">
        <Avatar isSquare src="https://intentui.com/images/avatar/cobain.jpg" />
        <div className="group-data-[collapsible=dock]:hidden text-sm">
          Kurt Cobain
          <span className="block -mt-0.5 text-muted-fg">[email protected]</span>
        </div>
        <ChevronDownIcon className="absolute right-3 transition-transform size-4 group-pressed:rotate-180" />
      </MenuTrigger>
      <MenuContent placement="bottom right" className="min-w-(--trigger-width)">
        <MenuItem/>
      </MenuContent>
    </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

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...

Remember state

To persist the sidebar’s state across sessions, wrap your layout with the SidebarProvider component. It stores the sidebar’s state in a cookie and restores it when the user revisits the page.

import { cookies } from "next/headers"

export default async function Layout({ children }: Readonly<{ children: React.ReactNode }>) {
  const cookieStore = await cookies()
  const sidebarState = cookieStore.get("sidebar_state")

  let defaultOpen = true
  if (sidebarState) {
    defaultOpen = sidebarState.value === "true"
  }
  return (
    <SidebarProvider defaultOpen={defaultOpen}>

Props

The sidebar supports the following props:

Property	Type	Default
`intent`	`"default" \| "float" \| "inset"`	`"default"`
`collapsible`	`"hidden" \| "dock" \| "none"`	`"hidden"`
`side`	`"left" \| "right"`	`"left"`
`closeButton`	`boolean`	`"true"`

SidebarContextProps

Property	Type
`state`	`"expanded" \| "collapsed"`
`open`	`boolean`
`setOpen`	`(open: boolean) => void`
`isOpenOnMobile`	`boolean`
`setIsOpenOnMobile`	`(open: boolean) => void`
`isMobile`	`boolean`
`toggleSidebar`	`() => void`

SidebarProviderProps

Property	Type	Default
`defaultOpen`	`boolean`	`true`
`isOpen`	`boolean`	`undefined`
`onOpenChange`	`(open: boolean) => void`	`undefined`
`shortcut`	string	`"b"`

Navbar

Avatar

Sidebar

Basic

Installation

Composed components

Manual installation

CSS variables

Intent

Default

Inset

Float

Collapsible

Hidden

Dock

Default open

Sidebar section

Sidebar disclosure group

Menu actions

Badge

Separator

Tooltip

Header

Footer

Side

Put anything

Remember state

Props

Sidebar

SidebarContextProps

SidebarProviderProps

On this page

On this page