Menu

A sidebar navigation list with grouped items, icons, badges, and keyboard shortcuts. Supports aria-current for active states and aria-expanded for collapsible submenus.

Sidebar menu

index.htmlhtml
<nav class="ln-menu">
  <div class="ln-menu__group">
    <div class="ln-menu__heading">Main</div>
    <ul>
      <li class="ln-menu__item">
        <a class="ln-menu__link" href="#" aria-current="page">
          <span class="ln-menu__label">Dashboard</span>
          <span class="ln-menu__badge">3</span>
        </a>
      </li>
      <li class="ln-menu__item">
        <a class="ln-menu__link" href="#">
          <span class="ln-menu__label">Orders</span>
        </a>
      </li>
      <li class="ln-menu__item">
        <a class="ln-menu__link" href="#">
          <span class="ln-menu__label">Products</span>
        </a>
      </li>
    </ul>
  </div>
  <div class="ln-menu__group">
    <div class="ln-menu__heading">Settings</div>
    <ul>
      <li class="ln-menu__item">
        <a class="ln-menu__link" href="#">
          <span class="ln-menu__label">Account</span>
          <span class="ln-menu__shortcut">⌘K</span>
        </a>
      </li>
    </ul>
  </div>
</nav>

Table of contents menu

index.htmlhtml
<nav class="ln-menu ln-menu--toc">
  <ul>
    <li class="ln-menu__item">
      <a class="ln-menu__link" href="#" aria-current="page">
        <span class="ln-menu__label">Introduction</span>
      </a>
    </li>
    <li class="ln-menu__item">
      <a class="ln-menu__link" href="#">
        <span class="ln-menu__label">Installation</span>
      </a>
    </li>
    <li class="ln-menu__item">
      <a class="ln-menu__link" href="#">
        <span class="ln-menu__label">Configuration</span>
      </a>
    </li>
    <li class="ln-menu__item">
      <a class="ln-menu__link" href="#">
        <span class="ln-menu__label">API Reference</span>
      </a>
    </li>
  </ul>
</nav>

Pill menu

index.htmlhtml
<nav class="ln-menu ln-menu--pills">
  <ul>
    <li class="ln-menu__item">
      <a class="ln-menu__link" href="#" aria-current="page">
        <span class="ln-menu__label">Overview</span>
      </a>
    </li>
    <li class="ln-menu__item">
      <a class="ln-menu__link" href="#">
        <span class="ln-menu__label">Analytics</span>
      </a>
    </li>
    <li class="ln-menu__item">
      <a class="ln-menu__link" href="#">
        <span class="ln-menu__label">Reports</span>
      </a>
    </li>
  </ul>
</nav>

Reference

ClassDescriptionResponsive
.ln-menuMenu containerNo
.ln-menu__groupSection group with top border separatorNo
.ln-menu__headingSection heading labelNo
.ln-menu__itemList item wrapperNo
.ln-menu__linkClickable menu linkNo
.ln-menu__iconLeading iconNo
.ln-menu__labelItem text labelNo
.ln-menu__badgeTrailing badge or countNo
.ln-menu__shortcutKeyboard shortcut hintNo
.ln-menu__submenuNested submenu listNo
.ln-menu__dividerSeparator lineNo
.ln-menu--compactSmaller item height and font sizeNo
.ln-menu--railIcon-only collapsed sidebarNo
.ln-menu--tocTable-of-contents style with left indicatorNo
.ln-menu--pillsPill-shaped active indicatorNo
.ln-menu--{role}Role modifier (primary, secondary, success, warning, danger, info)No