Home
Anonymous
Navbar

Navbar

Navbar for primary menu

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

Navbar

Author Anonymous

5.8k

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

Author:
Oliver Hansen

2 years ago

26.6k
Responsive navbar
navbar with the dropdown on mobile devices

Author:
Piet Vriend

2 years ago

37.1k
Responsive Navbar Example
A working example of the navbar

Author:
Noob

3 years ago

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

2 years ago

27.1k
Navigation Bar Responsive

Author:
SAI BENDE

1 year ago

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

Author:
TailwindFlex

3 years ago

18.8k
Navbar Section
Responsive Navbar

Author:
Noob

3 years ago

22.7k
Tailwind Sidebar Layout

Author:
Oliver Hansen

2 years ago

60.3k
Tailwind Sidebar Layout
Place edited for the search button

Author:
Nur Pratap Karki

1 year ago

4.8k
beautifull web page
I create a web page using cloude ai its amazing.

Author:
Akram Khan

1 year ago

2.8k
Best Responsive Navbar Design | Easy & Modern Navigation
Learn how to create a fully responsive navbar using HTML, CSS, and JavaScript. Perfect for beginners and developers looking for a modern, mobile-friendly navigation bar.

Author:
Vishvajeet

9 months ago

3.5k
navbar
navbar

Author:
SANJAY SINGH GARIYA

7 months ago

1.6k

Explore components by Tags

Didn't find component you were looking for?

Search from 3000+ components