Nav

Horizontal or vertical navigation links for primary and secondary navigation.

Basic

Base

Class	Description
`.ui-nav`	Base class

Pills

Class	Value
`.ui-nav--pills`	pills

Vertical

Class	Description
`.ui-nav--vertical`	vertical

Responsive

Class	Description
`.ui-nav--responsive`	responsive

Override these CSS custom properties to customize the component.

Token	Default	Description
`--ui-nav-gap`	`var(--ui-space-1)`	Gap between children
`--ui-nav-item-height`	`var(--ui-row-2)`	Item overall height
`--ui-nav-item-padding-x`	`var(--ui-space-2)`	Item horizontal padding
`--ui-nav-item-font-size`	`var(--ui-font-size-sm)`	Item font size
`--ui-nav-item-font-weight`	`var(--ui-font-weight-medium)`	Item font weight
`--ui-nav-item-color`	`var(--ui-color-text-muted)`	Item text color
`--ui-nav-item-color-hover`	`var(--ui-color-text)`	Item color hover
`--ui-nav-item-color-active`	`var(--ui-color-primary)`	Item color active
`--ui-nav-item-radius`	`var(--ui-radius-sm)`	Item corner radius
`--ui-nav-border-color`	`var(--ui-color-border)`	Border color
`--ui-nav-item-bg-hover`	`var(--ui-color-bg-muted)`	Item bg hover
`--ui-nav-item-bg-active`	`var(--ui-color-primary)`	Item bg active

Pills

<!-- Background-filled variant for standalone navigation. -->
<nav class="ui-nav ui-nav--pills">
  <ul class="ui-nav__list">
    <li>
      <a class="ui-nav__item ui-nav__item--active" href="#">Overview</a>
    </li>
    <li>
      <a class="ui-nav__item" href="#">Analytics</a>
    </li>
    <li>
      <a class="ui-nav__item" href="#">Reports</a>
    </li>
  </ul>
</nav>

Vertical

<!-- Vertical navigation with start-side indicator. -->
<nav class="ui-nav ui-nav--vertical" style="inline-size: 200px">
  <ul class="ui-nav__list">
    <li>
      <a class="ui-nav__item ui-nav__item--active" href="#">Profile</a>
    </li>
    <li>
      <a class="ui-nav__item" href="#">Account</a>
    </li>
    <li>
      <a class="ui-nav__item" href="#">Security</a>
    </li>
  </ul>
</nav>

Responsive

<!-- Auto-collapses to vertical when container is narrow. -->
<div class="ui-bg-muted ui-p-2" style="inline-size: 250px">
  <nav class="ui-nav ui-nav--responsive">
    <ul class="ui-nav__list">
      <li>
        <a class="ui-nav__item ui-nav__item--active" href="#">Home</a>
      </li>
      <li>
        <a class="ui-nav__item" href="#">About</a>
      </li>
      <li>
        <a class="ui-nav__item" href="#">Contact</a>
      </li>
    </ul>
  </nav>
</div>

Vertical Pills

<!-- Vertical navigation with pill-style active indicator. -->
<nav class="ui-nav ui-nav--vertical ui-nav--pills" style="inline-size: 200px">
  <ul class="ui-nav__list">
    <li>
      <a class="ui-nav__item ui-nav__item--active" href="#">General</a>
    </li>
    <li>
      <a class="ui-nav__item" href="#">Notifications</a>
    </li>
    <li>
      <a class="ui-nav__item" href="#">Billing</a>
    </li>
  </ul>
</nav>