Navigation and disclosure · stable · MIT

Sidebar

A controlled workspace shell with responsive navigation panel and inset.

Install editable source

Add Sidebar

Base UI / canonicalnpx shadcn@latest add https://gummyui.dev/r/gummy-sidebar.json

No package dependency beyond React. Shared Gummy material is resolved automatically.

Behavior contract

Aside, labelled nav lists, current-page links, and primary inset.

Tab follows native controls and links; trigger toggles the panel.

Light and dark themes, logical RTL layout, reduced motion, responsive content, and forwarded public refs.

Source-derived reference

These public React parts are read directly from the canonical source during the documentation build.

Composes React.HTMLAttributes<HTMLDivElement> & { open?: boolean; defaultOpen?: boolean; onOpenChange?: (open: boolean) => void; }

Troubleshooting

If the material is missing, confirm the registry-installed shared and component CSS files are imported once.
If interaction differs, preserve this contract: Tab follows native controls and links; trigger toggles the panel.
If assistive output differs, preserve this semantic foundation: Aside, labelled nav lists, current-page links, and primary inset.
If dark, RTL, or reduced-motion behavior is missing, verify the nearest theme, direction, and media-query boundaries rather than adding page-local overrides.

Live product source

The Component Lab exercises real source across default, focus, disabled, responsive, dark, reduced-motion, and RTL contexts.

Interactive inspection

Resize the canvas, switch its theme, or reverse its reading direction without changing the rest of the page.

Editable source

Loading editable source…