Skip to main content

Navbar

The Navbar template: User-friendly navigation bar for easy access to different sections and pages.

Simple navbar​

View code
<nav class="navbar">
  <div class="logo">
    <a href="#!">Not Idea UI</a>
  </div>
  <ul class="menu">
    <li><a href="#!" class="nav-link is-active">Home</a></li>
    <li><a href="#!" class="nav-link">About</a></li>
    <li><a href="#!" class="nav-link">Blog</a></li>
    <li><a href="#!" class="nav-link">Contact</a></li>
    <li>
      <button class="button button-primary semi-transparent">Get started</button>
    </li>
  </ul>
  <span class="burger-menu">
    <span></span>
    <span></span>
    <span></span>
  </span>
</nav>

Simple navbar with topbar​

Best templates for your web

View code
<div class="mb-4 navbar-wrap">
  <div class="topbar">
    <p class="slogan-topbar">Best templates for your web</p>
    <ul class="topbar-menu">
      <li>
        <a href="#" class="topbar-link"><i class="bi bi-facebook"></i></a>
      </li>
      <li>
        <a href="#" class="topbar-link"><i class="bi bi-instagram"></i></a>
      </li>
      <li>
        <a href="#" class="topbar-link"><i class="bi bi-twitter"></i></a>
      </li>
    </ul>
  </div>
  <nav class="navbar">
    <div class="logo">
      <a href="#!">Not Idea UI</a>
    </div>
    <ul class="menu">
      <li><a href="#!" class="nav-link is-active">Home</a></li>
      <li><a href="#!" class="nav-link">About</a></li>
      <li><a href="#!" class="nav-link">Blog</a></li>
      <li><a href="#!" class="nav-link">Contact</a></li>
      <li>
        <button class="button button-primary semi-transparent">Get started</button>
      </li>
    </ul>
    <span class="burger-menu">
      <span></span>
      <span></span>
      <span></span>
    </span>
  </nav>
</div>
View code
<nav class="navbar">
  <div class="logo">
    <a href="#!">Not Idea UI</a>
  </div>
  <ul class="menu">
    <li><a href="#!" class="nav-link is-active">Home</a></li>
    <li><a href="#!" class="nav-link">About</a></li>
    <li><a href="#!" class="nav-link">Blog</a></li>
    <li><a href="#!" class="nav-link">Contact</a></li>
    <li>
      <div class="field has-icon">
        <div class="input-icon">
          <span class="icon">
            <i class="bi bi-search"></i>
          </span>
          <input type="text" class="input" placeholder="Search" />
        </div>
      </div>
    </li>
  </ul>
  <span class="burger-menu">
    <span></span>
    <span></span>
    <span></span>
  </span>
</nav>
View code
<nav class="h-auto mb-10 navbar">
  <div class="logo">
    <a href="#!">Not Idea UI</a>
  </div>
  <ul class="mx-auto menu">
    <li><a href="#!" class="nav-link is-active">Home</a></li>
    <li class="has-submenu">
      <a href="#!" class="nav-link">Shop</a>
      <ul class="submenu">
        <li><a href="#" class="nav-link">Clothes</a></li>
        <li><a href="#" class="nav-link">Shoes</a></li>
        <li><a href="#" class="nav-link">Accessories</a></li>
        <li><a href="#" class="nav-link">More cats</a></li>
      </ul>
    </li>
    <li><a href="#!" class="nav-link">Blog</a></li>
    <li><a href="#!" class="nav-link">Contact</a></li>
  </ul>
  <ul class="ml-auto menu">
    <li class="relative">
      <a href="#" class="text-lg button is-button-icon">
        <i class="bi bi-search"></i>
      </a>
      <form class="absolute right-0 p-5 bg-white rounded shadow-md w-80">
        <div class="field">
          <div class="field has-icon">
            <div class="input-icon">
              <span class="icon">
                <i class="bi bi-search"></i>
              </span>
              <input type="text" class="input"  placeholder="Shoes, clothes, accesories..." />
            </div>
          </div>
        </div>
      </form>
    </li>
    <li>
      <a href="#" class="relative text-lg button is-button-icon">
        <i class="bi bi-cart2"></i>
        <span class="absolute p-1 text-sm leading-none text-white rounded-full -top-2 -right-2 bg-primary-500"> 4 </span>
      </a>
    </li>
    <li>
      <div class="dropdown !p-0 !shadow-none is-hovered">
        <div class="dropdown-wrap !p-0">
          <a href="#" class="relative text-lg wrap-text button is-button-icon">
            <i class="bi bi-person"></i>
          </a>
          <div class="text-left dropdown-content">
            <a href="#" class="dropdown-item">Account</a>
            <a href="#" class="dropdown-item">Orders</a>
            <a href="#" class="dropdown-item">Settings</a>
            <a href="#" class="dropdown-item">Addresses</a>
            <hr class="dropdown-divider" />
            <a href="#" class="dropdown-item">Sign out</a>
          </div>
        </div>
      </div>
    </li>
  </ul>
  <span class="burger-menu">
    <span></span>
    <span></span>
    <span></span>
  </span>
</nav>