# Navigation Components

## Header Navigation
```html
<nav class="header tester">
  <div class="navlinks logo-wrapper">
    <a class="navlink header-logo" href="#"></a>
  </div>
  <div class="navlinks left">
    <a class="navlink active" href="#">
      <span class="icon icon-user-profile"></span>
      <span>Your profile</span>
    </a>
    <a class="navlink" href="#">
      <span class="icon icon-activity"></span>
      <span>Activity</span>
    </a>
  </div>
  <div class="navlinks right">
    <a class="navlink" href="#">
      <span class="icon icon-bell"></span>
      <span>99</span>
    </a>
  </div>
</nav>
```

### Portal Variants
```html
<nav class="header tester">...</nav>    <!-- Tester portal (purple accents, dark bg) -->
<nav class="header customer">...</nav>  <!-- Customer portal (teal/dark theme) -->
<nav class="header manager">...</nav>   <!-- Manager portal (light theme) -->
```

## Sidebar Navigation
```html
<aside class="sidebar tester">
  <div class="navlinks">
    <a class="navlink active" href="#">
      <span class="icon icon-home"></span>
      Dashboard
    </a>
    <a class="navlink" href="#">
      <span class="icon icon-bug"></span>
      Bugs
    </a>
    <details>
      <summary class="navlink">
        <span class="icon icon-product"></span>
        Collapsable
      </summary>
      <a class="navlink" href="#">Child link</a>
    </details>
  </div>
</aside>
```

## Tab Navigation
```html
<!-- Default tabs -->
<nav class="nav-tabs">
  <a class="navlink active" href="#">Active Tab</a>
  <a class="navlink" href="#">Tab 2</a>
  <a class="navlink" href="#">
    Tab with counter
    <span class="counter">99</span>
  </a>
  <a class="navlink disabled" href="#">Disabled</a>
</nav>

<nav class="nav-tabs pills">...</nav>    <!-- Pills style -->
<nav class="nav-tabs sm">...</nav>       <!-- Small tabs -->

<!-- With actions -->
<nav class="nav-tabs with-actions">
  <a class="navlink active">Tab 1</a>
  <div class="tab-actions">
    <button class="btn btn-sm btn-primary">Action</button>
  </div>
</nav>
```
