Navigation Rail

Navigation rail provides access to primary destinations in an app using icons—with or without labels—on a vertical rail.

Use navigation rail on medium-sized screens (tablets) with 3–7 destinations.

Overview API

Usage

Use wc-navigation-rail for a compact vertical set of primary destinations. Items stay top-aligned, clicking an item updates the active state, and the rail emits nav-change with the selected item and value.

Home Search Saved Settings 

  <wc-navigation-rail aria-label="Primary" style="height: 400px; border: 1px solid var(--color-outline-variant); border-radius: 1rem; overflow: hidden;">
    <wc-navigation-rail-item value="home" active="true">
      <wc-icon slot="icon" name="home"></wc-icon>
      Home
    </wc-navigation-rail-item>
    <wc-navigation-rail-item value="search">
      <wc-icon slot="icon" name="search"></wc-icon>
      Search
    </wc-navigation-rail-item>
    <wc-navigation-rail-item value="saved">
      <wc-icon slot="icon" name="bookmark"></wc-icon>
      Saved
    </wc-navigation-rail-item>
    <wc-navigation-rail-item value="settings">
      <wc-icon slot="icon" name="settings"></wc-icon>
      Settings
    </wc-navigation-rail-item>
  </wc-navigation-rail>

Variants

Default Layout

Navigation rail items are always stacked from the top of the rail.

Home Search Settings 

  <wc-navigation-rail style="height: 400px; border: 1px solid var(--color-outline-variant); border-radius: 1rem; overflow: hidden;">
    <wc-navigation-rail-item active="true">
      <wc-icon slot="icon" name="home"></wc-icon>
      Home
    </wc-navigation-rail-item>
    <wc-navigation-rail-item>
      <wc-icon slot="icon" name="search"></wc-icon>
      Search
    </wc-navigation-rail-item>
    <wc-navigation-rail-item>
      <wc-icon slot="icon" name="settings"></wc-icon>
      Settings
    </wc-navigation-rail-item>
  </wc-navigation-rail>

With Divider

Enable show-divider to separate header content from the item list.

Home Inbox Settings 

  <wc-navigation-rail show-divider="true" style="height: 400px; border: 1px solid var(--color-outline-variant); border-radius: 1rem; overflow: hidden;">
    <wc-icon-button slot="header" variant="text" aria-label="Create">
      <wc-icon name="add"></wc-icon>
    </wc-icon-button>
    <wc-navigation-rail-item active="true">
      <wc-icon slot="icon" name="home"></wc-icon>
      Home
    </wc-navigation-rail-item>
    <wc-navigation-rail-item>
      <wc-icon slot="icon" name="mail"></wc-icon>
      Inbox
    </wc-navigation-rail-item>
    <wc-navigation-rail-item>
      <wc-icon slot="icon" name="settings"></wc-icon>
      Settings
    </wc-navigation-rail-item>
  </wc-navigation-rail>

With FAB Header

A FAB or other header content can be placed in the header slot above the items.

Inbox Outbox Drafts Trash 

  <wc-navigation-rail style="height: 400px; border: 1px solid var(--color-outline-variant); border-radius: 1rem; overflow: hidden;">
    <wc-fab slot="header" style="margin-bottom: 0.5rem;"><wc-icon name="edit"></wc-icon></wc-fab>
    <wc-navigation-rail-item active="true">
      <wc-icon slot="icon" name="inbox"></wc-icon>
      Inbox
    </wc-navigation-rail-item>
    <wc-navigation-rail-item>
      <wc-icon slot="icon" name="send"></wc-icon>
      Outbox
    </wc-navigation-rail-item>
    <wc-navigation-rail-item>
      <wc-icon slot="icon" name="drafts"></wc-icon>
      Drafts
    </wc-navigation-rail-item>
    <wc-navigation-rail-item disabled="true">
      <wc-icon slot="icon" name="delete"></wc-icon>
      Trash
    </wc-navigation-rail-item>
  </wc-navigation-rail>

With Footer Action

Use the footer slot for actions or secondary destinations that should stay pinned to the bottom of the rail.

