Mobile Menu Sheet for React

Home, Products, About and Contact, as a elements in a nav, mapped from a static list. Swap href="#" for your routes, or use your router's link.

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.

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.

Hide the trigger from the md breakpoint up, with md:hidden, and show your full navigation there instead.

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.

SheetTitle names the dialog for assistive tech, so every sheet renders one; hide it with sr-only when the design has no visible heading. It reads Menu. The sheet has no description, which is fine: the title says enough.