NavigationDrawer

MD3 navigation drawer: a 360dp panel of full-pill destinations, either standard (in the layout, beside the content) or modal (an overlay with a scrim).

Standard

Sits beside the content (Surface color, 16dp trailing corners). Selection is passed down via value / onChange; the active item gets the secondary-container pill.

Selected: inbox

const [value, setValue] = useState('inbox')

<NavigationDrawer aria-label="Mail" value={value} onChange={(event, next) => setValue(next)}>
  <NavigationDrawerItem value="inbox" icon={<InboxIcon />} label="Inbox" badge="24" />
  <NavigationDrawerItem value="starred" icon={<StarIcon />} label="Starred" />
</NavigationDrawer>

badge renders trailing text on the item (e.g. an unread count).

variant="modal" overlays the page with a 0.32 scrim while open. The scrim and Escape call onClose; closing on selection is up to you.

const [open, setOpen] = useState(false)

<Button onClick={() => setOpen(true)}>Open drawer</Button>
<NavigationDrawer
  variant="modal"
  open={open}
  onClose={() => setOpen(false)}
  value={value}
  onChange={(event, next) => {
    setValue(next)
    setOpen(false)
  }}
>
  …
</NavigationDrawer>

Accessibility

Renders an <aside> (complementary landmark) labelled "Navigation" by default — pass your own aria-label / aria-labelledby. Items are native <button>s; the active one carries aria-current="page".
The open modal drawer is a dialog with aria-modal: focus moves inside and is trapped, the rest of the page is inert, Escape closes it, and focus returns to the opener on close.

Props