material-navigation-rail

MD3 Expressive nav rail — collapsed (96dp) and expanded (220–360dp). Items via slotted <material-navigation-item>; the rail propagates layout when toggled. Built-in toggle + title header, external control methods, standard/modal/auto modality, arrow-key navigation.

built-in toggle · label="Mail" — expand to see the title at the leading edge and the toggle moved to the trailing edge; ↑/↓/Home/End move focus between items

Page content

expanded · center alignment · custom slotted menu button · section header (data-section-header, expanded-only)

General

Storage
Page content

external control — expand()/collapse()/conceal()/reveal() + materialRailToggle

expand() collapse() conceal() reveal()

last event: —

hide-on-collapse — collapsing removes the rail entirely; reopen affordance lives in the content (app-bar hamburger pattern)

Collapse via the rail header, reopen with the hamburger here.

modality="modal" — expanding overlays the viewport with a scrim (native <dialog>: Esc, scrim click, focus trap); content never reflows

Selecting an item closes the panel.

modality="auto" — standard rail ≥600px viewport; below that the rail hides and expands as a modal panel (resize the window)

On a compact viewport the rail is hidden — the hamburger here opens it as a modal panel.

RTL — logical properties keep the rail on the leading (right) edge, badges and paddings mirrored

محتوى الصفحة
Sample usage 
<!-- Built-in toggle renders when nothing is slotted into `menu`. When
     expanded, the title sits at the leading edge, the toggle at the trailing
     edge. modality="auto": standard rail ≥ breakpoint (600px), hidden + modal
     panel below it. -->
<material-navigation-rail label="Mail" modality="auto">
  <material-icon-button slot="fab" variant="tonal" icon="edit"
                         aria-label="Compose"></material-icon-button>

  <h3 data-section-header>Mailboxes</h3>  <!-- shown only while expanded -->
  <material-navigation-item icon="inbox"    label="Inbox" active></material-navigation-item>
  <material-navigation-item icon="send"     label="Outbox"></material-navigation-item>
  <material-navigation-item icon="favorite" label="Favorites"></material-navigation-item>

  <material-navigation-item slot="bottom" icon="settings"
                             label="Settings"></material-navigation-item>
</material-navigation-rail>

<!-- slotted menu buttons still toggle automatically; opt out with
     data-no-rail-toggle. External control + state sync: -->
<script>
  const rail = document.querySelector('material-navigation-rail');
  rail.toggle();  // also: expand() / collapse() / conceal() / reveal()
  rail.addEventListener('materialRailToggle',
    (e) => console.log(e.detail));  // { expanded, concealed }
</script>

<!-- expanded width is tunable within the 220–360dp spec range -->
<style>
  material-navigation-rail { --material-rail-expanded-width: 16rem; }
</style>