Home
Sophia Baker
Minimalistic navbar

Minimalistic navbar

Responsive navbar

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

Navigations Navbar

Author Sophia Baker

20.3k

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

Author:
Piet Vriend

2 years ago

36.8k
Fixed navbar

Author:
Oliver Hansen

2 years ago

26.4k
Navbar compoent

Author:
Amit Pachange

2 years ago

16k
Navbar Section
Responsive Navbar

Author:
Noob

3 years ago

22.4k
Semi transparent navbar

Author:
Laurits

2 years ago

15.7k
Tailwind Sidebar Layout

Author:
Oliver Hansen

2 years ago

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

Author:
TailwindFlex

3 years ago

18.6k
Navigation multimenu
navigation menu, multimenu

Author:
Anonymous

2 years ago

11.2k
boxed layout
boxed layout- navigaiton

Author:
Anonymous

2 years ago

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

26.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.

Author:
Mamadou Diouma II Bah

1 year ago

15.7k
Tailwindflex navbar

Author:
Amit Pachange

2 years ago

16k
Very simple navbar

Author:
Arya

2 years ago

13.5k
Simple navbar
semi transparent

Author:
Laurits

2 years ago

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

Author:
Vikram Choudhary

2 years ago

7.1k
navigation
tailwind navigation pills

Author:
Anonymous

1 year ago

8.8k

Explore components by Tags

Didn't find component you were looking for?

Search from 3000+ components