Four app-shell sidebars — simple with search and count badges, sectioned with nested disclosures, a dual-tier icon rail with a swapping panel, and one that collapses to a rail — with gliding active pills, height and width springs and blurred panel swaps.
Simple
Newsimple.tsxLogo, a search field that filters the nav live, icon items with count badges, footer links and an account menu that opens upward.
| Prop | Type | Default | Description |
|---|---|---|---|
brand | string | "Kestrel" | Name beside the mark. |
items / footerItems | { id; label; icon: LucideIcon; href?; count? }[] | — | Main and footer items. href renders a link. |
value / defaultValue | string | "overview" | Active page id (controlled / uncontrolled). |
onValueChange | (id: string) => void | — | Called when a page is chosen. |
account | { name; email } | — | Account row in the footer. |
onAccountAction | (action: "profile" | "billing" | "sign-out") => void | — | Account menu choice. |
label | string | "Main" | Accessible name of the nav. |
className | string | — | Classes for the outer element. |
Sectioned
Newsectioned.tsxGroup headings, nested items that spring open with a rotating chevron, and an active pill that glides between top-level and child pages via shared layout.
| Prop | Type | Default | Description |
|---|---|---|---|
brand / context | string | — | Name and a status subline (for example the environment). |
groups | { label; items: { id; label; icon; href?; badge?; children?: { id; label; href? }[] }[] }[] | — | Headed groups. Items with children become disclosures. |
value / defaultValue | string | "pipelines-runs" | Active page id (controlled / uncontrolled). |
onValueChange | (id: string) => void | — | Called when a page is chosen. |
defaultExpanded | string[] | — | Disclosures open on mount; the active page’s parent always opens. |
usage | { used: number; limit: number } | — | Footer meter that fills on a spring. |
className | string | — | Classes for the outer element. |
Dual-tier
Newdual-tier.tsxA narrow icon rail beside a wide panel; picking a rail section glides its indicator and swaps the panel content with a blurred crossfade.
| Prop | Type | Default | Description |
|---|---|---|---|
sections | { id; label; icon; description?; groups: { label?; links: { id; label; href?; count? }[] }[] }[] | — | Rail sections and the panel content for each. |
section / defaultSection / onSectionChange | string / string / (id) => void | "projects" | Section shown in the panel. |
value / defaultValue | string | "proj-website" | Active link id (controlled / uncontrolled). |
onValueChange | (id: string) => void | — | Called when a link is chosen. |
accountInitials | string | "JT" | Avatar at the bottom of the rail. |
className | string | — | Classes for the outer element. |
Collapsible
Newcollapsible.tsxCollapses to a 68px icon rail: the width springs, labels fade, a gliding pill marks the page and rail items get side tooltips. Persists nothing.
| Prop | Type | Default | Description |
|---|---|---|---|
items | { id; label; icon; href?; count? }[] | — | Main items. Counts become a dot on the rail. |
projects / projectsLabel | { id; label; tone?: "volt" | "ember" | "info" | "success" | "warning"; href? }[] / string | — | Second group with coloured markers. |
collapsed / defaultCollapsed / onCollapsedChange | boolean / boolean / (c) => void | false | Rail state. Nothing is stored. |
value / defaultValue | string | "dashboard" | Active page id (controlled / uncontrolled). |
onValueChange | (id: string) => void | — | Called when a page is chosen. |
account | { name; role } | — | Footer account row. |
className | string | — | Classes for the outer element. |
Install the whole set
Installs every app sidebars variant at once. Each section above has its own command for a single variant.
Pro installs use your private registry token. Add the @geturui-pro registry once — setup guide. The command works after you get Pro.
Accessibility
- Each sidebar is a nav landmark; the current page carries aria-current="page" and icons are aria-hidden.
- Disclosures and the collapse toggle are buttons with aria-expanded and aria-controls; the dual-tier rail is a vertical tablist with arrow, Home and End keys.
- The account menu is a role=menu with arrow keys and Escape back to its trigger; rail tooltips follow focus as well as hover.
- Height, width and panel springs fall back to instant changes under reduced motion.