Navigation

All KMG applications use the Argon Dashboard sidebar pattern. Below is a self-contained example of a sidebar with three navigation items:

My Application 
<aside class="sidenav bg-white navbar navbar-vertical navbar-expand-xs border-0 border-radius-xl my-3 fixed-start ms-4" id="sidenav-main">
  <div class="sidenav-header">
    <a class="navbar-brand m-0 text-center" href="/">
      <span class="ms-1 font-weight-bold">My Application</span>
    </a>
  </div>
  <hr class="horizontal dark mt-0">
  <div class="collapse navbar-collapse w-auto">
    <ul class="navbar-nav">
      <li class="nav-item">
        <a class="nav-link active" href="/">
          <div class="icon icon-shape icon-sm border-radius-md text-center me-2 d-flex align-items-center justify-content-center">
            <i class="ni ni-planet text-primary text-sm opacity-10"></i>
          </div>
          <span class="nav-link-text ms-1">Dashboard</span>
        </a>
      </li>
      <li class="nav-item">
        <a class="nav-link" href="/users">
          <div class="icon icon-shape icon-sm border-radius-md text-center me-2 d-flex align-items-center justify-content-center">
            <i class="ni ni-single-02 text-primary text-sm opacity-10"></i>
          </div>
          <span class="nav-link-text ms-1">Users</span>
        </a>
      </li>
      <li class="nav-item">
        <a class="nav-link" href="/settings">
          <div class="icon icon-shape icon-sm border-radius-md text-center me-2 d-flex align-items-center justify-content-center">
            <i class="ni ni-settings-gear-65 text-primary text-sm opacity-10"></i>
          </div>
          <span class="nav-link-text ms-1">Settings</span>
        </a>
      </li>
    </ul>
  </div>
</aside>

Breadcrumbs appear in the top navbar and reflect the page hierarchy.

Navigation
<nav aria-label="breadcrumb">
  <ol class="breadcrumb bg-transparent mb-0 pb-0 pt-1 px-0">
    <li class="breadcrumb-item text-sm">
      <a class="opacity-5 text-white" href="/">KMG</a>
    </li>
    <li class="breadcrumb-item text-sm">
      <a class="opacity-5 text-white" href="/components">Components</a>
    </li>
    <li class="breadcrumb-item text-sm text-white active" aria-current="page">
      Navigation
    </li>
  </ol>
</nav>
<h6 class="font-weight-bolder text-white mb-0">Navigation</h6>

Active State

Mark the current page's nav item with the active class. The active item gets a distinct background:

<!-- Active nav item -->
<a class="nav-link active" href="/current-page">...</a>

<!-- Inactive nav item -->
<a class="nav-link" href="/other-page">...</a>

Every nav item uses an icon wrapped in an icon-shape container for consistent sizing:

Menu Item 
<div class="icon icon-shape icon-sm border-radius-md text-center me-2 d-flex align-items-center justify-content-center">
  <i class="ni ni-app text-primary text-sm opacity-10"></i>
</div>
<span class="nav-link-text ms-1">Menu Item</span>

Usage Guidelines

  • The sidebar should be consistent across all pages in an application
  • Use Nucleo Icons for nav items (ni ni-* classes)
  • Group related items together
  • The sidebar header should show the application name
  • Use active class on the current page's nav link
  • Breadcrumbs should reflect the page hierarchy
  • Add aria-label="breadcrumb" to breadcrumb <nav> for accessibility
On this page