Home
Oliver Hansen
Fixed navbar

Fixed navbar

This tailwind example is contributed by Oliver Hansen, on 14-Mar-2023. Component is made with Tailwind CSS v3. It is responsive.

Navbar

Author Oliver Hansen

27.8k

Fork Fullscreen

<header
    class="fixed inset-x-0 top-0 z-30 mx-auto w-full max-w-screen-md border border-gray-100 bg-white/80 py-3 shadow backdrop-blur-lg md:top-6 md:rounded-3xl lg:max-w-screen-lg">
    <div class="px-4">
        <div class="flex items-center justify-between">
            <div class="flex shrink-0">
                <a aria-current="page" class="flex items-center" href="/">
                    <img class="h-7 w-auto" src="https://upload.wikimedia.org/wikipedia/commons/f/fa/Apple_logo_black.svg" alt="">
                    <p class="sr-only">Website Title</p>
                </a>
            </div>
            <div class="hidden md:flex md:items-center md:justify-center md:gap-5">
                <a aria-current="page"
                    class="inline-block rounded-lg px-2 py-1 text-sm font-medium text-gray-900 transition-all duration-200 hover:bg-gray-100 hover:text-gray-900"
                    href="#">How it works</a>
                <a class="inline-block rounded-lg px-2 py-1 text-sm font-medium text-gray-900 transition-all duration-200 hover:bg-gray-100 hover:text-gray-900"
                    href="#">Pricing</a>
            </div>
            <div class="flex items-center justify-end gap-3">
                <a class="hidden items-center justify-center rounded-xl bg-white px-3 py-2 text-sm font-semibold text-gray-900 shadow-sm ring-1 ring-inset ring-gray-300 transition-all duration-150 hover:bg-gray-50 sm:inline-flex"
                    href="/login">Sign in</a>
                <a class="inline-flex items-center justify-center rounded-xl bg-blue-600 px-3 py-2 text-sm font-semibold text-white shadow-sm transition-all duration-150 hover:bg-blue-500 focus-visible:outline focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-blue-600"
                    href="/login">Login</a>
            </div>
        </div>
    </div>
</header>

Related Examples

Responsive navbar
navbar with the dropdown on mobile devices

Author:
Piet Vriend

3 years ago

38.9k
Minimalistic navbar
Responsive navbar

Author:
Sophia Baker

3 years ago

21.4k
Semi transparent navbar

Author:
Laurits

3 years ago

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

Author:
TailwindFlex

3 years ago

19.9k
Tailwind Sidebar Layout

Author:
Oliver Hansen

3 years ago

62.4k
Navbar compoent

Author:
Amit Pachange

3 years ago

16.9k
Navbar Section
Responsive Navbar

Author:
Noob

3 years ago

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

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

2 years ago

16.3k
Tailwindflex navbar

Author:
Amit Pachange

2 years ago

17.1k
Very simple navbar

Author:
Arya

3 years ago

14.4k
Responsive Navbar Example
A working example of the navbar

Author:
Noob

3 years ago

17.3k
Navbar
Navbar for primary menu

Author:
Anonymous

2 years ago

6.3k
Simple navbar
semi transparent

Author:
Laurits

3 years ago

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

Author:
Vikram Choudhary

2 years ago

7.4k
navigation
tailwind navigation pills

Author:
Anonymous

2 years ago

9.3k

Explore components by Tags

Didn't find component you were looking for?

Search from 3000+ components