NS Design System
v3.0.0 · 257 tokens

132Admin nav

The console's side navigation: mono indices, section separators, counts at the row end. The current page carries the 2px leading edge — aria-current, never an .active class.

Use it for

  • Inside the admin shell's side slot
  • Counts for things waiting on the admin (drafts, open tickets)

Not for

  • Learner-facing docs — DocsSidebar is that component

Grouped

markup
<nav class="ns-admin-nav" aria-label="Admin" style="inline-size:14rem">
  <p class="ns-admin-nav__sep">Content</p>
  <a href="#" aria-current="page"><span class="ns-admin-nav__num">01</span><svg class="ns-icon" aria-hidden="true"><use href="../icons/namaste-icons.svg#ns-i-dashboard"/></svg>Dashboard</a>
  <a href="#"><span class="ns-admin-nav__num">02</span><svg class="ns-icon" aria-hidden="true"><use href="../icons/namaste-icons.svg#ns-i-course"/></svg>Courses<span class="ns-admin-nav__count">12</span></a>
  <a href="#"><span class="ns-admin-nav__num">03</span><svg class="ns-icon" aria-hidden="true"><use href="../icons/namaste-icons.svg#ns-i-draft"/></svg>Drafts<span class="ns-admin-nav__count">3</span></a>
  <p class="ns-admin-nav__sep">People</p>
  <a href="#"><span class="ns-admin-nav__num">04</span><svg class="ns-icon" aria-hidden="true"><use href="../icons/namaste-icons.svg#ns-i-students"/></svg>Students</a>
</nav>