ComponentsSidebar

overlaystexulinot agent-emittableapp

Sidebar

sidebar

Collapsible app rail with sections, badges and safe links.

Live examples

Workspace rail

Workspace rail

Loading demo…

Props

Public props for Sidebar
NameKindRequiredDefaultDescription
itemsarrayno——
sectionsarrayno——
collapsedbooleannofalse—
collapsiblebooleannotrue—
drawerbooleannofalse—
variantenum (default, inset)no"default"—
headerslotno——
footerslotno——
itemIconslotno——
labelstringno"Main"—
collapseLabelstringno——
expandLabelstringno——
hrefTrustenum (developer, untrusted)no"developer"—
classstringno——

Keyboard

Keyboard behavior for Sidebar
KeyAction
—See accessibility notes for keyboard behavior.

Accessibility

  • nav landmark; collapsed items keep accessible names via tooltips.

Evidence for sidebar

Latest committed gates for sidebar (as of 2026-10-23). Static snapshot — not live CI.

Behavior

n/ano behavior scenario

No dedicated behavior scenario for this catalog id (a styled or display surface, covered by its unit and axe tests).

Size (gzip)

texuli/sidebar · budget 24.0 KiB

Budget from texuli.budgets.json; re-measure with `pnpm size --filter <entry>`.

Axe

documented

  • tests/e2e/site-component-pages.spec.ts
  • docs/quality (a11y-*)

Site component pages axe gate; package-level a11y docs under docs/quality when present.

Browsers

  • chromium
  • webkit
  • mobile

Playwright projects: Desktop Chrome, Desktop Safari, Pixel 7. Firefox is a known gap on this host.

When to use

Use when

  • Primary app navigation rail

Don’t use when

Prefer another component

  • Marketing site nav (use navigation-menu)