The second column of app navigation
A 240px column listing the pages inside one section, under a heading that names it. Items can sit under group headings, carry a count badge, and nest one level deep as an accordion. It works on its own, and it is the panel AppSidebar opens beside the rail when navigation runs to a third level.
Default
Flat rows with one accordion. Financial planning stays closed until it is pressed, and its rows hang from a tree line under the label.
Current page inside an accordion
When activeKey names a nested row, the accordion holding it starts open, so the reader lands with their place already showing. Close it and the parent row keeps the emphasis weight.
Groups and badges
Consecutive items that share a group render under one heading. A badge adds the same count pill the app sidebar uses.
Collapse control
Passing onCollapse adds a close control beside the heading. The panel reports the press; the host decides what showing and hiding it means.
Back row
Passing onBack adds a row above the heading that returns to the level above. This is the drill-in screen the app sidebar’s mobile drawer shows in place of the panel. Press Menu, then Reports, to move between the two levels.
// From the npm package
import { SidebarPanel } from 'rift-ds/components/SidebarPanel/SidebarPanel';
// Or as source you own, via the shadcn CLI
npx shadcn@latest add https://rift-ds.com/r/sidebar-panel.json