Navigation with User Profile Sheet for React

A muted, rounded row with an Avatar showing JD in its AvatarFallback, the name John Doe and the email john@example.com. Add an AvatarImage to show a photo.

Dashboard, Projects, Settings and Sign Out, as a elements in a nav, mapped from a static list.

Only if your sign-out is a page. If it calls an API, make it a button so it isn't opened in a new tab or prefetched, and send people to the sign-in page afterwards.

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.