Sidebar Navigation Sheet for React

From a static array: each group has a title, rendered as an h3, and its links. The nav lays the groups out in a column with gap-4.

Set aria-current="page" on the link for the page people are on and style it, for example with aria-[current=page]:text-foreground.

Each link has ps-4, padding on the start side, so the indent mirrors in right-to-left layouts.

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 Navigation 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.