Nav rail

a vertical rail of destinations: icon-only nav icons, or nav items with a label when expanded.

Example

<nav class="lucent-nav-rail">
  <button type="button" class="lucent-nav-icon is-active" aria-label="Dashboard" title="Dashboard" aria-current="page">
    <span class="lucent-icon lucent-icon--lg" aria-hidden="true">
      <span class="material-icons lucent-icon__glyph">dashboard</span>
    </span>
  </button>
  <button type="button" class="lucent-nav-icon" aria-label="Files" title="Files">
    <span class="lucent-icon lucent-icon--lg" aria-hidden="true">
      <span class="material-icons lucent-icon__glyph">folder</span>
    </span>
  </button>
  <button type="button" class="lucent-nav-icon" aria-label="Team" title="Team">
    <span class="lucent-icon lucent-icon--lg" aria-hidden="true">
      <span class="material-icons lucent-icon__glyph">group</span>
    </span>
  </button>
  <div class="lucent-divider lucent-divider--plain" role="separator">
  </div>
  <button type="button" class="lucent-nav-icon" aria-label="Settings" title="Settings">
    <span class="lucent-icon lucent-icon--lg" aria-hidden="true">
      <span class="material-icons lucent-icon__glyph">settings</span>
    </span>
  </button>
</nav>

Using it

Angular lucent-nav-rail, lucent-nav-icon, lucent-nav-item, lucent-nav-group
import { LucentNavRail, LucentNavIcon, LucentNavItem, LucentNavGroup } from '@design-foundry/lucent-angular';
Stylesheet .lucent-nav-rail, .lucent-nav-icon, .lucent-nav-item, .lucent-nav-group
@design-foundry/lucent-styles/core.css

API

NameKindTypeDefaultDescription
nav-rail expanded input boolean false shows nav item labels.
nav-icon name input string widgets glyph for the destination.
nav-icon active input boolean false current destination.
nav-icon disabled input boolean false
nav-icon ariaLabel input string '' accessible name and tooltip.
nav-item name input string widgets Material Icons ligature (e.g. `dashboard`, `folder`).
nav-item label input string '' destination label, shown when the rail is expanded.
nav-item subtitle input string '' Optional second line. Hidden with the label when the rail is compact.
nav-item href input string '' link target.
nav-item active input boolean false
nav-item disabled input boolean false
nav-group heading input string '' group title.
nav-group showHeading input boolean true Render the heading. Off gives an untitled group that still reads as one for AT.

Theming

Color (7)
Size & spacing (3)
Border & radius (2)
Shadow (1)
Type (6)