Navbar Components

The Navbars collection offers flexible layouts such as fixed, sticky, centered, responsive hamburger menus, and icon-based designs. Each navbar is optimized for mobile devices and can be styled to match your theme. Copy any navbar’s code snippet to use it in your project instantly. If you are new to blox, follow our getting started guide to add blox to your project.

<nav class="nav">
  <a class="nav-brand" href="#">Blox</a>
</nav>  

<nav class="nav">
  <a class="nav-brand" href="#">Blox</a>
  <img
    class="nav-icon"
    src="./assets/ic_camera.png"
    alt="light-mode-toggle"
  />
</nav>  

<nav class="nav">
  <a class="nav-brand" href="#">Blox</a>
  <button class="nav-toggler" aria-label="Toggle Menu">☰</button>
  <ul class="nav-links">
    <li><a href="#">Home</a></li>
    <li><a href="#">About</a></li>
    <li><a href="#">Services</a></li>
  </ul>
</nav>

<nav class="nav">
  <a class="nav-brand" href="#">Blox</a>
  <button class="nav-toggler" aria-label="Toggle Menu">☰</button>
  <ul class="nav-links">
    <li>
      <input
        type="search"
        class="nav-search"
        placeholder="Search..."
      />
    </li>
  </ul>
</nav>

<nav class="nav">
  <a class="nav-brand" href="#">Blox</a>
  <button class="nav-toggler" aria-label="Toggle Menu">☰</button>
  <ul class="nav-links">
    <li><button class="btn">Sign Up</button></li>
  </ul>
</nav>

<nav class="nav sticky">
  <a class="nav-brand" href="#">Blox</a>
  <button class="nav-toggler" aria-label="Toggle Menu">☰</button>
  <ul class="nav-links">
    <li><a href="#">Home</a></li>
    <li><a href="#">Blog</a></li>
  </ul>
</nav>

<nav class="nav fixed">
  <a class="nav-brand" href="#">Blox</a>
  <button class="nav-toggler" aria-label="Toggle Menu">☰</button>
  <ul class="nav-links">
    <li><a href="#">Docs</a></li>
    <li><a href="#">Contact</a></li>
  </ul>
</nav>

<nav class="nav">
  <img class="nav-icon" src="./assets/ic_camera.png" alt="logo" />
  <button class="nav-toggler" aria-label="Toggle Menu">☰</button>
  <ul class="nav-links">
    <li><a href="#">Shop</a></li>
    <li><a href="#">Cart</a></li>
  </ul>
</nav>

<nav class="nav nav-center">
  <button class="nav-toggler" aria-label="Toggle Menu">☰</button>
  <ul class="nav-links">
    <li><a href="#">Features</a></li>
    <li><a href="#">Pricing</a></li>
    <li><a href="#">Reviews</a></li>
  </ul>
</nav>

<nav class="nav nav-centerd-search">
  <a class="nav-brand" href="#">Blox</a>

  <button class="nav-toggler" aria-label="Toggle Menu">☰</button>
  <ul class="nav-links">
    <li><a href="#">Features</a></li>
    <li><a href="#">Pricing</a></li>
    <li><a href="#">Reviews</a></li>
  </ul>

  <input type="search" class="nav-search" placeholder="Search..." />
</nav>