Navbar

This tailwind example is contributed by Morris Muriuki Muthigani, on 25-Jul-2025. Component is made with Tailwind CSS v3. It is responsive.

Navbar

Author Morris Muriuki Muthigani

410

Fork Fullscreen

<nav
  class="mx-2 px-2 sm:px-6 lg:px-8 sticky top-2 z-30 shadow backdrop-blur-2xl backdrop-saturate-200 bg-opacity-80 xl:block m-2 rounded-lg sm:lg:md:rounded-full">
  <div class="relative flex h-16 items-center justify-between">
    <div class="absolute inset-y-0 left-0 flex items-center sm:hidden">
      <button type="button" class="relative inline-flex items-center justify-center rounded-md p-2 text-gray-400 hover:bg-red-700 hover:text-white focus:outline-none focus:ring-2 focus:ring-inset focus:ring-white" aria-controls="mobile-menu" aria-expanded="false"><span class="absolute -inset-0.5"></span><span class="sr-only">Open main menu</span><svg class="block h-6 w-6 block" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor" aria-hidden="true"><path stroke-linecap="round" stroke-linejoin="round" d="M3.75 6.75h16.5M3.75 12h16.5m-16.5 5.25h16.5"></path></svg><svg class="hidden h-6 w-6 hidden" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor" aria-hidden="true"><path stroke-linecap="round" stroke-linejoin="round" d="M6 18L18 6M6 6l12 12"></path></svg></button>
    </div>
    <div class="flex flex-1 items-center justify-center sm:items-stretch sm:justify-start">
      <div class="flex flex-shrink-0 items-center"><a
          href="/"><img class="h-6" src="https://kikimodev.com/static/media/logo.d27524764297707852d8.png" alt="Logo"></a></div>
      <div class="hidden sm:ml-6 sm:block">
        <div class="flex space-x-4"><a href="/"
            class="text-red-600 border-red-600 flex px-5 items-center py-6 text-sm leading-5 hover:bg-gray-100 focus:bg-gray-100 focus:outline-none transition duration-150 ease-in-out"><span class="mr-2"><svg xmlns="http://www.w3.org/2000/svg" class="icon icon-tabler icon-tabler-compass" width="20" height="20" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor" fill="none" stroke-linecap="round" stroke-linejoin="round"><path d="M2.25 12l8.954-8.955c.44-.439 1.152-.439 1.591 0L21.75 12M4.5 9.75v10.125c0 .621.504 1.125 1.125 1.125H9.75v-4.875c0-.621.504-1.125 1.125-1.125h2.25c.621 0 1.125.504 1.125 1.125V21h4.125c.621 0 1.125-.504 1.125-1.125V9.75M8.25 21h8.25"></path><path d=""></path></svg></span>Home</a><a
            href="/services"
            class="text-gray-700 border-transparent flex px-5 items-center py-6 text-sm leading-5 hover:bg-gray-100 focus:bg-gray-100 focus:outline-none transition duration-150 ease-in-out"><span class="mr-2"><svg xmlns="http://www.w3.org/2000/svg" class="icon icon-tabler icon-tabler-compass" width="20" height="20" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor" fill="none" stroke-linecap="round" stroke-linejoin="round"><path d="M2.036 12.322a1.012 1.012 0 010-.639C3.423 7.51 7.36 4.5 12 4.5c4.638 0 8.573 3.007 9.963 7.178.07.207.07.431 0 .639C20.577 16.49 16.64 19.5 12 19.5c-4.638 0-8.573-3.007-9.963-7.178z"></path><path d="M15 12a3 3 0 11-6 0 3 3 0 016 0z"></path></svg></span>Services</a><a
            href="/blogs"
            class="text-gray-700 border-transparent flex px-5 items-center py-6 text-sm leading-5 hover:bg-gray-100 focus:bg-gray-100 focus:outline-none transition duration-150 ease-in-out"><span class="mr-2"><svg xmlns="http://www.w3.org/2000/svg" class="icon icon-tabler icon-tabler-compass" width="20" height="20" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor" fill="none" stroke-linecap="round" stroke-linejoin="round"><path d="M20.25 14.15v4.25c0 1.094-.787 2.036-1.872 2.18-2.087.277-4.216.42-6.378.42s-4.291-.143-6.378-.42c-1.085-.144-1.872-1.086-1.872-2.18v-4.25m16.5 0a2.18 2.18 0 00.75-1.661V8.706c0-1.081-.768-2.015-1.837-2.175a48.114 48.114 0 00-3.413-.387m4.5 8.006c-.194.165-.42.295-.673.38A23.978 23.978 0 0112 15.75c-2.648 0-5.195-.429-7.577-1.22a2.016 2.016 0 01-.673-.38m0 0A2.18 2.18 0 013 12.489V8.706c0-1.081.768-2.015 1.837-2.175a48.111 48.111 0 013.413-.387m7.5 0V5.25A2.25 2.25 0 0013.5 3h-3a2.25 2.25 0 00-2.25 2.25v.894m7.5 0a48.667 48.667 0 00-7.5 0M12 12.75h.008v.008H12v-.008z"></path><path d=""></path></svg></span>Blogs</a><a
            href="/portfolios"
            class="text-gray-700 border-transparent flex px-5 items-center py-6 text-sm leading-5 hover:bg-gray-100 focus:bg-gray-100 focus:outline-none transition duration-150 ease-in-out"><span class="mr-2"><svg xmlns="http://www.w3.org/2000/svg" class="icon icon-tabler icon-tabler-compass" width="20" height="20" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor" fill="none" stroke-linecap="round" stroke-linejoin="round"><path d="M4.098 19.902a3.75 3.75 0 0 0 5.304 0l6.401-6.402M6.75 21A3.75 3.75 0 0 1 3 17.25V4.125C3 3.504 3.504 3 4.125 3h5.25c.621 0 1.125.504 1.125 1.125v4.072M6.75 21a3.75 3.75 0 0 0 3.75-3.75V8.197M6.75 21h13.125c.621 0 1.125-.504 1.125-1.125v-5.25c0-.621-.504-1.125-1.125-1.125h-4.072M10.5 8.197l2.88-2.88c.438-.439 1.15-.439 1.59 0l3.712 3.713c.44.44.44 1.152 0 1.59l-2.879 2.88M6.75 17.25h.008v.008H6.75v-.008Z"></path><path d=""></path></svg></span>Portfolio</a><a
            href="/live-work"
            class="text-gray-700 border-transparent flex px-5 items-center py-6 text-sm leading-5 hover:bg-gray-100 focus:bg-gray-100 focus:outline-none transition duration-150 ease-in-out"><span class="mr-2"><svg xmlns="http://www.w3.org/2000/svg" class="icon icon-tabler icon-tabler-compass" width="20" height="20" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor" fill="none" stroke-linecap="round" stroke-linejoin="round"><path d="M8.288 15.038a5.25 5.25 0 0 1 7.424 0M5.106 11.856c3.807-3.808 9.98-3.808 13.788 0M1.924 8.674c5.565-5.565 14.587-5.565 20.152 0M12.53 18.22l-.53.53-.53-.53a.75.75 0 0 1 1.06 0Z"></path><path d=""></path></svg></span>Live
            Work</a></div>
      </div>
    </div>
    <div class="absolute inset-y-0 right-0 flex items-center pr-2 sm:static sm:inset-auto sm:ml-6 sm:pr-0">
      <button type="button" class="relative rounded-full bg-red-600 p-1 text-white hover:text-white focus:outline-none focus:ring-2 focus:ring-white focus:ring-offset-2 focus:ring-offset-white"><span class="absolute -inset-1.5"></span><span class="sr-only">View notifications</span><svg class="h-6 w-6" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor" aria-hidden="true"><path stroke-linecap="round" stroke-linejoin="round" d="M14.857 17.082a23.848 23.848 0 005.454-1.31A8.967 8.967 0 0118 9.75v-.7V9A6 6 0 006 9v.75a8.967 8.967 0 01-2.312 6.022c1.733.64 3.56 1.085 5.455 1.31m5.714 0a24.255 24.255 0 01-5.714 0m5.714 0a3 3 0 11-5.714 0"></path></svg></button>
    </div>
  </div>
