Navigation with Search Sheet for React

Not in this demo: the input is uncontrolled and the links are static. Keep the query in state and show only the links that contain it, or submit it to your search page.

It has aria-label="Search menu" and type="search", since no visible label sits above it. The placeholder isn't a label: it disappears as people type.

Home, Products, Services, Blog and Contact, as a elements in a nav, mapped from a static list.

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.