Home
Nick Girga
Elegant NavBar + Drawer

Elegant NavBar + Drawer

A NavBar, a responsive drawer/sidebar, and other useful Tailwind components to get started creating an app. Pure CSS, no JavaScript needed (although this example uses a bit of JS).

This tailwind example is contributed by Nick Girga, on 05-May-2025. Component is made with Tailwind CSS v3. It is responsive. It supports dark mode. similar terms for this example is drawer

Sidebar Navigations Other Navbar

Author Nick Girga

1.2k

Fork Fullscreen

<div class="flex flex-col items-center gap-4 my-8 lg:ml-64">

<div id="home-view" class="absolute flex flex-col items-center text-center gap-8 md:mx-8 lg:mx-32 mx-4 my-16 transition-opacity duration-500">

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

<div class="flex flex-col items-center gap-4">
      <a class="btn btn-primary"
        href="https://tailwindflex.com/@nickgirga/elegant-navbar"
        target="_blank"
        rel="noreferrer noopener">
        NavBar Component
      </a>

<a class="btn btn-secondary"
        href="https://tailwindflex.com/@nickgirga/elegant-animated-drawer-responsive"
        target="_blank"
        rel="noreferrer noopener">
        Drawer Component
      </a>
      
      <a class="btn"
        href="https://tailwindflex.com/@nickgirga/elegant-buttons"
        target="_blank"
        rel="noreferrer noopener">
        Buttons
      </a>
    </div>

</div>

<div id="about-view" class="absolute flex flex-col items-center text-center gap-8 md:mx-8 lg:mx-32 mx-4 my-16 transition-opacity duration-500 hidden">

<div class="flex flex-col items-center gap-2">
      <h1 class="text-3xl font-bold">About Elegant Components</h1>
      <h2 class="text-xl opacity-50">by Nicholas Girga</h2>
    </div>

<div class="flex flex-col items-center text-center gap-4">
      <span>
        As I've developed more Tailwind components, I've found myself 
        borrowing a lot of my own favorite styles and color schemes. 
        As I release these components as individual bits and bobs on 
        TailwindFlex, the library of components I've developed that are 
        intended to be used together grows. You can find many of these 
        components individually on 
        <a class="link link-info"
          target="_blank"
          rel="noreferrer noopener"
          href="https://tailwindflex.com/@nickgirga">
          my TailwindFlex page
        </a>
        , usually prefixed with "Elegant".
      </span>
      <span>
        Because so many components are being created around this similar 
        paradigm, I also figured it's probably time that I create a 
        repository to consolidate all of these similar styles. 
        I've decided to refer to it as PineUI. While you will still be 
        able to find all of PineUI's components on TailwindFlex, you can 
        also find a pre-built CSS file with all of PineUI's styles 
        in the PineUI repository. Note: this repository is still under 
        work.
      </span>
    </div>

<a class="btn btn-primary mb-8"
      href="https://gitlab.com/pineui/pineui"
      target="_blank"
      rel="noreferrer noopener">
      🌲 PineUI Repository
    </a>

</div>

<div class="navbar top-0 fixed z-1 lg:ml-64">
  
  
  <div class="navbar-start-box">
    
    <label for="my-drawer" class="btn btn-navbar p-2 block lg:hidden">
      <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>
    </label>
  </div>

<div class="navbar-center-box">
    
    <span id="page-title" class="font-bold text-xl">
      Home
    </span>
  </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>

<input id="my-drawer" type="checkbox" class="peer appearance-none" />

<label for="my-drawer" class="drawer-overlay"></label>

<div class="drawer-sidebar lg:drawer-sidebar-open">

<div>
      
      <label class="btn btn-drawer-sidebar block lg:hidden"
        for="my-drawer"
        onclick="window.presentPage('home');">
        Home
      </label>
      
      <button class="btn btn-drawer-sidebar lg:block w-full hidden"
        onclick="window.presentPage('home');">
        Home
      </button>
    </div>

<div>
      
      <label class="btn btn-drawer-sidebar block lg:hidden"
        for="my-drawer"
        onclick="window.presentPage('about');">
        About
      </label>
      
      <button class="btn btn-drawer-sidebar lg:block w-full hidden"
        onclick="window.presentPage('about');">
        About
      </button>
    </div>

</div>

<script>
  window.hidePage = function(pageObjName) {
    const page = document.getElementById(pageObjName);
    if (!page.classList.contains('hidden')) {
      page.classList.add('hidden');
    }
  }

window.showPage = function(pageObjName) {
    const page = document.getElementById(pageObjName);
    if (page.classList.contains('hidden')) {
      page.classList.remove('hidden');
    }
  }

window.presentPage = function(page) {
    switch (page) {
      case 'home':
        window.hidePage('about-view');
        window.showPage('home-view');
        document.getElementById('page-title').innerHTML = 'Home';
        break;
      case 'about':
        window.hidePage('home-view');
        window.showPage('about-view');
        document.getElementById('page-title').innerHTML = 'About';
        break;
    }
  }
</script>

Related Examples

Responsive Navbar with search profile options

Author:
Rajesh Maheshwari

9 months ago

1.6k
Simple Login & Register Page
Login and Register Page using Tailwind, Alpine JS, and Fontawesome

Author:
Ahita Bisma Adlula

9 months ago

2.7k
Simple count down timer

Author:
Gopi Yadav

2 years ago

15k
Semi transparent navbar

Author:
Laurits

2 years ago

15.8k
Navbar compoent

Author:
Amit Pachange

2 years ago

16.3k
Privacy Policy
Privacy Policy

Author:
Tanvir Hasan Bappy (Tanvir)

1 year ago

1.1k
Responsive Sign-Up Form with TailwindCSS
Create a visually appealing and fully responsive sign-up form using TailwindCSS. This form includes input fields for full name, mobile number, email, password, and confirm password, along with a gradient sign-up button. Designed with simplicity and flexibility, it is perfect for modern web applications and easy to integrate into any project.

Author:
SHARIFUL ISLAM

9 months ago

1.3k
chat ui advanced
Professional chat ui, connect me for jsx https://abhirajk.vercel.app/

Author:
Abhiraj

10 months ago

1.4k
Zoo management
this a navigation bar and hero section of a zoo management system

Author:
ishimwe shadad

6 months ago

809
Hero Section
Modern Gradient Color Scheme - Uses a professional purple-to-teal gradient for visual appeal Animated Elements: Floating decorative circles with subtle animation Fade-in effect for the main illustration Pulsing status indicator Engaging Typography: Gradient text for key phrases Responsive font sizing Clean Poppins font family Social Proof Elements: Client avatars Star ratings Trust indicators ("Trusted by 500+ businesses") Call-to-Action Buttons: Primary gradient button Secondary outlined button Hover effects and transitions Visual Hierarchy: Clear headline with emphasis on transformation Supporting subheading Balanced layout with image Performance Indicators: ROI badge Growth metric badge Responsive Design: Works on mobile and desktop Grid layout that adapts to screen size

Author:
KULDEEP

5 months ago

766
BONIMATOR Responsive Tailwind Starter Template
Responsive Tailwind Starter Template

Author:
Bonimater

5 months ago

736
Innovative Developer & Digital Creator
Innovative Developer

Author:
gidy

6 months ago

784

Explore components by Tags

Didn't find component you were looking for?

Search from 3000+ components