Nav Items

Sidebar navigation links with icons, labels, badges, and active states.

Navigation Items

Nav Item States

Dashboard Morning Brief Agent Feed 3 Ghost Rep

HTML

<a class="monarch-nav-item monarch-nav-item--active" href="#">
  <svg class="monarch-nav-item__icon">...</svg>
  <span class="monarch-nav-item__label">Dashboard</span>
</a>
<a class="monarch-nav-item" href="#">
  <svg class="monarch-nav-item__icon">...</svg>
  <span class="monarch-nav-item__label">Morning Brief</span>
</a>
<a class="monarch-nav-item" href="#">
  <svg class="monarch-nav-item__icon">...</svg>
  <span class="monarch-nav-item__label">Agent Feed</span>
  <span class="monarch-nav-item__badge">3</span>
</a>
<a class="monarch-nav-item" href="#">
  <svg class="monarch-nav-item__icon">...</svg>
  <span class="monarch-nav-item__label">Ghost Rep</span>
  <span class="monarch-nav-item__dot"></span>
</a>

Section Headers

Grouped Navigation

Intelligence

Dashboard Signal Graph

Revenue

Deal Board Analytics

HTML

<div class="monarch-nav-section">
  <div class="monarch-nav-section__title">Intelligence</div>
  <div class="monarch-nav-section__items">
    <a class="monarch-nav-item monarch-nav-item--active" href="#">...</a>
    <a class="monarch-nav-item" href="#">...</a>
  </div>
</div>

Usage Guidelines

• Active state: indigo left border + tinted background + indigo text

• Section headers: 10px, uppercase, widest tracking

• Icons are 4×4 (16px) — consistent with the prototype

• Notification badges: red background, white text, 9px

• Live status dots use the pulse animation