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

253

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