Sidebar Nav

Navigation component for sidebars with support for groups, nested items, icons, and badges.

Basic

Base

Class	Description
`.ui-sidebar-nav`	Base class

Collapsed

Class	Description
`.ui-sidebar-nav--collapsed`	collapsed

Override these CSS custom properties to customize the component.

Token	Default	Description
`--ui-sidebar-nav-width`	`calc(var(--ui-unit) * 30)`	Overall width
`--ui-sidebar-nav-bg`	`var(--ui-color-bg-subtle)`	Background color
`--ui-sidebar-nav-border-color`	`var(--ui-color-border)`	Border color
`--ui-sidebar-nav-padding`	`var(--ui-space-2)`	Padding on all sides
`--ui-sidebar-nav-header-padding`	`var(--ui-space-2)`	Header padding on all sides
`--ui-sidebar-nav-footer-padding`	`var(--ui-space-2)`	Footer padding on all sides
`--ui-sidebar-nav-group-label-size`	`var(--ui-size-xs)`	Group label size
`--ui-sidebar-nav-group-label-color`	`var(--ui-color-text-muted)`	Group label color
`--ui-sidebar-nav-group-label-weight`	`var(--ui-font-weight-semibold)`	Group label weight
`--ui-sidebar-nav-group-label-transform`	`none`	Group label text-transform
`--ui-sidebar-nav-group-label-letter-spacing`	`normal`	Group label letter-spacing
`--ui-sidebar-nav-item-height`	`var(--ui-row-2)`	Item overall height
`--ui-sidebar-nav-item-padding-inline`	`var(--ui-space-2)`	Item horizontal padding
`--ui-sidebar-nav-item-size`	`var(--ui-size-sm)`	Item overall size
`--ui-sidebar-nav-item-color`	`var(--ui-color-text)`	Item text color
`--ui-sidebar-nav-item-bg`	`transparent`	Item background color
`--ui-sidebar-nav-item-radius`	`var(--ui-radius-sm)`	Item corner radius
`--ui-sidebar-nav-item-hover-bg`	`var(--ui-color-bg-muted)`	Item hover bg
`--ui-sidebar-nav-item-active-bg`	`var(--ui-color-bg-muted)`	Item active bg
`--ui-sidebar-nav-item-active-color`	`var(--ui-color-primary)`	Item active color
`--ui-sidebar-nav-item-active-weight`	`normal`	Item active weight
`--ui-sidebar-nav-item-nested-indent`	`var(--ui-space-4)`	Item nested indent
`--ui-sidebar-nav-width-collapsed`	`var(--ui-row-3)`	Width collapsed

With Icons

<!-- Navigation items with icons for visual clarity. -->
<nav class="ui-sidebar-nav" aria-label="Navigation" class="demo-box" style="--demo-h: 304px">
  <div class="ui-sidebar-nav__content">
    <ul class="ui-sidebar-nav__group-items">
      <li>
        <a class="ui-sidebar-nav__item ui-sidebar-nav__item--active" href="#" aria-current="page">
          <span class="ui-sidebar-nav__icon">
            <svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
              <path d="M3 9l9-7 9 7v11a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2z"></path>
            </svg>
          </span>
          <span class="ui-sidebar-nav__label">Home</span>
        </a>
      </li>
      <li>
        <a class="ui-sidebar-nav__item" href="#">
          <span class="ui-sidebar-nav__icon">
            <svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
              <path d="M17 21v-2a4 4 0 0 0-4-4H5a4 4 0 0 0-4 4v2"></path>
              <circle cx="9" cy="7" r="4"></circle>
            </svg>
          </span>
          <span class="ui-sidebar-nav__label">Users</span>
        </a>
      </li>
      <li>
        <a class="ui-sidebar-nav__item" href="#">
          <span class="ui-sidebar-nav__icon">
            <svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
              <circle cx="12" cy="12" r="3"></circle>
              <path d="M19.4 15a1.65 1.65 0 0 0 .33 1.82l.06.06a2 2 0 0 1 0 2.83 2 2 0 0 1-2.83 0l-.06-.06a1.65 1.65 0 0 0-1.82-.33 1.65 1.65 0 0 0-1 1.51V21a2 2 0 0 1-2 2 2 2 0 0 1-2-2v-.09A1.65 1.65 0 0 0 9 19.4a1.65 1.65 0 0 0-1.82.33l-.06.06a2 2 0 0 1-2.83 0 2 2 0 0 1 0-2.83l.06-.06a1.65 1.65 0 0 0 .33-1.82 1.65 1.65 0 0 0-1.51-1H3a2 2 0 0 1-2-2 2 2 0 0 1 2-2h.09A1.65 1.65 0 0 0 4.6 9a1.65 1.65 0 0 0-.33-1.82l-.06-.06a2 2 0 0 1 0-2.83 2 2 0 0 1 2.83 0l.06.06a1.65 1.65 0 0 0 1.82.33H9a1.65 1.65 0 0 0 1-1.51V3a2 2 0 0 1 2-2 2 2 0 0 1 2 2v.09a1.65 1.65 0 0 0 1 1.51 1.65 1.65 0 0 0 1.82-.33l.06-.06a2 2 0 0 1 2.83 0 2 2 0 0 1 0 2.83l-.06.06a1.65 1.65 0 0 0-.33 1.82V9a1.65 1.65 0 0 0 1.51 1H21a2 2 0 0 1 2 2 2 2 0 0 1-2 2h-.09a1.65 1.65 0 0 0-1.51 1z"></path>
            </svg>
          </span>
          <span class="ui-sidebar-nav__label">Settings</span>
        </a>
      </li>
    </ul>
  </div>
