Sidebar

PreviewCode

offcanvasiconnone

Collapse sidebar

Acme Inccollapsible="icon" · state="expanded"

Acme Inc

PlatformPlaygroundModelsSettings

Benji van der Brandbenji@example.com

PlaygroundRun

Prompt

• Landing page copyrun-1042 · 1.2s
• Release notesrun-1038 · 0.9s
• Changelog digestrun-1031 · 2.4s

Last action: none.

UsageCopy Anchor Link

import {
  Sidebar,
  SidebarContent,
  SidebarFooter,
  SidebarGroup,
  SidebarGroupContent,
  SidebarGroupLabel,
  SidebarHeader,
  SidebarInset,
  SidebarMenu,
  SidebarMenuButton,
  SidebarMenuItem,
  SidebarProvider,
  SidebarRail,
  SidebarTrigger,
  SidebarUserMenu,
} from "@gpuixui/components";

<SidebarProvider collapsible="icon">
  <Sidebar>
    <SidebarHeader>…</SidebarHeader>
    <SidebarContent>
      <SidebarGroup>
        <SidebarGroupLabel>Platform</SidebarGroupLabel>
        <SidebarGroupContent>
          <SidebarMenu>
            <SidebarMenuItem>
              <SidebarMenuButton label="Playground" tooltip="Playground" isActive>
                <Icon name="terminal" size="sm" color={theme.colors.accentForeground} />
              </SidebarMenuButton>
            </SidebarMenuItem>
          </SidebarMenu>
        </SidebarGroupContent>
      </SidebarGroup>
    </SidebarContent>
    <SidebarFooter>
      <SidebarUserMenu user={{ name: "Benji", email: "benji@example.com" }} />
    </SidebarFooter>
    <SidebarRail />
  </Sidebar>
  <SidebarInset>
    <SidebarTrigger />
  </SidebarInset>
</SidebarProvider>;

CompositionCopy Anchor Link

SidebarProvider
├── Sidebar
│   ├── SidebarHeader
│   │   └── SidebarMenu
│   │       └── SidebarMenuItem
│   │           ├── SidebarMenuButton
│   │           ├── SidebarMenuAction
│   │           └── SidebarMenuBadge
│   ├── SidebarContent
│   │   └── SidebarGroup
│   │       ├── SidebarGroupLabel
│   │       ├── SidebarGroupAction
│   │       └── SidebarGroupContent
│   │           └── SidebarMenu
│   │               └── SidebarMenuItem
│   │                   ├── SidebarMenuButton
│   │                   └── SidebarMenuSub
│   │                       └── SidebarMenuSubItem
│   │                           └── SidebarMenuSubButton
│   ├── SidebarFooter
│   │   └── SidebarUserMenu
│   └── SidebarRail
└── SidebarInset

Sidebar renders its children once. On a window narrower than 768px that tree is the modal sheet; the parts are the same, so a panel does not need a second layout for mobile.

BehaviourCopy Anchor Link

• Collapsing is collapsible: "offcanvas" parks the panel outside the window edge, "icon" shrinks it to a 48px rail (64px for the floating and inset variants, which keep their p-2 gutter), and "none" leaves it fixed. The gap in the flow pays the same width, so the content beside it moves by exactly the panel it loses.
• The keyboard is ⌘/Ctrl + B. SIDEBAR_KEYBOARD_SHORTCUT is exported, and toggleSidebar() is on useSidebar(). On a narrow window the shortcut opens and closes the sheet.
• The open state persists through SidebarPreference: the default jar uses shadcn's sidebar_state key and seven-day lifetime, in process memory. Pass preference to keep it across launches.
• Icon mode clips the label and publishes the row's tooltip; only one tip can be open, and the active row keeps its accent. badge, action and sub-menus hide with the labels, as shadcn's selectors do.
• The mobile sheet is a role="dialog" with a scrim: pressing the scrim dismisses it, Tab wraps inside it, Escape closes it, and focus returns to the trigger. The desktop state is untouched.
• The rail toggles on a press and on an 8px drag toward its edge. It stays at the window edge while an offcanvas panel is parked, so the panel can be reopened.

APICopy Anchor Link

SIDEBAR_WIDTH, SIDEBAR_WIDTH_ICON, SIDEBAR_WIDTH_MOBILE, SIDEBAR_BREAKPOINT and SIDEBAR_KEYBOARD_SHORTCUT are exported from the component module.

Widths and the shortcutCopy Anchor Link

width (default 256, shadcn's 16rem), iconWidth (48, 3rem) and mobileWidth (288, 18rem) are shadcn's CSS variables as numbers a caller can override. A non-finite, zero or negative value reads as the default.

The provider hears Cmd/Ctrl+B through the keys that bubble inside its subtree. GPUix delivers window keys only to the application's render handler, so an app that wants the shortcut to work with focus outside the sidebar forwards its root onKeyDown through isSidebarShortcut(event) — the same rule the provider runs.

Edit this page on GitHubpackages/components/docs/sidebar.mdx