Navbar

Navbar for primary menu

This tailwind example is contributed by Anonymous, on 12-Apr-2024. Component is made with Tailwind v3.4. It is responsive. It supports dark mode.

Navbar

Author Anonymous

Tailwind v3.4 7k 12

Fork Fullscreen

<div class="top-0 py-1 lg:py-2 w-full bg-transparent lg:relative z-50 dark:bg-gray-900">
    <nav class="z-10 sticky top-0 left-0 right-0 max-w-4xl xl:max-w-5xl mx-auto px-5 py-2.5 lg:border-none lg:py-4">
        <div class="flex items-center justify-between">
            <button>
                <div class="flex items-center space-x-2">
                    <h2 class="text-black dark:text-white font-bold text-2xl">Company</h2>
                </div>
            </button>
            <div class="hidden lg:block">
                <ul class="flex space-x-10 text-base font-bold text-black/60 dark:text-white">
                    <li
                        class="hover:underline hover:underline-offset-4 hover:w-fit transition-all duration-100 ease-linear">
                        <a href="#">Home</a>
                    </li>
                    <li
                        class="hover:underline hover:underline-offset-4 hover:w-fit transition-all duration-100 ease-linear">
                        <a href="#">Our services</a>
                    </li>
                    <li
                        class="hover:underline hover:underline-offset-4 hover:w-fit transition-all duration-100 ease-linear">
                        <a href="#">About</a>
                    </li>
                    <li
                        class="hover:underline hover:underline-offset-4 hover:w-fit transition-all duration-100 ease-linear">
                        <a href="#">Contact</a>
                    </li>
                </ul>
            </div>
            <div class="hidden lg:flex lg:items-center gap-x-2">
                <button class="flex items-center text-black dark:text-white justify-center px-6 py-2.5 font-semibold">Sign up</button>
                <button class="flex items-center justify-center rounded-md bg-[#4A3BFF] text-white px-6 py-2.5 font-semibold hover:shadow-lg hover:drop-shadow transition duration-200">Login</button>
            </div>
            <div class="flex items-center justify-center lg:hidden">
                <button class="focus:outline-none text-slate-200 dark:text-white"><svg stroke="currentColor" fill="currentColor" stroke-width="0" viewBox="0 0 20 20" aria-hidden="true" class="text-2xl text-slate-800 dark:text-white focus:outline-none active:scale-110 active:text-red-500" height="1em" width="1em" xmlns="http://www.w3.org/2000/svg"><path fill-rule="evenodd" d="M3 5a1 1 0 011-1h12a1 1 0 110 2H4a1 1 0 01-1-1zM3 10a1 1 0 011-1h12a1 1 0 110 2H4a1 1 0 01-1-1zM9 15a1 1 0 011-1h6a1 1 0 110 2h-6a1 1 0 01-1-1z" clip-rule="evenodd"></path></svg></button>
            </div>
        </div>
    </nav>
</div>

Related Examples

Fixed navbar

Oliver Hansen

3 years ago

28.7k
Responsive navbar
navbar with the dropdown on mobile devices

Piet Vriend

3 years ago

40k
Responsive Navbar Example
A working example of the navbar

Noob

4 years ago

18k
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

3 years ago

29.1k
Navigation Bar Responsive

SAI BENDE

2 years ago

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

TailwindFlex

4 years ago

20.6k
Navbar Section
Responsive Navbar

Noob

4 years ago

24.6k
Tailwind Sidebar Layout

Oliver Hansen

3 years ago

63.6k
less is more
less is more by salvator

Baraka Salvator

1 year ago

1.6k
macOS Style Webpage – macOS Design in the Browser
A simple webpage inspired by the macOS interface. It recreates the clean design, dock, and desktop look of macOS using only HTML, tailwind CSS, and JavaScript. This project focuses on front-end styling and layout to bring the visual feel of macOS to the web — not a full simulation, just the look and vibe.

Hamza Atig

1 year ago

2.5k
Basic Auto-Hiding Navbar

Anonymous

1 year ago

3k
joker
joker cyber punk

Baraka Salvator

1 year ago

2.1k