</nav>

With Badges

<!-- Navigation items with badges for counts or status indicators. -->
<nav class="ui-sidebar-nav" aria-label="Navigation" class="demo-box" style="--demo-h: 200px">
  <div class="ui-sidebar-nav__content">
    <ul class="ui-sidebar-nav__group-items">
      <li>
        <a class="ui-sidebar-nav__item" href="#">
          <span class="ui-sidebar-nav__label">Inbox</span>
          <span class="ui-sidebar-nav__badge">
            <span class="ui-badge ui-badge--primary">12</span>
          </span>
        </a>
      </li>
      <li>
        <a class="ui-sidebar-nav__item" href="#">
          <span class="ui-sidebar-nav__label">Notifications</span>
          <span class="ui-sidebar-nav__badge">
            <span class="ui-badge ui-badge--danger">3</span>
          </span>
        </a>
      </li>
      <li>
        <a class="ui-sidebar-nav__item" href="#">
          <span class="ui-sidebar-nav__label">Updates</span>
          <span class="ui-sidebar-nav__badge">
            <span class="ui-status ui-status--success"></span>
          </span>
        </a>
      </li>
    </ul>
  </div>
</nav>

Nested Items

<!-- Navigation with nested/indented items for sub-sections. -->
<nav class="ui-sidebar-nav" aria-label="Navigation" class="demo-box" style="--demo-h: 280px">
  <div class="ui-sidebar-nav__content">
    <div class="ui-sidebar-nav__group">
      <span class="ui-sidebar-nav__group-label">Components</span>
      <ul class="ui-sidebar-nav__group-items">
        <li>
          <div class="ui-sidebar-nav__subgroup">
            <span class="ui-sidebar-nav__subgroup-label">Actions</span>
          </div>
        </li>
        <li>
          <a class="ui-sidebar-nav__item ui-sidebar-nav__item--nested" href="#">
            <span class="ui-sidebar-nav__label">Button</span>
          </a>
        </li>
        <li>
          <a class="ui-sidebar-nav__item ui-sidebar-nav__item--nested ui-sidebar-nav__item--active" href="#" aria-current="page">
            <span class="ui-sidebar-nav__label">Button Group</span>
          </a>
        </li>
        <li>
          <span class="ui-sidebar-nav__subgroup-label">Forms</span>
        </li>
        <li>
          <a class="ui-sidebar-nav__item ui-sidebar-nav__item--nested" href="#">
            <span class="ui-sidebar-nav__label">Input</span>
          </a>
        </li>
        <li>
          <a class="ui-sidebar-nav__item ui-sidebar-nav__item--nested" href="#">
            <span class="ui-sidebar-nav__label">Select</span>
          </a>
        </li>
      </ul>
    </div>
  </div>
</nav>

Collapsed

<!-- Icon-only mode for compact sidebars. -->
<nav class="ui-sidebar-nav ui-sidebar-nav--collapsed" aria-label="Navigation" class="demo-box" style="--demo-h: 200px">
  <div class="ui-sidebar-nav__content">
    <ul class="ui-sidebar-nav__group-items">
      <li>
        <a class="ui-sidebar-nav__item ui-sidebar-nav__item--active" href="#" aria-current="page" aria-label="Home">
          <span class="ui-sidebar-nav__icon">
            <svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
              <path d="M3 9l9-7 9 7v11a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2z"></path>
            </svg>
          </span>
          <span class="ui-sidebar-nav__label">Home</span>
        </a>
      </li>
      <li>
        <a class="ui-sidebar-nav__item" href="#" aria-label="Users">
          <span class="ui-sidebar-nav__icon">
            <svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
              <path d="M17 21v-2a4 4 0 0 0-4-4H5a4 4 0 0 0-4 4v2"></path>
              <circle cx="9" cy="7" r="4"></circle>
            </svg>
          </span>
          <span class="ui-sidebar-nav__label">Users</span>
        </a>
      </li>
      <li>
        <a class="ui-sidebar-nav__item" href="#" aria-label="Settings">
          <span class="ui-sidebar-nav__icon">
            <svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
              <circle cx="12" cy="12" r="3"></circle>
            </svg>
          </span>
          <span class="ui-sidebar-nav__label">Settings</span>
        </a>
      </li>
    </ul>
  </div>
</nav>

Disabled Items

<!-- Non-interactive navigation items. -->
<nav class="ui-sidebar-nav" aria-label="Navigation" class="demo-box" style="--demo-h: 184px">
  <div class="ui-sidebar-nav__content">
    <ul class="ui-sidebar-nav__group-items">
      <li>
        <a class="ui-sidebar-nav__item" href="#">
          <span class="ui-sidebar-nav__label">Active Link</span>
        </a>
      </li>
      <li>
        <span class="ui-sidebar-nav__item ui-sidebar-nav__item--disabled">
          <span class="ui-sidebar-nav__label">Disabled Link</span>
        </span>
      </li>
      <li>
        <a class="ui-sidebar-nav__item" href="#">
          <span class="ui-sidebar-nav__label">Another Link</span>
        </a>
      </li>
    </ul>
  </div>
</nav>