Responsive navbar with dark mode support

Sidebar on small screen devices

This tailwind example is contributed by TailwindFlex, on 16-Jul-2022. Component is made with Tailwind v3.4. It is responsive. It supports dark mode. similar terms for this example is drawer

Sidebar Navbar

Author TailwindFlex

Tailwind v3.4 20.5k 25

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>

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
navbar with the dropdown on mobile devices

Piet Vriend

3 years ago

39.8k
Navbar with search
Use this example of a navbar element to also show a search input element that you can integrate for a site-wide search.

Mamadou Diouma II Bah

2 years ago

17k
Fixed navbar

Oliver Hansen

3 years ago

28.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
Tailwindflex navbar

Amit Pachange

3 years ago

17.4k
Semi transparent navbar

Laurits

3 years ago

16.7k
Minimalistic navbar
Responsive navbar

Sophia Baker

3 years ago

21.7k
Navbar Section
Responsive Navbar

Noob

4 years ago

24.4k
Navbar compoent

Amit Pachange

3 years ago

17.3k
Responsive card grid

TailwindFlex

3 years ago

11.2k
Sticky sidebar menu for big screens

Prajwal Hallale

3 years ago

12.9k
Navbar with social links
A header component with a logo, navigation links, and social media links.

Vikram Choudhary

2 years ago

7.8k
Responsive Navbar Example
A working example of the navbar

Noob

4 years ago

17.9k
Very simple navbar

Arya

3 years ago

15k
Sticky left sidebar

Lucas Martinez

3 years ago

16k
navigation
tailwind navigation pills

Anonymous

2 years ago

9.6k
Simple navbar
semi transparent

Laurits

3 years ago

14.9k