Unigrid

CSS Framework

Navbar

Responsive navigation bar with brand, links, toggle, dropdown support, and color variants.

Default Navbar

Default navbar

<nav class="ug-navbar">
  <div class="ug-navbar__inner">
    <a class="ug-navbar__brand" href="#">SiteName</a>
    <button class="ug-navbar__toggle" aria-label="Toggle menu">Menu</button>
    <ul class="ug-navbar__menu">
      <li class="ug-navbar__item"><a class="ug-navbar__link ug-navbar__link--active" href="#">Home</a></li>
      <li class="ug-navbar__item"><a class="ug-navbar__link" href="#">About</a></li>
      <li class="ug-navbar__item"><a class="ug-navbar__link" href="#">Services</a></li>
      <li class="ug-navbar__item"><a class="ug-navbar__link" href="#">Contact</a></li>
    </ul>
  </div>
</nav>

Dark Navbar

Dark variant

<nav class="ug-navbar ug-navbar--dark">
  <div class="ug-navbar__inner">
    <a class="ug-navbar__brand" href="#">SiteName</a>
    <ul class="ug-navbar__menu">
      <li class="ug-navbar__item"><a class="ug-navbar__link ug-navbar__link--active" href="#">Home</a></li>
      <li class="ug-navbar__item"><a class="ug-navbar__link" href="#">About</a></li>
      <li class="ug-navbar__item"><a class="ug-navbar__link" href="#">Services</a></li>
    </ul>
  </div>
</nav>

Embedded Navbar (inside Header)

When placed inside a .ug-header, the navbar adopts embedded styling with transparent background and adjusted spacing.

Embedded in header

<header class="ug-header" style="background:#2b2b2b;position:relative">
  <nav class="ug-navbar">
    <div class="ug-navbar__inner">
      <a class="ug-navbar__brand" href="#">ParkName</a>
      <ul class="ug-navbar__menu">
        <li class="ug-navbar__item"><a class="ug-navbar__link ug-navbar__link--active" href="#">Visit</a></li>
        <li class="ug-navbar__item"><a class="ug-navbar__link" href="#">Learn</a></li>
        <li class="ug-navbar__item"><a class="ug-navbar__link" href="#">Plan</a></li>
      </ul>
    </div>
  </nav>
</header>

With Divider

Navbar with divider

<nav class="ug-navbar">
  <div class="ug-navbar__inner">
    <a class="ug-navbar__brand" href="#">SiteName</a>
    <ul class="ug-navbar__menu">
      <li class="ug-navbar__item"><a class="ug-navbar__link" href="#">Home</a></li>
      <li class="ug-navbar__item"><a class="ug-navbar__link" href="#">About</a></li>
      <li class="ug-navbar__divider"></li>
      <li class="ug-navbar__item"><a class="ug-navbar__link" href="#">Login</a></li>
    </ul>
  </div>
</nav>

Transparent Navbar

Transparent variant

<div style="background:#3a7d44;padding:1rem">
  <nav class="ug-navbar ug-navbar--transparent">
    <div class="ug-navbar__inner">
      <a class="ug-navbar__brand" href="#">ParkName</a>
      <ul class="ug-navbar__menu">
        <li class="ug-navbar__item"><a class="ug-navbar__link ug-navbar__link--active" href="#">Home</a></li>
        <li class="ug-navbar__item"><a class="ug-navbar__link" href="#">Explore</a></li>
        <li class="ug-navbar__item"><a class="ug-navbar__link" href="#">Map</a></li>
      </ul>
    </div>
  </nav>
</div>

Class Reference

Class Description
.ug-navbar Navbar container
.ug-navbar__inner Inner wrapper for alignment
.ug-navbar__brand Brand/logo link
.ug-navbar__toggle Mobile menu toggle button
.ug-navbar__toggle--active Toggle active state (menu open)
.ug-navbar__toggle--hamburger Animated hamburger icon toggle
.ug-navbar__menu Navigation link list
.ug-navbar__menu--open Open state for mobile menu
.ug-navbar__item Navigation list item
.ug-navbar__link Navigation link
.ug-navbar__link--active Active link state
.ug-navbar__divider Vertical divider between links
.ug-navbar--dark Dark background variant
.ug-navbar--fixed Fixed to top of viewport
.ug-navbar--transparent Transparent background variant