Preview

Import

import {
  Sidebar, SidebarHeader, SidebarContent, SidebarFooter,
  SidebarGroup, SidebarGroupLabel, SidebarItem,
} from "@sigil-ui/components";

Usage

SidebarItem renders a button. Use its onClick handler to select a view or navigate with your application's router.

<Sidebar aria-label="Workspace navigation">
  <SidebarHeader>Fieldwork</SidebarHeader>
  <SidebarContent>
    <SidebarGroup>
      <SidebarGroupLabel>Workspace</SidebarGroupLabel>
      <SidebarItem
        icon={<HomeIcon />}
        active={view === "overview"}
        onClick={() => setView("overview")}
      >
        Overview
      </SidebarItem>
      <SidebarItem
        icon={<FolderIcon />}
        active={view === "projects"}
        onClick={() => setView("projects")}
      >
        Projects
      </SidebarItem>
    </SidebarGroup>
  </SidebarContent>
  <SidebarFooter>
    <SidebarItem icon={<SettingsIcon />} onClick={() => setView("settings")}>
      Settings
    </SidebarItem>
  </SidebarFooter>
</Sidebar>

Collapse behavior

The built-in edge button toggles between the full sidebar and an icon-only view. Provide an icon and an accessible label for items that need to remain usable while collapsed.

<Sidebar defaultCollapsed aria-label="Workspace navigation">
  <SidebarContent>
    <SidebarItem icon={<HomeIcon />} aria-label="Overview" onClick={() => setView("overview")}>
      Overview
    </SidebarItem>
  </SidebarContent>
</Sidebar>

For a persistent category list, set collapsible={false}. This keeps the sidebar expanded and removes the edge button, including when defaultCollapsed is set.

<Sidebar collapsible={false} aria-label="Component categories">
  <SidebarContent>{/* Category buttons */}</SidebarContent>
</Sidebar>

Token integration

CSS Variable	Used for
`--s-sidebar-width`	Expanded width
`--s-sidebar-collapsed`	Collapsed width
`--s-surface`	Sidebar background
`--s-text`	Item text
`--s-text-muted`	Group labels and inactive icons
`--s-primary`	Active text and tinted item background
`--s-border`	Sidebar, header, and footer borders
`--s-border-style`	Border style
`--s-duration-normal`	Collapse animation
`--s-ease-out`	Animation easing

Props

Prop	Type	Default	Description
`collapsible`	`boolean`	`true`	Show the built-in collapse control; false keeps the sidebar expanded
`defaultCollapsed`	`boolean`	`false`	Start collapsed when collapsing is enabled
`className`	`string`	—	Additional CSS classes
`children`	`ReactNode`	—	Sidebar content

SidebarItem

Prop	Type	Default	Description
`icon`	`ReactNode`	—	Leading icon, also shown while collapsed
`active`	`boolean`	`false`	Highlight the current item
`onClick`	`MouseEventHandler<HTMLButtonElement>`	—	Handle selection or navigation
`className`	`string`	—	Additional CSS classes
`children`	`ReactNode`	—	Item label, hidden while collapsed

Accessibility

The sidebar renders an aside; provide aria-label to name the region.
The collapse control changes its accessible name between “Collapse sidebar” and “Expand sidebar.”
Active items use aria-current="page".
Give icon-only items an aria-label so their names remain available when collapsed.

On this page