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

18.7k

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

33.1k
Fixed navbar

Author:
Oliver Hansen

2 years ago

23.5k
Navbar compoent

Author:
Amit Pachange

2 years ago

14.6k
Navbar Section
Responsive Navbar

Author:
Noob

2 years ago

20.4k
Semi transparent navbar

Author:
Laurits

2 years ago

14.4k
Tailwind Sidebar Layout

Author:
Oliver Hansen

2 years ago

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

Author:
TailwindFlex

2 years ago

16.8k
Navigation multimenu
navigation menu, multimenu

Author:
Anonymous

1 year ago

10.6k
boxed layout
boxed layout- navigaiton

Author:
Anonymous

1 year ago

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

1 year ago

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

14.1k
Tailwindflex navbar

Author:
Amit Pachange

1 year ago

14.7k
Very simple navbar

Author:
Arya

2 years ago

12.2k
Simple navbar
semi transparent

Author:
Laurits

2 years ago

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

Author:
Vikram Choudhary

1 year ago

6.3k
navigation
tailwind navigation pills

Author:
Anonymous

1 year ago

7.9k

Explore components by Tags

Didn't find component you were looking for?

Search from 2100+ components