Responsive navbar with alpinejs

A mix of Penguin navbar with PineUI Slide-Over

This tailwind example is contributed by Muhammad Rizqi Juniyanto, on 17-Oct-2024. Component is made with Tailwind v3.4. It is responsive. similar terms for this example is drawer

Sidebar Other Navbar

Author Muhammad Rizqi Juniyanto

Tailwind v3.4 3.9k 3

Fork Fullscreen

<body>
<nav x-data="{ mobileMenuIsOpen: false, isVisible: true, lastScrollY: 0 }"
  @scroll.window="if (window.scrollY > lastScrollY && window.scrollY > 100) { isVisible = false } else { isVisible = true; } lastScrollY = window.scrollY"
  :class="{'translate-y-0': isVisible, '-translate-y-full': !isVisible}"
  class="nightwind-prevent-block fixed top-0 left-0 right-0 z-20 flex items-center justify-between w-full p-4 transition-transform duration-300 ease-in-out bg-white bg-opacity-80 backdrop-blur-md"
  aria-label="penguin ui menu">
  
  <a href="#" class="text-2xl font-bold text-neutral-900 dark:text-white nightwind-prevent">
LOGO
  </a>

<div class="relative ml-3 flex flex-col w-full gap-1 mr-auto max-w-64 text-neutral-600 dark:text-neutral-300">
    <svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="2" stroke="currentColor"
      aria-hidden="true"
      class="absolute left-2.5 top-1/2 size-5 -translate-y-1/2 text-neutral-600/50 dark:text-neutral-300/50">
      <path stroke-linecap="round" stroke-linejoin="round"
        d="m21 21-5.197-5.197m0 0A7.5 7.5 0 1 0 5.196 5.196a7.5 7.5 0 0 0 10.607 10.607Z" />
    </svg>
    <input type="search"
            name="search"
            placeholder="Search"
            aria-label="search"
            class="w-full rounded-md border border-neutral-300 bg-neutral-50 py-2.5 pl-10 pr-2 text-sm focus-visible:outline focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-black disabled:cursor-not-allowed disabled:opacity-75 dark:border-neutral-700 dark:bg-neutral-900/50 dark:focus-visible:outline-white" />
  </div>

<ul class="items-center flex-shrink-0 hidden gap-4 sm:flex">
    
    <li>
      <a href="#"
        class="font-bold nightwind-prevent underline-offset-2 hover:text-black focus:outline-none focus:underline dark:text-white dark:hover:text-white"
        aria-current="page">
    Home
      </a>
    </li>
   <li>
      <a href="#"
        class="font-bold nightwind-prevent underline-offset-2 hover:text-black focus:outline-none focus:underline dark:text-white dark:hover:text-white"
        aria-current="page">
  About
      </a>
    </li>
    
    <li>
      <button
    id="dark-mode"
    class="flex items-center justify-center w-8 h-8 text-center transition duration-300 rounded-full focus:outline-none">

