Collapsible navigation for app layouts
A two-state sidebar that collapses to a 64px icon rail or expands to 280px with labels, category headings, accordion sub-items with tree-line connectors, and a profile section at the bottom. Items take an optional count badge; topSlot and footerSlot host consumer content that fades out while collapsed, persistentTopSlot keeps the top slot for content with a collapsed form of its own, collapsedFooterSlot stands in for the footer while it is, and a click on the empty space of the collapsed rail expands it; and the layout prop sets how the rail meets the page: flush, floating as a glass card inset from the viewport edges, or inset, flush on the app shell colour beside an inset content surface.
Navigation runs three levels deep, and subNav picks the shape once per sidebar. In the default accordion mode the second level is the accordion under a row, and a sub-item with children of its own opens them as the third level in a SidebarPanel beside the rail. In panel mode a top-level row opens its sub-items straight into the panel, whose own accordion carries the third level, and the collapsed rail widens to 80px to put a label under every icon. On small screens neither shows a panel: the drawer drills in to a second screen with a back row.
Expanded
Collapsed
Collapsed footer
collapsedFooterSlot takes the footer's place while the rail is collapsed: the same controls at their smallest, stacked on the rail's axis. Click the rail's empty space to expand it and see the footer it stands in for.
Entity switcher
The top slot under the logo is where an EntitySwitcher sits, the company, team or account the app is scoped to. With persistentTopSlot the slot stays through the collapse: the switcher keeps its mark on the rail's axis and fades the rest, so nothing moves as the rail sweeps, and its panel opens beside the collapsed rail. Collapse the rail to see it.
Third level
Reports holds the second level as its accordion. Financial planning has children of its own, so it carries a trailing chevron and opens them in the panel beside the rail. The accordion and the panel holding the current page both start open. Press Financial planning again, or the panel’s collapse control, to close it.
Panel mode
With subNav set to panel, the collapsed rail is the whole first level, so it widens to 80px and names each destination under its icon. Reports opens its sub-items straight into the panel, and Financial planning becomes the panel’s own accordion. The row feeding the open panel carries the selection fill. The layout prop sets how the rail and its panel meet the page.
Flush, the default, runs the rail edge to edge on the shell colour behind a hairline divider, and the panel continues it on the same ground, nothing raised.
// From the npm package
import { AppSidebar } from 'rift-ds/components/AppSidebar/AppSidebar';
// Or as source you own, via the shadcn CLI
npx shadcn@latest add https://rift-ds.com/r/app-sidebar.json