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

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

1 year ago

27.8k
Fixed navbar

Author:
Oliver Hansen

1 year ago

19.6k
Navbar compoent

Author:
Amit Pachange

1 year ago

12.4k
Navbar Section
Responsive Navbar

Author:
Noob

2 years ago

17.3k
Semi transparent navbar

Author:
Laurits

1 year ago

12.3k
Tailwind Sidebar Layout

Author:
Oliver Hansen

1 year ago

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

Author:
TailwindFlex

2 years ago

14.3k
Navigation multimenu
navigation menu, multimenu

Author:
Anonymous

1 year ago

9.1k
boxed layout
boxed layout- navigaiton

Author:
Anonymous

1 year ago

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

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

11 months ago

11.8k
Tailwindflex navbar

Author:
Amit Pachange

1 year ago

13.3k
Very simple navbar

Author:
Arya

1 year ago

10.8k
Simple navbar
semi transparent

Author:
Laurits

1 year ago

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

Author:
Vikram Choudhary

1 year ago

5.4k
navigation
tailwind navigation pills

Author:
Anonymous

11 months ago

6.7k

Explore components by Tags

Didn't find component you were looking for?

Search from 1700+ componenent