Menus & Navigation

Sidebar

Composable, collapsible app sidebar.

Import

tsx

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

bash

npx cronus-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>

.cronus

The same component declared in Cronus. Emitted at build time from the audit fixtures — the kernel renders it as HTML with no React.

PortedParity: MatchGeometry 1/1Pixel diff 0 pxLogic 1/1Parity scoreboard

default.cronus

app "audit-fixtures" {
  port 5176
}

style {
  preset aurora
  theme dark
}

component SidebarDefault layout:inline style:sidebar {
  aria-label:"Sidebar"
  label "Sidebar"
  text "Home"
  text "Inbox"
}

page "/audit/sidebar/default" type:custom {
  use SidebarDefault
}

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`	—	Called when the open state changes.
`enableKeyboardShortcut`	`boolean`	`true`	Enable the Ctrl/Cmd+B toggle shortcut.
`className`	`string`	—	Additional class names merged onto the root.
`children`	`ReactNode`	—	Contents of the component.
`id`	`string`	—	DOM id of the root element.

SidebarProps

Extends HTMLAttributes<HTMLDivElement>

Prop	Type	Default	Description
`side`	`"left" \| "right"`	`"left"`	—
`variant`	`"sidebar" \| "floating" \| "inset"`	`"sidebar"`	Visual variant.
`collapsible`	`"offcanvas" \| "icon" \| "none"`	`"icon"`	—
`aria-label`	`string`	—	Accessible label for the navigation landmark.
`className`	`string`	—	Additional class names merged onto the root.
`children`	`ReactNode`	—	Contents of the component.
`id`	`string`	—	DOM id of the root element.

SidebarTriggerProps

Extends ButtonHTMLAttributes<HTMLButtonElement>

Prop	Type	Default	Description
`asChild`	`boolean`	`false`	Render through a custom element while keeping the toggle behavior.
`type`	`string`	—	Native type of the underlying element.
`disabled`	`boolean`	—	Disables pointer and keyboard interaction.
`onClick`	`(event: MouseEvent) => void`	—	Click handler.
`children`	`ReactNode`	—	Contents of the component.
`className`	`string`	—	Additional class names merged onto the root.

SidebarGroupLabelProps

Extends HTMLAttributes<HTMLDivElement>

Prop	Type	Default	Description
`asChild`	`boolean`	`false`	Render as the child element via Slot.
`className`	`string`	—	Additional class names merged onto the root.
`children`	`ReactNode`	—	Contents of the component.
`id`	`string`	—	DOM id of the root element.

SidebarMenuButtonProps

Extends ButtonHTMLAttributes<HTMLButtonElement>, VariantProps<typeof sidebarMenuButtonVariants>

Prop	Type	Default	Description
`asChild`	`boolean`	`false`	Render as the child element via Slot.
`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"`	One of "sm" \| "md" \| "lg".
`children`	`ReactNode`	—	Contents of the component.
`className`	`string`	—	Additional class names merged onto the root.
`type`	`string`	—	Native type of the underlying element.
`disabled`	`boolean`	—	Disables pointer and keyboard interaction.
`onClick`	`(event: MouseEvent) => void`	—	Click handler.

SidebarMenuSubButtonProps

Extends ButtonHTMLAttributes<HTMLButtonElement>

Prop	Type	Default	Description
`asChild`	`boolean`	`false`	Render as the child element via Slot.
`isActive`	`boolean`	`false`	—
`size`	`"sm" \| "md"`	`"md"`	Control size.
`type`	`string`	—	Native type of the underlying element.
`disabled`	`boolean`	—	Disables pointer and keyboard interaction.
`onClick`	`(event: MouseEvent) => void`	—	Click handler.
`children`	`ReactNode`	—	Contents of the component.
`className`	`string`	—	Additional class names merged onto the root.

SidebarRailProps

Extends ButtonHTMLAttributes<HTMLButtonElement>

Prop	Type	Default	Description
`type`	`string`	—	Native type of the underlying element.
`disabled`	`boolean`	—	Disables pointer and keyboard interaction.
`onClick`	`(event: MouseEvent) => void`	—	Click handler.
`children`	`ReactNode`	—	Contents of the component.
`className`	`string`	—	Additional class names merged onto the root.

SidebarInsetProps

Extends HTMLAttributes<HTMLDivElement>

Prop	Type	Default	Description
`className`	`string`	—	Additional class names merged onto the root.
`children`	`ReactNode`	—	Contents of the component.
`id`	`string`	—	DOM id of the root element.

SidebarHeaderProps

Extends HTMLAttributes<HTMLDivElement>

Prop	Type	Default	Description
`className`	`string`	—	Additional class names merged onto the root.
`children`	`ReactNode`	—	Contents of the component.
`id`	`string`	—	DOM id of the root element.

SidebarFooterProps

Extends HTMLAttributes<HTMLDivElement>

Prop	Type	Default	Description
`className`	`string`	—	Additional class names merged onto the root.
`children`	`ReactNode`	—	Contents of the component.
`id`	`string`	—	DOM id of the root element.

SidebarContentProps

Extends HTMLAttributes<HTMLDivElement>

Prop	Type	Default	Description
`className`	`string`	—	Additional class names merged onto the root.
`children`	`ReactNode`	—	Contents of the component.
`id`	`string`	—	DOM id of the root element.

SidebarSeparatorProps

Extends ComponentPropsWithoutRef<typeof Separator>

Prop	Type	Default	Description
`asChild`	`boolean`	—	Render as the child element via Slot.
`children`	`ReactNode`	—	Contents of the component.
`className`	`string`	—	Additional class names merged onto the root.

SidebarGroupProps

Extends HTMLAttributes<HTMLDivElement>

Prop	Type	Default	Description
`className`	`string`	—	Additional class names merged onto the root.
`children`	`ReactNode`	—	Contents of the component.
`id`	`string`	—	DOM id of the root element.

SidebarGroupContentProps

Extends HTMLAttributes<HTMLDivElement>

Prop	Type	Default	Description
`className`	`string`	—	Additional class names merged onto the root.
`children`	`ReactNode`	—	Contents of the component.
`id`	`string`	—	DOM id of the root element.

SidebarMenuProps

Extends HTMLAttributes<HTMLUListElement>

Prop	Type	Default	Description
`className`	`string`	—	Additional class names merged onto the root.
`children`	`ReactNode`	—	Contents of the component.
`id`	`string`	—	DOM id of the root element.

SidebarMenuItemProps

Extends HTMLAttributes<HTMLLIElement>

Prop	Type	Default	Description
`className`	`string`	—	Additional class names merged onto the root.
`children`	`ReactNode`	—	Contents of the component.
`id`	`string`	—	DOM id of the root element.

SidebarMenuSubProps

Extends HTMLAttributes<HTMLUListElement>

Prop	Type	Default	Description
`className`	`string`	—	Additional class names merged onto the root.
`children`	`ReactNode`	—	Contents of the component.
`id`	`string`	—	DOM id of the root element.

SidebarMenuSubItemProps

Extends HTMLAttributes<HTMLLIElement>

Prop	Type	Default	Description
`className`	`string`	—	Additional class names merged onto the root.
`children`	`ReactNode`	—	Contents of the component.
`id`	`string`	—	DOM id of the root element.