<li x-data="{ userDropDownIsOpen: false, openWithKeyboard: false }"
      @keydown.esc.window="userDropDownIsOpen = false, openWithKeyboard = false" class="relative flex items-center">
      <button @click="userDropDownIsOpen = ! userDropDownIsOpen"
                :aria-expanded="userDropDownIsOpen"
                @keydown.space.prevent="openWithKeyboard = true"
                @keydown.enter.prevent="openWithKeyboard = true"
                @keydown.down.prevent="openWithKeyboard = true"
                class="rounded-full focus-visible:outline focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-black dark:focus-visible:outline-white"
                aria-controls="userMenu">
                <img src="https://penguinui.s3.amazonaws.com/component-assets/avatar-8.webp"
                    alt="User Profile"
                    class="object-cover rounded-full size-10" />
            </button>
      
      <ul x-cloak x-show="userDropDownIsOpen || openWithKeyboard" x-transition.opacity x-trap="openWithKeyboard"
        @click.outside="userDropDownIsOpen = false, openWithKeyboard = false"
        @keydown.down.prevent="$focus.wrap().next()" @keydown.up.prevent="$focus.wrap().previous()" id="userMenu"
        class="absolute right-0 top-12 flex w-full min-w-[12rem] flex-col overflow-hidden rounded-md border border-neutral-300 bg-neutral-50 py-1.5 dark:border-neutral-700 dark:bg-neutral-900">
        <li class="border-b border-neutral-300 dark:border-neutral-700">
          <div class="flex flex-col px-4 py-2">
            <span class="text-sm font-medium text-neutral-900 dark:text-white">
                            Alice Brown
                        </span>
            <p class="text-xs text-neutral-600 dark:text-neutral-300">
              alice.brown@gmail.com
            </p>
          </div>
        </li>
        <li>
          <a href="#"
            class="block px-4 py-2 text-sm bg-neutral-50 text-neutral-600 hover:bg-neutral-900/5 hover:text-neutral-900 focus-visible:bg-neutral-900/10 focus-visible:text-neutral-900 focus-visible:outline-none dark:bg-neutral-900 dark:text-neutral-300 dark:hover:bg-neutral-50/5 dark:hover:text-white dark:focus-visible:bg-neutral-50/10 dark:focus-visible:text-white">
            Dashboard
          </a>
        </li>
        <li>
          <a href="#"
            class="block px-4 py-2 text-sm bg-neutral-50 text-neutral-600 hover:bg-neutral-900/5 hover:text-neutral-900 focus-visible:bg-neutral-900/10 focus-visible:text-neutral-900 focus-visible:outline-none dark:bg-neutral-900 dark:text-neutral-300 dark:hover:bg-neutral-50/5 dark:hover:text-white dark:focus-visible:bg-neutral-50/10 dark:focus-visible:text-white">
            Subscription
          </a>
        </li>
        <li>
          <a href="#"
            class="block px-4 py-2 text-sm bg-neutral-50 text-neutral-600 hover:bg-neutral-900/5 hover:text-neutral-900 focus-visible:bg-neutral-900/10 focus-visible:text-neutral-900 focus-visible:outline-none dark:bg-neutral-900 dark:text-neutral-300 dark:hover:bg-neutral-50/5 dark:hover:text-white dark:focus-visible:bg-neutral-50/10 dark:focus-visible:text-white">
            Settings
          </a>
        </li>
        <li>
          <a href="#"
            class="block px-4 py-2 text-sm bg-neutral-50 text-neutral-600 hover:bg-neutral-900/5 hover:text-neutral-900 focus-visible:bg-neutral-900/10 focus-visible:text-neutral-900 focus-visible:outline-none dark:bg-neutral-900 dark:text-neutral-300 dark:hover:bg-neutral-50/5 dark:hover:text-white dark:focus-visible:bg-neutral-50/10 dark:focus-visible:text-white">
            Sign Out
          </a>
        </li>
      </ul> 
    </li> 
  </ul>

<button @click="mobileMenuIsOpen = !mobileMenuIsOpen"
        :aria-expanded="mobileMenuIsOpen"
        :class="mobileMenuIsOpen ? 'fixed top-6 right-6 z-20' : null"
        type="button"
        class="flex text-neutral-600 dark:text-neutral-300 sm:hidden"
        aria-label="mobile menu"
        aria-controls="mobileMenu">
        <svg x-cloak
            x-show="!mobileMenuIsOpen"
            xmlns="http://www.w3.org/2000/svg"
            fill="none"
            aria-hidden="true"
            viewBox="0 0 24 24"
            stroke-width="2"
            stroke="currentColor"
            class="size-6">
            <path stroke-linecap="round"
                stroke-linejoin="round"
                d="M3.75 6.75h16.5M3.75 12h16.5m-16.5 5.25h16.5" />
        </svg>
        <svg x-cloak
            x-show="mobileMenuIsOpen"
            xmlns="http://www.w3.org/2000/svg"
            fill="none"
            aria-hidden="true"
            viewBox="0 0 24 24"
            stroke-width="2"
            stroke="currentColor"
            class="size-6">
            <path stroke-linecap="round"
                stroke-linejoin="round"
                d="M6 18 18 6M6 6l12 12" />
        </svg>
    </button>

