Navigation drawer
Navigation drawers (COMPONENT_SPEC §15; Compose PermanentNavigationDrawer,DismissibleNavigationDrawer and ModalNavigationDrawer with their drawer sheets and NavigationDrawerItem). Static drawers are plain HTML with m3e-css classes. Opening animates on the default spatial spring and closing on the fast effects spring (Compose's DrawerState), from the current position and velocity; a drag on the open sheet (or the modal scrim) moves it with the pointer and settles with Compose's thresholds. The modal drawer opens over a scrim as a dialog.
m3.material.io: the navigation drawer is no longer recommended in the M3 Expressive update; use the expanded navigation rail instead. Compose still ships the drawers (not deprecated at the pin), so they are built.
Standard (permanent) and modal (static)
A standard sheet (surface, square corners) in the layout next to the content, and a modal sheet (surface-container-low, large end corners) over the 32%scrim. The modal frame contains its fixed sheet only for this page.
Dismissible and modal (element)
<m3e-navigation-drawer variant="dismissible | modal"> with<m3e-navigation-item> children (badge adds the trailing text); other children (headlines, dividers) move into the sheet in order. show(),close(), toggle(); Escape closes; arrow keys move between items. The dismissible drawer pushes the content beside it.
Application content
React
<NavigationDrawer variant items selectedKey onSelectionChange isOpen onOpenChange />: one component for the three drawers, so an adaptive layout can switch the variant without losing the selection. Items may be destinations, { type: 'headline' } or{ type: 'divider' }.