Home
Pardha Saradhy Madabhushi
Responsive navbar with dark mode support

Responsive navbar with dark mode support

Sidebar on small screen devices

This tailwind example is contributed by Pardha Saradhy Madabhushi, on 24-Jul-2024. Component is made with Tailwind CSS v3. It is responsive. It supports dark mode. similar terms for this example is drawer

Sidebar Navbar

Author Pardha Saradhy Madabhushi

Fork Fullscreen

<a class="text-2xl font-bold text-violet-600 dark:text-white" href="#">
        TailwindFlex
    </a>

<div class="lg:hidden">
        <button class="navbar-burger flex items-center text-violet-600 dark:text-gray-100 p-1" id="navbar_burger">
                <svg class="block h-6 w-6 fill-current" viewBox="0 0 20 20" xmlns="http://www.w3.org/2000/svg">
                    <title>Hamberger menu</title>
                    <path d="M0 3h20v2H0V3zm0 6h20v2H0V9zm0 6h20v2H0v-2z"></path>
                </svg>
        </button>
    </div>

</div>
        </li>
    </ul>

<a href="https://tailwindflex.com/playground">
            <button class=" py-1.5 px-3 m-1 text-center bg-violet-700 border rounded-md text-white  hover:bg-violet-500 hover:text-gray-100 dark:text-gray-200 dark:bg-violet-700 hidden lg:block">
                    Tailwind Playground
            </button>
        </a>

</div>

</nav>

<div class="navbar-menu relative z-50 hidden">
    <div class="navbar-backdrop fixed inset-0 bg-gray-800 opacity-50"></div>
    <nav
        class="fixed bg-white dark:bg-gray-600 top-0 left-0 bottom-0 flex flex-col w-5/6 max-w-sm py-6 px-6 border-r overflow-y-auto">

<div class="flex items-center mb-8">
            <a class="mr-auto text-2xl font-bold text-black text-violet-600 dark:text-gray-100"
                href="https://tailwindflex.com/">
                TailwindFlex
            </a>

</div>

<a class="block py-1.5 px-3 m-1 text-center bg-violet-700 border rounded-md text-white  hover:bg-violet-500 hover:text-gray-100 dark:text-gray-200 dark:bg-violet-700 px-4 py-3 mb-2 text-xs text-center text-white font-semibold bg-violet-600 hover:bg-violet-700  rounded-xl"
                    href="https://tailwindflex.com/playground">
                    Tailwind Playground
                </a>

</div>
            <p class="my-4 text-xs text-center text-gray-400">
                <span>TailwindFlex Copyright © 2023</span>
            </p>
        </div>
    </nav>
</div>
<div>
    <img src="https://images.unsplash.com/photo-1520641147456-f78b3e1d83b6?crop=entropy&cs=tinysrgb&fit=max&fm=jpg&ixid=M3w0NzEyNjZ8MHwxfHNlYXJjaHw1fHx0fGVufDB8MHx8fDE3MjE4MjA0MDl8MA&ixlib=rb-4.0.3&q=80&w=1080">
</div>

var themeToggleDarkIcon = document.getElementById('theme-toggle-dark-icon');
        var themeToggleLightIcon = document.getElementById('theme-toggle-light-icon');

var themeToggleDarkIcon_2 = document.getElementById('theme-toggle-dark-icon-2');
        var themeToggleLightIcon_2 = document.getElementById('theme-toggle-light-icon-2');

// Change the icons inside the button based on previous settings
        if (localStorage.getItem('color-theme') === 'dark' || (!('color-theme' in localStorage) && window.matchMedia(
            '(prefers-color-scheme: dark)').matches)) {
            themeToggleLightIcon.classList.remove('hidden');
            if (themeToggleDarkIcon_2) {
                themeToggleLightIcon_2.classList.remove('hidden');
            }
        } else {
            themeToggleDarkIcon.classList.remove('hidden');
            if (themeToggleDarkIcon_2) {
                themeToggleDarkIcon_2.classList.remove('hidden');
            }
        }

var themeToggleBtn_2 = document.getElementById('theme-toggle-2');
        if (themeToggleBtn_2) {

themeToggleBtn_2.addEventListener('click', function () {

// toggle icons inside button
                themeToggleDarkIcon_2.classList.toggle('hidden');
                themeToggleLightIcon_2.classList.toggle('hidden');

sync_theme()

});
        }

var themeToggleBtn = document.getElementById('theme-toggle');

themeToggleBtn.addEventListener('click', function () {

// toggle icons inside button
            themeToggleDarkIcon.classList.toggle('hidden');
            themeToggleLightIcon.classList.toggle('hidden');

sync_theme()

});

}

document.addEventListener('DOMContentLoaded', function () {
            // open
            const burger = document.querySelectorAll('.navbar-burger');
            const menu = document.querySelectorAll('.navbar-menu');

if (burger.length && menu.length) {
                for (var i = 0; i < burger.length; i++) {
                    burger[i].addEventListener('click', function () {
                        for (var j = 0; j < menu.length; j++) {
                            menu[j].classList.toggle('hidden');
                        }
                    });
                }
            }

// close
            const close = document.querySelectorAll('.navbar-close');
            const backdrop = document.querySelectorAll('.navbar-backdrop');

if (close.length) {
                for (var i = 0; i < close.length; i++) {
                    close[i].addEventListener('click', function () {
                        for (var j = 0; j < menu.length; j++) {
                            menu[j].classList.toggle('hidden');
                        }
                    });
                }
            }

if (backdrop.length) {
                for (var i = 0; i < backdrop.length; i++) {
                    backdrop[i].addEventListener('click', function () {
                        for (var j = 0; j < menu.length; j++) {
                            menu[j].classList.toggle('hidden');
                        }
                    });
                }
            }
        });
</script>

Related Examples

Responsive navbar with dark mode support
Sidebar on small screen devices

Author:
TailwindFlex

2 years ago

15.6k
Tailwind Sidebar Layout

Author:
Oliver Hansen

1 year ago

53.4k
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.

Author:
Eamon Carter

1 year ago

21.8k
Daystar Day care Dashboard
Daystar Day care Dashboard

Author:
Paul Livingstone Ssenoga

8 months ago

6.2k
Tailwind Sidebar Layout

Author:
nejaa badr

8 months ago

4.6k
Tailwind Sidebar Layout
Place edited for the search button

Author:
Nur Pratap Karki

6 months ago

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

Author:
Muhammad Rizqi Juniyanto

3 months ago

919
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

Author:
Ameth Galarcio

2 months ago

1.1k
Tailwind Sidebar Layout

Author:
Junior Gauze

2 months ago

689
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'

Author:
Hielke Brandsma

2 months ago

1.1k
NavBar

Author:
Samuel Abera

3 weeks ago

315
Very simple navbar

Author:
Arya

2 years ago

11.5k

Explore components by Tags

Didn't find component you were looking for?

Search from 1900+ components