shadcn.io is not affiliated with official shadcn/ui
Multi-Level Menu Sidebar Block for React
A grocery app in a fixed-height window whose inset sidebar drills down one level at a time, panel by panel up to four levels deep, with a back button, Escape and a breadcrumb that all go up.
Installation
Overview
Replace a deep tree of folds with this multi-level menu sidebar for React with Base UI. A window framed by a hairline with a plus mark on each corner holds an inset Sidebar that shows one level at a time: departments first, then the aisles of the one you choose, then its shelves, down to four levels (Fresh, Produce, Fruit, Apples). Each level is a panel in a stack, so choosing a row that has more inside slides its panel in from the end of the line and moves focus to its title, and a back button named after the level above, the Escape key and the page's breadcrumb all go up one step. The panels you are not on are inert, so they cannot be tabbed into or read. The page shows the products under wherever you are, counted, with the path above them as a breadcrumb. Folded to icons the rail shows the five department icons, and pressing one unfolds it onto that department; below the medium breakpoint it is a sheet. It's built from Sidebar, Button and Guides, with CSS transitions only. For catalogues, settings trees, file pickers and any menu where showing everything at once would be too much.
FAQ
How does the drill-down work?
Every place that has more inside it, and the list of departments, is one panel, and all of them sit in one grid cell. The panel you are on is in place; the ones above it in your path are moved out toward the start, and every other panel waits out toward the end. Changing the path only changes which class each panel wears, so the slide is a plain CSS transition on translate, and in a right-to-left layout it runs the other way. Panels that are not on show are inert and aria-hidden, so only one list is ever reachable by keyboard or screen reader.
How do I go back up?
Three ways, all to the same place. The ghost button at the top of a panel is named after the level above ("Produce" over the Fruit panel). Escape does the same while focus is in the rail, and it does not close the phone sheet until you are back at the departments. The breadcrumb over the products is a row of links to every step on the way. After any step the new panel's title takes focus, and the status line says where you are and how many products it holds.
What does the page show?
The products under the place you are in: choose Fresh and it lists all fourteen, choose Fruit and it lists six, choose Apples and it lists two. The counts on the rows and the list are derived from the same typed PRODUCTS array, never typed twice. A shelf, a place with nothing inside it, is a link that marks itself as the current page instead of opening a panel.
What happens when the sidebar folds to icons?
The menu button or the rail along the edge folds it to the five department icons with tooltips; the deeper panels are hidden there. Pressing a department icon unfolds the rail and drills into that department. The provider is set with persist={false} and shortcut={false}, so the block writes no cookie and leaves Ctrl and Command with B to the page it sits on.
What stays in the page, and how do I connect it?
Everything. The shop's places and its thirty-six products are typed at the top of the file, and nothing is ordered or saved. A row that opens a place is a SidebarMenuButton with an onClick handler, and a shelf is a link to # whose handler picks it instead of navigating. The shelf links are SidebarMenuButtons with render set to an a element. Point them at your routes and mark the current one with isActive and aria-current.
How does it work on a phone?
Below the medium breakpoint the sidebar is a sheet that the menu button in the top bar opens from the start edge, the right in a right-to-left layout. Drilling in and going back keep the sheet open; choosing a shelf closes it and puts focus back on the button, and the page behind it shows the shelf's products and the status line says which.
Related
- Pro
Nested Collapsible Sidebar
Folds and treesA help centre in a fixed-height window whose wide sidebar folds three levels deep, categories that hold topics that hold articles, with a Reveal active button that opens only the folds above the open article.
- Pro
Collapsible Items Sidebar
Folds and treesA design system's docs in a fixed-height window whose sidebar rows are split: a label that opens a section's overview and a separate chevron that opens its sub-menu, with a count of pages on each row.
- Pro
Sub-Menus Sidebar
Folds and treesA recipe manager in a fixed-height window whose floating sidebar has sections with sub-menus, a switch between One at a time and Keep open, and arrow keys that open a sub-menu toward the end of the line and close it toward the start.
- Pro
Documentation Tree Sidebar
Folds and treesA docs host in a fixed-height window whose sidebar is a numbered outline that opens the folds above the page you choose, an Auto-collapse switch that closes the rest, a breadcrumb over the page and Previous and Next buttons in the top bar.
- Pro
Inset Variant Sidebar
VariantsAn issue tracker in a fixed-height window with an inset sidebar: the rail's tint fills the window and the page is a raised, rounded panel of issues filtered by view and label.
- Pro
File Tree Sidebar
Folds and treesA code editor in a fixed-height window whose slim sidebar is a file tree with file-type icons, arrow-key, Home, End, asterisk and type-ahead navigation, a Collapse all button, and the chosen file's lines and path on the page.