Nav Items on a tray, with the active page lifted onto surface. Collapses to an icon rail.
FreeWeb and MobileMotion
Preview
npx shadcn add @fetaui/sidebarPlayground
Shell
Northline / Projects / Checkout redesign
Checkout redesign
Fewer steps from bag to confirmation. Beta opens October 14.
- Address stepAutocomplete and postcode orderIn review · Today
- Payment sheetOne tap pay and saved cardsIn progress · Thu
- ConfirmationReceipt, tracking and next stepsDone · Mon
Community
Community, collapsed
Community, drawer
Finance
Finance, collapsed
Icons animation
Motion
Installation
Terminal· bash
npx shadcn add @fetaui/sidebar
Accessibility
- A nav landmark with a label.
- The active row uses aria-current.
- Groups use aria-expanded.
- On the rail, rows are named and show labels as tooltips. A group goes to its first child and marks itself active for any child.
Motion
- The active surface glides between rows on a spring.
- Groups fade in over 120 ms and the chevron turns.
- Collapsing closes the tray with a clip over 260 ms, and the icons stay put.
- With reduced motion, the surface jumps and the rail snaps.
Responsive behavior
- 264 wide on Web, 64 on the rail, and 320 in the Mobile drawer.
Performance
- The width changes once and a clip path closes over 260 ms, so nothing reflows on each frame.
- Sub rows mount only while their group is open, and rail tooltips mount only on the rail.
- The active surface is one shared layout element.
Note for AI
Give your coding assistant the Markdown reference instead of screenshots.
- Import Sidebar, NavItem and SidebarPerson from @/components/fetaui/sidebar after installing it. sections is required.
- A link with items becomes a group. Ids must be unique across sections, because active and defaultOpen use them.
- collapsed is yours to hold, and SidebarPerson needs rail passed too. mode="drawer" is the 320 wide Mobile layout.
- Links without href render as buttons, and onNavigate reports the id. Composes NavItem and Tooltip.
Related
Navigation MenuComponentA tray pill of triggers with soft panels that morph as you move across them.Tab BarComponentThree to five top destinations on Mobile, as a labeled bar or a floating dock.SheetComponentContent that complements the page, sliding in from an edge and floating 8 px in from it.TreeComponentHierarchies in a Soft card: files, navigation with counts, checkboxes with parent states, and indent guides.BreadcrumbComponentShows where the current page sits and lets people step back up.