Navigation rail
The wide navigation rail (COMPONENT_SPEC §14; Compose WideNavigationRail andModalWideNavigationRail). Static rails are plain HTML with m3e-css classes. Expanding and collapsing animate the width, the items and the labels on Compose's springs (width, spacing and icon position on the default spatial spring, label color on the default effects spring), writing one progress per frame so the rail lays out once per frame; a new target keeps the current velocity. The modal rail opens over a scrim as a dialog.
Collapsed and expanded
Animated (element)
<m3e-wide-navigation-rail> with <m3e-navigation-item>children; other children go to the header. The menu button calls toggle().
Modal (element)
<m3e-modal-wide-navigation-rail>: collapsed it is a collapsed rail; expanded it opens over a scrim (the scrim at 32% scrim, asurface-container rail with large corners) as a dialog: focus stays inside, Escape or the scrim collapse it and focus returns to the menu button. Withhide-on-collapse nothing shows while collapsed and the expanded rail slides in.
React
<WideNavigationRail>: press an item to move the indicator; the menu button switches isExpanded, which animates. <ModalWideNavigationRail>:isExpanded + onExpandedChange (Escape and the scrim ask to collapse).
Navigation rail (deprecated)
Deprecated (DECISIONS D4): the legacy NavigationRail ships until 2.0 for migration and gets no new features (no element, no animation). Use the wide navigation rail.