Demos#
Declarative composition#
Use compound React components when the menu structure is authored in JSX. This example persists manually opened and closed groups in session storage.
Data composition#
Use sections or data to render the same recursive structure from JavaScript objects.
This example is placed inside a ScrollView with a viewport-aware maximum height and persists its scroll position in session storage.
Responsive drawer#
The same data renders as an inline menu on larger screens and behind a hamburger button on smaller screens. ResponsiveProvider owns the breakpoint, Drawer state, and optional collapsed-inline state, while ResponsiveDrawer handles the dialog, focus trapping, Escape key, backdrop, left-side close button, and focus return.
Drag the demo viewport to the medium breakpoint or narrower to reveal the hamburger button and try the drawer. For a resizable desktop sidebar that can be dragged past its minimum width and restored from the same trigger, see Dismissible desktop navigation.