Navigation

Navbar

Use .quanta-navbar with .quanta-brand and .quanta-nav-link to build a simple site header.

<nav class="quanta-navbar">
  <a href="#" class="quanta-brand">Brand</a>
  <div class="quanta-nav">
    <a href="#" class="quanta-nav-link">Home</a>
    <a href="#" class="quanta-nav-link">About</a>
    <a href="#" class="quanta-nav-link">Contact</a>
  </div>
</nav>

Centered

Add .quanta-navbar-center to center the links.

<nav class="quanta-navbar">
            <div class="quanta-nav">…</div>
  <a href="#" class="quanta-brand quanta-navbar-center">Brand</a>
  <div class="quanta-nav">…</div>
</nav>

Split

Use .quanta-navbar-split with .quanta-left and .quanta-right to separate groups.

<nav class="quanta-navbar quanta-navbar-split">
  <div class="quanta-left">…</div>
  <div class="quanta-right">…</div>
</nav>

Justified

Use .quanta-navbar-justify to spread items evenly.

<nav class="quanta-navbar quanta-navbar-justify">…</nav>

With Icons

Apply .quanta-navbar-icon so links can include SVG or icon fonts.

<nav class="quanta-navbar quanta-navbar-icon">
  <div class="quanta-nav">
    <a href="#" class="quanta-nav-link"><svg>…</svg> Dashboard</a>
    <a href="#" class="quanta-nav-link"><svg>…</svg> Profile</a>
  </div>
</nav>

Responsive

On small screens, hide .quanta-nav and use a .quanta-toggle to show it.

<nav class="quanta-navbar">
  <a href="#" class="quanta-brand">Brand</a>
  <button class="quanta-toggle">☰</button>
  <div class="quanta-nav">…</div>
</nav>