<template x-teleport="body">
    <div x-show="mobileMenuIsOpen" @keydown.window.escape="mobileMenuIsOpen=false" class="relative z-[99]">
      <div x-show="mobileMenuIsOpen" x-transition.opacity.duration.600ms @click="mobileMenuIsOpen = false"
        class="fixed inset-0 bg-black bg-opacity-10"></div>
      <div class="fixed inset-0 overflow-hidden">
        <div class="absolute inset-0 overflow-hidden">
          <div class="fixed inset-y-0 right-0 flex max-w-full pl-10">
            <div x-show="mobileMenuIsOpen" @click.away="mobileMenuIsOpen = false"
              x-transition:enter="transform transition ease-in-out duration-500 sm:duration-700"
              x-transition:enter-start="translate-x-full" x-transition:enter-end="translate-x-0"
              x-transition:leave="transform transition ease-in-out duration-500 sm:duration-700"
              x-transition:leave-start="translate-x-0" x-transition:leave-end="translate-x-full"
              class="w-screen max-w-md">
              <div
                class="flex flex-col h-full py-5 overflow-y-scroll bg-white border-l shadow-lg border-neutral-100/70">
                <div class="px-4 sm:px-5">
                  <div class="flex items-start justify-between pb-1">
                    <h2 class="text-base font-semibold leading-6 text-gray-900" id="slide-over-title">
                      Slide Over Title
                    </h2>
                    <div class="flex items-center h-auto ml-3">
                      <button @click="mobileMenuIsOpen=false"
                                                class="absolute top-0 right-0 z-30 flex items-center justify-center px-3 py-2 mt-4 mr-5 space-x-1 text-xs font-medium uppercase border rounded-md border-neutral-200 text-neutral-600 hover:bg-neutral-100">
                                                <svg xmlns="http://www.w3.org/2000/svg"
                                                    fill="none"
                                                    viewBox="0 0 24 24"
                                                    stroke-width="1.5"
                                                    stroke="currentColor"
                                                    class="w-4 h-4">
                                                    <path stroke-linecap="round"
                                                        stroke-linejoin="round"
                                                        d="M6 18L18 6M6 6l12 12"></path>
                                                </svg>
                                                <span>Close</span>
                                            </button>
                    </div>
                  </div>
                </div>
                <div class="relative flex-1 px-4 mt-5 sm:px-5">
                  <div class="absolute inset-0 px-4 sm:px-5">
                    <div class="relative h-full overflow-hidden border border-dashed rounded-md border-neutral-300">
                      
                    </div>
                  </div>
                </div>
              </div>
            </div> 
          </div>
        </div>
      </div>
    </div>
  </template>
  
</nav>

//             doc.addEventListener('transitionend', onTransitionDone);
//             if (!doc.classList.contains('nightwind')) {
//                 doc.classList.add('nightwind');
//             }
//         },

//         toggle: () => {
//             nightwind.beforeTransition();
//             const doc = document.documentElement;

//             if (!doc.classList.contains('dark')) {
//                 doc.classList.add('dark');
//                 window.localStorage.setItem('nightwind-mode', 'dark');
//             } else {
//                 doc.classList.remove('dark');
//                 window.localStorage.setItem('nightwind-mode', 'light');
//             }
//         },

//         enable: (dark) => {
//             const mode = dark ? "dark" : "light";
//             const opposite = dark ? "light" : "dark";

//             nightwind.beforeTransition();
//             const doc = document.documentElement;

//             if (doc.classList.contains(opposite)) {
//                 doc.classList.remove(opposite);
//             }
//             doc.classList.add(mode);
//             window.localStorage.setItem('nightwind-mode', mode);
//         },
//     };

//     // Initialize the initial color mode
//     (function() {
//         function getInitialColorMode() {
//             const persistedColorPreference = window.localStorage.getItem('nightwind-mode');
//             const hasPersistedPreference = typeof persistedColorPreference === 'string';
//             if (hasPersistedPreference) {
//                 return persistedColorPreference;
//             }
//             const mql = window.matchMedia('(prefers-color-scheme: dark)');
//             const hasMediaQueryPreference = typeof mql.matches === 'boolean';
//             return hasMediaQueryPreference ? (mql.matches ? 'dark' : 'light') : 'light';
//         }

//         const initialMode = getInitialColorMode();
//         document.documentElement.classList.toggle('dark', initialMode === 'dark');
//     })();
//     const darkButtonElement = document.getElementById('dark-mode');
//     let isDarkmode = window.localStorage.getItem('nightwind-mode') === 'dark';
//     const darkIcon = document.getElementById('dark-icon');
//     const lightIcon = document.getElementById('light-icon');
    
