Left Drawer Navigation Menu for React

Home, Team, Projects, Settings and Help, each a ghost Button with justify-start, an icon marked data-icon="inline-start" and its label.

Render each Button as your router's link. Pass the link with render and set nativeButton={false}.

Navigation, above the menu, is the DrawerTitle. DrawerTitle names the dialog for assistive tech, so every drawer renders one; give it sr-only when the design has no visible heading.

swipeDirection="left" on Drawer puts it on the left edge. The prop names the swipe that closes the drawer, so left docks it on the left; leave it out for a bottom drawer.

An outline icon button opens the drawer. Its aria-label, Open navigation, is the accessible name; the icon is aria-hidden. The Button goes in the render prop of DrawerTrigger.

Not in this demo: the items have no handler. Close it when people navigate: Pass open to Drawer; onOpenChange receives the next boolean.