Navbar - Wilout UI

Basic Navbar

<nav class="ui-navbar">
  <a href="#" class="ui-navbar__brand">Brand</a>
  <div class="ui-navbar__nav">
    <a href="#" class="ui-navbar__link ui-navbar__link--active">Home</a>
    <a href="#" class="ui-navbar__link">Features</a>
    <a href="#" class="ui-navbar__link">Pricing</a>
    <a href="#" class="ui-navbar__link">About</a>
  </div>
</nav>

Dark Navbar

Use ui-navbar--dark for a dark-themed navbar.

<nav class="ui-navbar ui-navbar--dark">
  <a href="#" class="ui-navbar__brand">Brand</a>
  <div class="ui-navbar__nav">
    <a href="#" class="ui-navbar__link ui-navbar__link--active">Home</a>
    <a href="#" class="ui-navbar__link">Features</a>
    <a href="#" class="ui-navbar__link">About</a>
  </div>
</nav>

With Actions

Add buttons or other elements to the right side using ui-navbar__actions.

<nav class="ui-navbar">
  <a href="#" class="ui-navbar__brand">Brand</a>
  <div class="ui-navbar__nav">
    <a href="#" class="ui-navbar__link">Features</a>
    <a href="#" class="ui-navbar__link">Pricing</a>
  </div>
  <div class="ui-navbar__actions">
    <button class="ui-btn ui-btn--ghost">Login</button>
    <button class="ui-btn ui-btn--primary">Sign Up</button>
  </div>
</nav>

CSS Classes Reference

Class	Description
`.ui-navbar`	Base navbar container
`.ui-navbar--dark`	Dark theme variant
`.ui-navbar__brand`	Brand/logo element
`.ui-navbar__nav`	Navigation links container
`.ui-navbar__link`	Navigation link
`.ui-navbar__link--active`	Active link state
`.ui-navbar__actions`	Right-side actions container