//     // Function to toggle dark mode
//     function toggleDarkMode() {
//         isDarkmode = !isDarkmode;
//         window.localStorage.setItem('nightwind-mode', isDarkmode);
    
//         // Toggle the visibility of the icons
//         darkIcon.classList.toggle('hidden', !isDarkmode);
//         lightIcon.classList.toggle('hidden', isDarkmode);
    
//         // Assuming nightwind.toggle() handles the dark mode toggle
//         nightwind.toggle();
//     }
    
//     // Attach the event listener
//     darkButtonElement.addEventListener('click', toggleDarkMode);
    
//     // Initialize the state on page load
//     if (isDarkmode) {
//         darkIcon.classList.remove('hidden'); // Show dark icon if dark mode is active
//     } else {
//         lightIcon.classList.remove('hidden'); // Show light icon if light mode is active
//     }

// });document.addEventListener('DOMContentLoaded', () => {
//     var nightwind = {
//         beforeTransition: () => {
//             const doc = document.documentElement;
//             const onTransitionDone = () => {
//                 doc.classList.remove('nightwind');
//                 doc.removeEventListener('transitionend', onTransitionDone);
//             }

//         toggle: () => {
//             nightwind.beforeTransition();
//             const doc = document.documentElement;

//         enable: (dark) => {
//             const mode = dark ? "dark" : "light";
//             const opposite = dark ? "light" : "dark";

//             nightwind.beforeTransition();
//             const doc = document.documentElement;

//         const initialMode = getInitialColorMode();
//         document.documentElement.classList.toggle('dark', initialMode === 'dark');
//     })();
//     const darkButtonElement = document.getElementById('dark-mode');
//     let isDarkmode = window.localStorage.getItem('nightwind-mode') === 'dark';
//     const darkIcon = document.getElementById('dark-icon');
//     const lightIcon = document.getElementById('light-icon');
    
//     // Function to toggle dark mode
//     function toggleDarkMode() {
//         isDarkmode = !isDarkmode;
//         window.localStorage.setItem('nightwind-mode', isDarkmode);
    
//         // Toggle the visibility of the icons
//         darkIcon.classList.toggle('hidden', !isDarkmode);
//         lightIcon.classList.toggle('hidden', isDarkmode);
    
//         // Assuming nightwind.toggle() handles the dark mode toggle
//         nightwind.toggle();
//     }
    
//     // Attach the event listener
//     darkButtonElement.addEventListener('click', toggleDarkMode);
    
//     // Initialize the state on page load
//     if (isDarkmode) {
//         darkIcon.classList.remove('hidden');
//     } else {
//         lightIcon.classList.remove('hidden'); 
//     }

// });
  </script>
</body>

Related Examples

Responsive navbar with dark mode support
Sidebar on small screen devices

TailwindFlex

4 years ago

20.5k
Tailwind Sidebar Layout

Oliver Hansen

3 years ago

63.5k
Animated Drawer
Collapsible sidebar navigation that allows users to access additional menu options. It is designed for efficient space utilization and can be easily expanded and collapsed.

Eamon Carter

2 years ago

28.9k
Daystar Day care Dashboard
Daystar Day care Dashboard

Paul Livingstone Ssenoga

2 years ago

11.4k
Tailwind Sidebar Layout

nejaa badr

2 years ago

9.2k
Tailwind Sidebar Layout
Place edited for the search button

Nur Pratap Karki

2 years ago

5.9k
Responsive navbar with dark mode support
Sidebar on small screen devices

Pardha Saradhy Madabhushi

2 years ago

3k
Sidebar
This is the sidebar that I use in my projects, I use grid to be able to manage the space issue a little better, it seems like a clean and modern design, it is more than anything for the dashboards that you want to create

Ameth Galarcio

1 year ago

4.6k
Tailwind Sidebar Layout

Junior Gauze

1 year ago

2.5k
Tailwind Sidebar Layout (improved)
Improved Tailwind Sidebar Layout. - Responsive sidebar working - Close responsive sidebar working - Positioning menu-toggle correctly - Added some fresh icons - Added sub-items - showing on click - Added animation and swap on icons using 'peer'

Hielke Brandsma

1 year ago

4k
Apple Dock Navigation Bar

Cristian

1 year ago

3k
Table Content
Dashboard Table Content, with Sidebar Reusable for any window

Ameth Galarcio

1 year ago

2.9k