Nested Navigation Menu Sheet for React

From a static array of two sections, each a heading and its links. Products holds All Products, New Arrivals and Best Sellers; Resources holds Documentation, Guides and API Reference.

Their column has ps-4, padding on the start side, so the indent moves to the right in right-to-left layouts.

Not in this demo: both are always open. Wrap each section in a Collapsible with the heading as its trigger to fold it away.

Links in a sheet don't close it. When a link changes the page, close the sheet in its click handler, or let your router's navigation unmount it. To close it from code, control the open state: Pass open to Sheet; onOpenChange receives the next boolean.

The outline button labeled Menu is the trigger, and its text is the accessible name. The Button goes in the render prop of SheetTrigger, and the label stays its child.

side="left" on SheetContent slides the panel in from the left, where people look for a menu. It fills the height and caps its width from the sm breakpoint.