Components / Navigation
New
Sidebar tree
A recursive navigation component for presenting nested routes with file-tree connectors and animated expansion states.
1
When to use it
The sidebar tree works well when users need to understand relationships between routes, files, categories, or nested resources.
Documentation navigation
Repository and file browsers
Nested settings areas
Product management hierarchies
Component library navigation
2
Basic usage
Provide recursive tree data and control the selected and expanded states as required.
Example
<SidebarTree
sections={sidebarSections}
activeId={activePageId}
expandedIds={expandedIds}
onExpandedChange={setExpandedIds}
openSectionIds={openSectionIds}
onOpenSectionsChange={setOpenSectionIds}
onItemSelect={(item) => setActivePageId(item.id)}
/>3
Controlled expansion
Controlling the expanded IDs allows the application to persist navigation state or synchronise it with the current route.
Example
const [expandedIds, setExpandedIds] = React.useState([
"components",
"navigation",
]);
const [openSectionIds, setOpenSectionIds] = React.useState([
"guides",
"library",
]);