</nav>

Related Examples

Navbar with Dropdown
Navbar with dropdown

Author:
Razeem Razak

2 weeks ago

199
Modern page
hero page by salvator

Author:
Baraka Salvator

5 months ago

923
animated navigation bar

Author:
Md. Tofayel islam

10 months ago

2.1k
Responsive navbar
navbar with the dropdown on mobile devices

Author:
Piet Vriend

2 years ago

37k
Production-Ready Responsive Navigation
This is a sample content area. Scroll down to see the fixed header in action.

Author:
zobaidul kaziex

1 year ago

3.2k
Tailwindflex navbar

Author:
Amit Pachange

2 years ago

16.1k
Garden
by salvator

Author:
Baraka Salvator

5 months ago

830
admin panel UI
Premium Admin Panel Pack including sidebar navigation, top navbar, dashboard cards, user tables, quick actions, profile section, and footer. Fully responsive with modern clean design using Tailwind CSS.

Author:
Lekhraj Ghimire

4 months ago

1.3k
chair
by salvator

Author:
Baraka Salvator

5 months ago

525
pasta
by salvator

Author:
Baraka Salvator

4 months ago

655
Daystar Day care Dashboard
Daystar Day care Dashboard

Author:
Paul Livingstone Ssenoga

1 year ago

9.5k
beautifull web page
I create a web page using cloude ai its amazing.

Author:
Akram Khan

1 year ago

2.8k

Explore components by Tags

Didn't find component you were looking for?

Search from 3000+ components