Minimalistic navbar

Responsive navbar

This tailwind example is contributed by Sophia Baker, on 19-Jan-2023. Component is made with Tailwind v3.4. It is responsive.

Navigations Navbar

Author Sophia Baker

Tailwind v3.4 21.7k 13

Fork Fullscreen

<div class="px-4 mx-auto max-w-7xl sm:px-6">
    <div class="relative pt-6 pb-16 sm:pb-24">
        <nav class="relative flex items-center justify-between sm:h-10 md:justify-center" aria-label="Global">
            <div class="flex items-center flex-1 md:absolute md:inset-y-0 md:left-0">
                <div class="flex items-center justify-between w-full md:w-auto">
                    <a href="#"><span class="sr-only">Company Name</span>
                        <img class="w-auto h-8 sm:h-10" src="https://www.svgrepo.com/show/448244/pack.svg" loading="lazy" width="202" height="40">
                    </a>
                    <div class="flex items-center -mr-2 md:hidden">
                        <button class="inline-flex items-center justify-center p-2 text-gray-400 bg-gray-50 rounded-md hover:text-gray-500 hover:bg-gray-100 focus:outline-none focus:ring-2 focus:ring-inset focus:ring-gray-50"  type="button" aria-expanded="false">
                            <span class="sr-only">Open main menu</span>
                            <svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="2" stroke="currentColor" aria-hidden="true" class="w-6 h-6">
                            <path stroke-linecap="round" stroke-linejoin="round" d="M4 6h16M4 12h16M4 18h16"></path>
                            </svg>
                        </button>
                    </div>
                </div>
            </div>
            <div class="hidden md:flex md:space-x-10 list-none">
                <li>
                    <a href="#" class="text-base font-normal text-gray-500 list-none hover:text-gray-900"
                        target="">Pricing</a>
                </li>
                <li>
                    <a href="#" class="text-base font-normal text-gray-500 list-none hover:text-gray-900"
                        target="">Gallary
                    </a>
                </li>
                <li>
                    <a href="#" class="text-base font-normal text-gray-500 list-none hover:text-gray-900"
                        target="_blank">Blog
                    </a>
                </li>
            </div>
            <div class="hidden md:absolute md:flex md:items-center md:justify-end md:inset-y-0 md:right-0">
                <div class="inline-flex rounded-full shadow">
                    <div href="#"
                        class="inline-flex items-center px-4 py-2 text-base text-gray-900 bg-white border border-transparent rounded-full cursor-pointer font-base hover:bg-gray-50 ">
                        Sign in
                    </div>
                </div>
            </div>
        </nav>
    </div>
</div>

Related Examples

Responsive navbar
navbar with the dropdown on mobile devices

Piet Vriend

3 years ago

39.8k
Fixed navbar

Oliver Hansen

3 years ago

28.5k
Navbar compoent

Amit Pachange

3 years ago

17.3k
Navbar Section
Responsive Navbar

Noob

4 years ago

24.4k
Semi transparent navbar

Laurits

3 years ago

16.7k
Tailwind Sidebar Layout

Oliver Hansen

3 years ago

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

TailwindFlex

4 years ago

20.5k
Navigation multimenu
navigation menu, multimenu

Anonymous

3 years ago

12.3k
boxed layout
boxed layout- navigaiton

Anonymous

3 years ago

9.6k
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
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
Tailwindflex navbar

Amit Pachange

3 years ago

17.4k
Very simple navbar

Arya

3 years ago

15k
Simple navbar
semi transparent

Laurits

3 years ago

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

Vikram Choudhary

2 years ago

7.8k
navigation
tailwind navigation pills

Anonymous

2 years ago

9.6k