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

312

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

Tailwind Sidebar Layout

Author:
Junior Gauze

7 months ago

1.4k
Material 3 NavBar [Light]
A navbar/dock that conforms to Google's Material 3 design guidelines

Author:
Nick Girga

1 month ago

289
Responsive eCommerce Sidebar Layout with Hamburger Menu | Tailwind CSS UI for Online Stores
Build a clean and responsive eCommerce sidebar layout with a smooth hamburger menu using Tailwind CSS and Alpine.js. Ideal for devotional, spiritual, or modern online stores. Includes dark mode support, navigation links, cart, login, and a dynamic layout for beautiful product pages.

Author:
Rajesh Pandey

1 month ago

307
Brand Navbar
Menu side bar navigation bar

Author:
ORGIN_DREAMS

1 month ago

170
Navbar with two CTA buttons

Author:
Juraj

4 months ago

870
Production-Ready Responsive Navigation
This is a sample content area. Scroll down to see the fixed header in action.

Author:
zobaidul kaziex

11 months ago

2.8k
Navbar
Navbar for primary menu

Author:
Anonymous

1 year ago

4.9k
Responsive Tailwind CSS Navbar
A clean and professional navigation bar built with Tailwind CSS. This component includes a logo, navigation links, and a mobile menu with a toggle button for smaller screens. Fully responsive and easy to integrate into any project. Ideal for portfolios, business websites, or modern web apps.

Author:
irahoza daniel

1 month ago

136
basichtml
this is basic html

Author:
Anonymous

3 days ago

6
DevPort
modern portifolio by salvator

Author:
Baraka Salvator

1 month ago

286
tradition music
by salvator

Author:
Baraka Salvator

1 month ago

104
Responsive navbar with alpinejs
A mix of Penguin navbar with PineUI Slide-Over

Author:
Muhammad Rizqi Juniyanto

8 months ago

2.3k

Explore components by Tags

Didn't find component you were looking for?

Search from 2400+ components