Navbar

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

Navbar

Author Morris Muriuki Muthigani

Tailwind v3.4 1.4k 3

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 Icon on the left, links and call to actions on the right

Anonymous

2 years ago

4k
Repsonsive Navbar
fully respondive navbar

Ganesh Salunke

7 months ago

582
Responsive Gradient Navbar

JUGENDRA GANGWAR

1 week ago

28
Game changer
by salvator

Baraka Salvator

1 year ago

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

Mamadou Diouma II Bah

3 years ago

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

Akram Khan

2 years ago

3.6k
flower
by salvator

Baraka Salvator

1 year ago

1.9k
navbar moderne et epure
navbar moderne et epure

Omer fils ELENGA

7 months ago

858
Navbar
Hover-Activated Dropdowns: The "Solutions" and "Company" menus open on hover with smooth scale and opacity transitions. Each dropdown organizes links into sections with icons, descriptions, and even a notification badge for the "Careers" link. Rich Interaction Feedback: All navigation items and buttons respond with color changes, background shifts, and shadow effects on hover. The notification bell includes a live status dot, and the profile button uses a gradient background. Responsive Foundation: The layout includes a hidden mobile menu with a toggle button, ensuring the navigation adapts to different screen sizes while maintaining the professional aesthetic.

Muzammil Riaz

3 months ago

162
Navbar with two CTA buttons

Juraj

1 year ago

2.3k
Dark mode sidenav with collapsible menu

Rajesh Maheshwari

1 year ago

2k
beautifull responsive navbar
I create a attractive responsive navbar using tailwindcss and custom css. also work on mobile devices.

Akram Khan

2 years ago

3.8k