Home Search Saved 

  <wc-navigation-rail style="height: 400px; border: 1px solid var(--color-outline-variant); border-radius: 1rem; overflow: hidden;">
    <wc-navigation-rail-item active="true">
      <wc-icon slot="icon" name="home"></wc-icon>
      Home
    </wc-navigation-rail-item>
    <wc-navigation-rail-item>
      <wc-icon slot="icon" name="search"></wc-icon>
      Search
    </wc-navigation-rail-item>
    <wc-navigation-rail-item>
      <wc-icon slot="icon" name="bookmark"></wc-icon>
      Saved
    </wc-navigation-rail-item>
    <wc-icon-button slot="footer" variant="text" aria-label="Settings">
      <wc-icon name="settings"></wc-icon>
    </wc-icon-button>
  </wc-navigation-rail>

Active Icon Swap

Provide an active-icon slot when the selected state should show a different icon inside the indicator.

Saved Alerts Profile 

  <wc-navigation-rail style="height: 320px; border: 1px solid var(--color-outline-variant); border-radius: 1rem; overflow: hidden;">
    <wc-navigation-rail-item active="true">
      <wc-icon slot="icon" name="bookmark_border"></wc-icon>
      <wc-icon slot="active-icon" name="bookmark"></wc-icon>
      Saved
    </wc-navigation-rail-item>
    <wc-navigation-rail-item>
      <wc-icon slot="icon" name="notifications_none"></wc-icon>
      <wc-icon slot="active-icon" name="notifications"></wc-icon>
      Alerts
    </wc-navigation-rail-item>
    <wc-navigation-rail-item>
      <wc-icon slot="icon" name="person_outline"></wc-icon>
      <wc-icon slot="active-icon" name="person"></wc-icon>
      Profile
    </wc-navigation-rail-item>
  </wc-navigation-rail>

Modes

Use expanded mode to show labels and collapsed mode to keep only icons.

Expanded Home Search Saved
Collapsed Home Search Saved 

  <div style="display: flex; gap: 1rem; height: 320px;">
    <div style="display: flex; flex-direction: column; align-items: center; gap: 0.5rem;">
      <span class="text-label" style="font-size: 0.75rem; color: var(--color-on-surface-variant);">Expanded</span>
      <wc-navigation-rail mode="expanded" style="height: 100%; border: 1px solid var(--color-outline-variant); border-radius: 1rem; overflow: hidden;">
        <wc-navigation-rail-item active="true">
          <wc-icon slot="icon" name="home"></wc-icon>
          Home
        </wc-navigation-rail-item>
        <wc-navigation-rail-item>
          <wc-icon slot="icon" name="search"></wc-icon>
          Search
        </wc-navigation-rail-item>
        <wc-navigation-rail-item>
          <wc-icon slot="icon" name="bookmark"></wc-icon>
          Saved
        </wc-navigation-rail-item>
      </wc-navigation-rail>
    </div>

    <div style="display: flex; flex-direction: column; align-items: center; gap: 0.5rem;">
      <span class="text-label" style="font-size: 0.75rem; color: var(--color-on-surface-variant);">Collapsed</span>
      <wc-navigation-rail mode="collapsed" style="height: 100%; border: 1px solid var(--color-outline-variant); border-radius: 1rem; overflow: hidden;">
        <wc-navigation-rail-item active="true">
          <wc-icon slot="icon" name="home"></wc-icon>
          Home
        </wc-navigation-rail-item>
        <wc-navigation-rail-item>
          <wc-icon slot="icon" name="search"></wc-icon>
          Search
        </wc-navigation-rail-item>
        <wc-navigation-rail-item>
          <wc-icon slot="icon" name="bookmark"></wc-icon>
          Saved
        </wc-navigation-rail-item>
      </wc-navigation-rail>
    </div>
  </div>

Collapsed Rail

Collapsed mode keeps labels in markup for accessibility while hiding them visually.

Home Search Saved Settings 

  <wc-navigation-rail mode="collapsed" style="height: 300px; border: 1px solid var(--color-outline-variant); border-radius: 1rem; overflow: hidden;">
    <wc-navigation-rail-item active="true">
      <wc-icon slot="icon" name="home"></wc-icon>
      Home
    </wc-navigation-rail-item>
    <wc-navigation-rail-item>
      <wc-icon slot="icon" name="search"></wc-icon>
      Search
    </wc-navigation-rail-item>
    <wc-navigation-rail-item>
      <wc-icon slot="icon" name="bookmark"></wc-icon>
      Saved
    </wc-navigation-rail-item>
    <wc-navigation-rail-item>
      <wc-icon slot="icon" name="settings"></wc-icon>
      Settings
    </wc-navigation-rail-item>
  </wc-navigation-rail>

On this page

  • Usage
  • Variants
Sponsor

Properties

Events

Methods

CSS Custom Properties