Home
Nick Girga
Elegant NavBar

Elegant NavBar

Useful Tailwind classes for constructing a basic NavBar.

This tailwind example is contributed by Nick Girga, on 04-May-2025. Component is made with Tailwind CSS v3. It is responsive. It supports dark mode.

Navbar

Author Nick Girga

1.6k

Fork Fullscreen

<!--
  It can be a bit hard to see which important classes 
  are in use, so here they are and their purposes:

- 'navbar'            : the main NavBar container
    - 'navbar-start-box'  : container pinned to NavBar start (left)
    - 'navbar-center-box' : container centered in NavBar
    - 'navbar-end-box'    : container pinned to NavBar end (right)
    - 'btn'               : a button (from @nickgirga/elegant-buttons)
    - 'btn-navbar'        : modifies `btn` to use NavBar-appropriate colors

-->

<div class="navbar fixed z-1">
  
  
  <div class="navbar-start-box">
    
    <button class="btn btn-navbar p-2">
      <svg
        width="24px"
        height="24px"
        stroke-width="1.5"
        viewBox="0 0 24 24"
        fill="none"
        xmlns="http://www.w3.org/2000/svg"
        color="currentColor"
        data-darkreader-inline-color="currentColor"
        style="--darkreader-inline-color: currentColor;">
        <path
          d="M3 5H21"
          stroke="currentColor"
          stroke-width="1.5"
          stroke-linecap="round"
          stroke-linejoin="round"
          data-darkreader-inline-stroke="currentColor"
          style="--darkreader-inline-stroke: currentColor;">
        </path>
        <path
          d="M3 12H21"
          stroke="currentColor"
          stroke-width="1.5"
          stroke-linecap="round"
          stroke-linejoin="round"
          data-darkreader-inline-stroke="currentColor"
          style="--darkreader-inline-stroke: currentColor;">
        </path>
        <path
          d="M3 19H21"
          stroke="currentColor"
          stroke-width="1.5"
          stroke-linecap="round"
          stroke-linejoin="round"
          data-darkreader-inline-stroke="currentColor"
          style="--darkreader-inline-stroke: currentColor;">
        </path>
      </svg>
    </button>
  </div>

<div class="navbar-center-box">
    
    <button class="btn btn-navbar font-bold text-xl">
      My App
    </button>
  </div>

<div class="navbar-end-box">
    
    <button class="btn btn-navbar p-2">
      <svg
        width="24px"
        height="24px"
        stroke-width="1.5"
        viewBox="0 0 24 24"
        fill="none"
        xmlns="http://www.w3.org/2000/svg"
        color="currentColor"
        data-darkreader-inline-color="currentColor"
        style="--darkreader-inline-color: currentColor;">
        <path
          d="M12 15C13.6569 15 15 13.6569 15 12C15 10.3431 13.6569 9 12 9C10.3431 9 9 10.3431 9 12C9 13.6569 10.3431 15 12 15Z"
          stroke="currentColor"
          stroke-width="1.5"
          stroke-linecap="round"
          stroke-linejoin="round"
          data-darkreader-inline-stroke="currentColor"
          style="--darkreader-inline-stroke: currentColor;">
        </path>
        <path
          d="M19.6224 10.3954L18.5247 7.7448L20 6L18 4L16.2647 5.48295L13.5578 4.36974L12.9353 2H10.981L10.3491 4.40113L7.70441 5.51596L6 4L4 6L5.45337 7.78885L4.3725 10.4463L2 11V13L4.40111 13.6555L5.51575 16.2997L4 18L6 20L7.79116 18.5403L10.397 19.6123L11 22H13L13.6045 19.6132L16.2551 18.5155C16.6969 18.8313 18 20 18 20L20 18L18.5159 16.2494L19.6139 13.598L21.9999 12.9772L22 11L19.6224 10.3954Z"
          stroke="currentColor"
          stroke-width="1.5"
          stroke-linecap="round"
          stroke-linejoin="round"
          data-darkreader-inline-stroke="currentColor"
          style="--darkreader-inline-stroke: currentColor;">
        </path>
      </svg>
    </button>
  </div>

</div>

<div class="flex flex-col items-center text-center gap-8 md:mx-8 lg:mx-32 mx-4 my-16 mt-32">

<div class="flex flex-col items-center gap-2">
    <h1 class="text-3xl font-bold">Elegant NavBar</h1>
    <h2 class="text-xl opacity-50">Ready-to-use Tailwind components. Pure CSS.</h2>
  </div>

</div>

Related Examples