Navigation

Sidebar

Composable, collapsible app sidebar.

Import

tsx

import { Sidebar, SidebarProvider, SidebarTrigger, SidebarContent, SidebarMenu, SidebarMenuItem, SidebarMenuButton } from "@cooud-ui/ui";

bash

npx cooud-ui add sidebar

Examples

Collapsible navigation

A composable app sidebar with grouped menu items, a header and footer. Use the trigger to collapse it to icons.

Toggle the sidebar with the button above.

tsx

<SidebarProvider className="!min-h-0 h-full">
  <Sidebar collapsible="icon" className="!h-full">
    <SidebarHeader>
      <span className="px-2 text-sm font-semibold text-fg">Acme Inc.</span>
    </SidebarHeader>
    <SidebarContent>
      <SidebarGroup>
        <SidebarGroupLabel>Workspace</SidebarGroupLabel>
        <SidebarGroupContent>
          <SidebarMenu>
            <SidebarMenuItem>
              <SidebarMenuButton isActive tooltip="Home">
                <Home />
                <span>Home</span>
              </SidebarMenuButton>
            </SidebarMenuItem>
            <SidebarMenuItem>
              <SidebarMenuButton tooltip="Inbox">
                <Inbox />
                <span>Inbox</span>
              </SidebarMenuButton>
            </SidebarMenuItem>
            <SidebarMenuItem>
              <SidebarMenuButton tooltip="Calendar">
                <Calendar />
                <span>Calendar</span>
              </SidebarMenuButton>
            </SidebarMenuItem>
          </SidebarMenu>
        </SidebarGroupContent>
      </SidebarGroup>
    </SidebarContent>
    <SidebarFooter>
      <SidebarMenu>
        <SidebarMenuItem>
          <SidebarMenuButton tooltip="Settings">
            <Settings />
            <span>Settings</span>
          </SidebarMenuButton>
        </SidebarMenuItem>
      </SidebarMenu>
    </SidebarFooter>
  </Sidebar>
  <div className="flex flex-1 flex-col gap-3 p-4">
    <SidebarTrigger />
    <p className="text-sm text-fg-secondary">Toggle the sidebar with the button above.</p>
  </div>
</SidebarProvider>

API Reference

Generated from the component's exported types.

SidebarProviderProps

Extends HTMLAttributes<HTMLDivElement>

Prop	Type	Default	Description
`defaultOpen`	`boolean`	`true`	Default desktop open state when uncontrolled.
`open`	`boolean`	—	Controlled desktop open state.
`onOpenChange`	`(open: boolean) => void`	—	—
`enableKeyboardShortcut`	`boolean`	`true`	Enable the Ctrl/Cmd+B toggle shortcut.

SidebarProps

Extends HTMLAttributes<HTMLDivElement>

Prop	Type	Default	Description
`side`	`"left" \| "right"`	`"left"`	—
`variant`	`"sidebar" \| "floating" \| "inset"`	`"sidebar"`	—
`collapsible`	`"offcanvas" \| "icon" \| "none"`	`"icon"`	—
`aria-label`	`string`	—	Accessible label for the navigation landmark.

SidebarTriggerProps

Extends ButtonHTMLAttributes<HTMLButtonElement>

Prop	Type	Default	Description
`asChild`	`boolean`	`false`	Render through a custom element while keeping the toggle behavior.

SidebarGroupLabelProps

Extends HTMLAttributes<HTMLDivElement>

Prop	Type	Default	Description
`asChild`	`boolean`	`false`	—

SidebarMenuButtonProps

Extends ButtonHTMLAttributes<HTMLButtonElement>, VariantProps<typeof sidebarMenuButtonVariants>

Prop	Type	Default	Description
`asChild`	`boolean`	`false`	—
`isActive`	`boolean`	`false`	—
`tooltip`	`ReactNode \| ComponentPropsWithoutRef<typeof TooltipContent>`	—	Tooltip content shown only when the sidebar is collapsed to icons on desktop. Accepts a string or full `TooltipContent` props.
`size`	`"sm" \| "md" \| "lg"`	`"md"`	—

SidebarMenuSubButtonProps

Extends ButtonHTMLAttributes<HTMLButtonElement>

Prop	Type	Default	Description
`asChild`	`boolean`	`false`	—
`isActive`	`boolean`	`false`	—
`size`	`"sm" \| "md"`	`"md"`	—