Tailwind Navigation (horizontal) Components (366)

Navigation (horizontal) from BoldUI

BoldUI Dark Navigation Bar with Logo and Sign In/Support Links

A full-width dark navigation bar showing the BoldUI logo on the left, centered muted links for About, Company, Services, and Testimonials, and Sign In and Support links on the right. Thin vertical dividers separate the logo, menu, and action sections.

<section class="relative bg-black overflow-hidden" x-data="{ mobileNavOpen: false }">
  <nav class="relative flex px-16 py-8 lg:py-0 justify-between bg-transparent border-b">
    <div class="pr-14 flex items-center lg:border-r">
      <a class="inline-block text-xl text-white font-medium font-heading" href="#">
        <img class="h-8" width="auto" src="boldui-assets/logo/logo-boldui-light.svg" alt="">
      </a>
    </div>
    <button x-on:click="mobileNavOpen = !mobileNavOpen" class="lg:hidden self-center">
      <svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg"><rect y="6" width="24" height="2" fill="white"></rect><rect y="11" width="24" height="2" fill="white"></rect><rect y="16" width="24" height="2" fill="white"></rect></svg>
    </button>
    <div class="hidden lg:block py-8 lg:absolute lg:top-1/2 lg:left-1/2 lg:transform lg:-translate-y-1/2 lg:-translate-x-1/2">
      <ul class="flex justify-center">
        <li class="mr-12"><a class="text-gray-500 hover:text-gray-400" href="#">About</a></li>
        <li class="mr-12"><a class="text-gray-500 hover:text-gray-400" href="#">Company</a></li>
        <li class="mr-12"><a class="text-gray-500 hover:text-gray-400" href="#">Services</a></li>
        <li><a class="text-gray-500 hover:text-gray-400" href="#">Testimonials</a></li>
      </ul>
    </div>
    <div class="hidden lg:block pl-16 py-8 border-l">
      <div class="flex items-center">
        <a class="inline-block text-white text-sm hover:underline font-heading" href="#">Sign In</a>
        <span class="mx-2 text-white">/</span>
        <a class="inline-block text-white text-sm hover:underline font-heading" href="#">Support</a>
      </div>
    </div>
  </nav>
  <div :class="{'block': mobileNavOpen, 'hidden': !mobileNavOpen}" class="hidden fixed top-0 left-0 bottom-0 w-5/6 max-w-sm z-50">
    <div x-on:click="mobileNavOpen = !mobileNavOpen" class="fixed inset-0 bg-gray-800 opacity-25"></div>
    <nav class="relative flex flex-col py-8 px-10 w-full h-full bg-black border-r overflow-y-auto">
      <a class="inline-block text-xl text-white font-medium font-heading mb-16 md:mb-32" href="#">
        <img class="h-8" width="auto" src="boldui-assets/logo/logo-boldui-light.svg" alt="">
      </a>
      <ul class="mb-32">
        <li class="mb-10">
          <a class="flex items-center" href="#">
            <span class="mr-3 text-lg text-white">About</span>
            <svg width="16" height="9" viewBox="0 0 16 9" fill="none" xmlns="http://www.w3.org/2000/svg">
              <path d="M12.01 3.48047H0V5.57278H12.01V8.71124L16 4.52663L12.01 0.34201V3.48047Z" fill="#FFEC3E"></path>
            </svg>
          </a>
        </li>
        <li class="mb-10">
          <a class="flex items-center" href="#">
            <span class="mr-3 text-lg text-white">Company</span>
            <svg width="16" height="9" viewBox="0 0 16 9" fill="none" xmlns="http://www.w3.org/2000/svg">
              <path d="M12.01 3.48047H0V5.57278H12.01V8.71124L16 4.52663L12.01 0.34201V3.48047Z" fill="#FFEC3E"></path>
            </svg>
          </a>
        </li>
        <li class="mb-10">
          <a class="flex items-center" href="#">
            <span class="mr-3 text-lg text-white">Services</span>
            <svg width="16" height="9" viewBox="0 0 16 9" fill="none" xmlns="http://www.w3.org/2000/svg">
              <path d="M12.01 3.48047H0V5.57278H12.01V8.71124L16 4.52663L12.01 0.34201V3.48047Z" fill="#FFEC3E"></path>
            </svg>
          </a>
        </li>
        <li>
          <a class="flex items-center" href="#">
            <span class="mr-3 text-lg text-white">Contact</span>
            <svg width="16" height="9" viewBox="0 0 16 9" fill="none" xmlns="http://www.w3.org/2000/svg">
              <path d="M12.01 3.48047H0V5.57278H12.01V8.71124L16 4.52663L12.01 0.34201V3.48047Z" fill="#FFEC3E"></path>
            </svg>
          </a>
        </li>
      </ul>
      <a class="flex mb-8 items-center justify-center py-4 px-6 rounded-full bg-yellow-300 hover:bg-yellow-400 transform duration-200" href="#">
        <svg class="mr-3" width="16" height="9" viewBox="0 0 16 9" fill="none" xmlns="http://www.w3.org/2000/svg">
          <path d="M12.01 3.16553H0V5.24886H12.01V8.37386L16 4.20719L12.01 0.0405273V3.16553Z" fill="black"></path>
        </svg>
        <span class="text-sm font-medium uppercase tracking-wider">Sign Up</span>
      </a>
      <a class="flex mb-10 items-center text-white hover:underline" href="#">
        <span class="mr-2 text-sm">Log In</span>
        <svg width="16" height="10" viewBox="0 0 16 10" fill="none" xmlns="http://www.w3.org/2000/svg">
          <path d="M12.01 3.95383H0V6.04614H12.01V9.1846L16 4.99998L12.01 0.815369V3.95383Z" fill="#FFEC3E"></path>
        </svg>
      </a>
      <p class="text-sm text-gray-500">All rights reserved © BoldUI 2021</p>
    </nav>
  </div>
</section>

Navigation (horizontal) from Acros

Tailwind CSS

Acros

Dark Top Navigation Bar with Logo, Links, and Search

A horizontal dark navigation bar with the Acros logo and wordmark, four text links (About, Company, Services, Testimonials), and a search input with a magnifying glass icon aligned to the right. The layout places brand and links on the left with search on the right.

<section x-data="{ mobileNavOpen: false }">
  <nav class="px-4 sm:px-10 py-4 bg-gray-900">
    <div class="flex items-center justify-between">
      <div class="w-auto">
        <div class="flex flex-wrap items-center">
          <div class="w-auto mr-14">
            <a class="inline-block" href="#">
              <img src="acros-assets/logo/logo-acros-white.svg" alt="">
            </a>
          </div>
          <div class="w-auto hidden lg:block">
            <ul class="flex items-center">
              <li class="font-heading mr-12 text-white hover:text-gray-200"><a href="#">About</a></li>
              <li class="font-heading mr-12 text-white hover:text-gray-200"><a href="#">Company</a></li>
              <li class="font-heading mr-12 text-white hover:text-gray-200"><a href="#">Services</a></li>
              <li class="font-heading mr-12 text-white hover:text-gray-200"><a href="#">Testimonials</a></li>
            </ul>
          </div>
        </div>
      </div>
      <div class="w-auto">
        <div class="flex flex-wrap">
          <div class="w-auto hidden lg:block">
            <div class="relative">
              <a class="absolute right-5 top-1/2 transform -translate-y-1/2" href="#">
                <svg width="18" height="18" viewBox="0 0 18 18" fill="none" xmlns="http://www.w3.org/2000/svg">
                  <path d="M13.8 13.8L17 17M15.9333 8.46667C15.9333 12.5904 12.5904 15.9333 8.46667 15.9333C4.34294 15.9333 1 12.5904 1 8.46667C1 4.34294 4.34294 1 8.46667 1C12.5904 1 15.9333 4.34294 15.9333 8.46667Z" stroke="white" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"></path>
                </svg>
              </a>
              <input class="px-4 pr-12 w-72 h-14 text-gray-300 placeholder-gray-300 bg-gray-800 outline-none" type="text" placeholder="Search here">
            </div>
          </div>
          <div class="w-auto lg:hidden">
            <button x-on:click="mobileNavOpen = !mobileNavOpen" class="inline-flex w-14 h-14 justify-center items-center bg-gray-500 hover:bg-gray-600 rounded-full">
              <svg width="20" height="10" viewBox="0 0 20 10" fill="none" xmlns="http://www.w3.org/2000/svg">
                <path d="M19 9H1M19 1H1" stroke="white" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"></path>
              </svg>
            </button>
          </div>
        </div>
      </div>
    </div>
  </nav>
  <div :class="{'block': mobileNavOpen, 'hidden': !mobileNavOpen}" class="hidden fixed top-0 left-0 bottom-0 w-5/6 max-w-sm z-50">
    <div x-on:click="mobileNavOpen = !mobileNavOpen" class="fixed inset-0 backdrop-blur-xl backdrop-filter bg-gray-900 bg-opacity-80"></div>
    <nav class="relative pt-7 pb-8 bg-white h-full overflow-y-auto">
      <div class="flex flex-col px-6 h-full">
        <a class="inline-block ml-4 mb-7" href="#">
          <img src="acros-assets/logo/logo-acros-black.svg" alt="">
        </a>
        <ul class="w-full mb-auto pb-16">
          <li><a class="font-heading block text-base font-medium py-4 px-6 hover:bg-green-50 rounded-sm" href="#">Home</a></li>
          <li><a class="font-heading block text-base py-4 px-6 hover:bg-green-50 rounded-sm" href="#">About</a></li>
          <li><a class="font-heading block text-base py-4 px-6 hover:bg-green-50 rounded-sm" href="#">Company</a></li>
          <li><a class="font-heading block text-base py-4 px-6 hover:bg-green-50 rounded-sm" href="#">Services</a></li>
          <li><a class="font-heading block text-base py-4 px-6 hover:bg-green-50 rounded-sm" href="#">Testimonials</a></li>
          <li><a class="font-heading block text-base py-4 px-6 hover:bg-green-50 rounded-sm" href="#">Contact</a></li>
        </ul>
        <div class="w-full">
          <a class="block w-full py-4 px-4 mb-4 text-center font-heading font-medium text-base hover:text-green-500 border border-gray-900 hover:border-green-500 rounded-sm transition duration-200" href="#">Log in</a><a class="block w-full py-4 px-4 mb-8 text-center font-heading font-medium text-base text-white bg-green-500 hover:bg-green-600 border border-green-500 hover:border-green-600 rounded-sm transition duration-200" href="#">Sign up</a>
          <p class="pl-2 text-sm">2022 © Shuffle</p>
        </div>
      </div>
    </nav>
  </div>
</section>

Navigation (horizontal) from Bendis

Tailwind CSS

Bendis

Bendis Blue Top Navigation Bar with Sign In and Sign Up

A horizontal navigation bar on a solid blue background with the Bendis logo and wordmark on the left, centered links for About, Company, Services, and Testimonials, and Sign in and Sign up links on the right. It is a single-row header with no visible search, avatars, or dropdown indicators.

<section class="py-8 px-4 lg:px-10 bg-blue-800" x-data="{ mobileNavOpen: false }">
  <nav class="relative">
    <div class="flex justify-between items-center">
      <a class="text-xl text-white font-semibold" href="#">
        <img class="h-7" src="bendis-assets/logos/bendis-light.svg" alt="" width="auto">
      </a>
      <div class="lg:hidden">
        <button x-on:click="mobileNavOpen = !mobileNavOpen" class="flex items-center p-3 rounded">
          <svg class="text-white block h-4 w-4" viewBox="0 0 20 20" xmlns="http://www.w3.org/2000/svg" fill="currentColor">
            <title>Mobile menu</title>
            <path d="M0 3h20v2H0V3zm0 6h20v2H0V9zm0 6h20v2H0v-2z"></path>
          </svg>
        </button>
      </div>
      <ul class="hidden absolute top-1/2 left-1/2 transform -translate-y-1/2 -translate-x-1/2 lg:flex lg:w-auto lg:space-x-10">
        <li><a class="text-white font-semibold hover:text-blue-50" href="#">About</a></li>
        <li><a class="text-white font-semibold hover:text-blue-50" href="#">Company</a></li>
        <li><a class="text-white font-semibold hover:text-blue-50" href="#">Services</a></li>
        <li><a class="text-white font-semibold hover:text-blue-50" href="#">Testimonials</a></li>
      </ul>
      <div class="hidden lg:block"><a class="inline-block px-4 text-white hover:text-blue-50 font-semibold" href="#">Sign in</a><a class="inline-block px-4 text-white hover:text-blue-50 font-semibold" href="#">Sign up</a></div>
    </div>
  </nav>
  <div :class="{'block': mobileNavOpen, 'hidden': !mobileNavOpen}" class="hidden fixed top-0 left-0 bottom-0 w-5/6 max-w-sm z-50">
    <div x-on:click="mobileNavOpen = !mobileNavOpen" class="fixed inset-0 bg-blue-800 opacity-90"></div>
    <nav class="relative flex flex-col py-8 w-full h-full bg-white border-r overflow-y-auto">
      <div class="flex items-center mb-16 pr-6">
        <a class="ml-16 mr-auto text-xl text-blue-800 font-semibold leading-none" href="#">
          <img class="h-7" src="bendis-assets/logos/bendis-blue.svg" alt="" width="auto">
        </a>
      </div>
      <div>
        <ul>
          <li class="mb-1"><a class="block pl-16 py-5 font-semibold text-blue-800 hover:bg-blue-50 rounded" href="#">About</a></li>
          <li class="mb-1"><a class="block pl-16 py-5 font-semibold text-blue-800 hover:bg-blue-50 rounded" href="#">Company</a></li>
          <li class="mb-1"><a class="block pl-16 py-5 font-semibold text-blue-800 hover:bg-blue-50 rounded" href="#">Services</a></li>
          <li class="mb-1"><a class="block pl-16 py-5 font-semibold text-blue-800 hover:bg-blue-50 rounded" href="#">Testimonials</a></li>
        </ul>
      </div>
      <div class="mt-auto px-10">
        <div class="pt-6"><a class="block mb-2 py-4 text-center text-blue-800 font-semibold" href="#">Sign in</a><a class="block py-4 text-center text-blue-800 leading-normal uppercase border-2 border-blue-800 hover:bg-blue-50 font-semibold" href="#">Sign Up</a></div>
        <p class="mt-6 mb-4 text-sm text-center text-blue-400">
          <span>© 2021 All rights reserved © Wireframes Corporation 2021</span>
        </p>
      </div>
    </nav>
  </div>
</section>

Your next website starts here

Design with AI and generate multiple website concepts in minutes. Make it yours with Shuffle: tweak every detail in a visual editor.

Start with Multi-AI Designer

A landing page for a specialty coffee roastery|

Claude

GPT

Gemini

Describe your idea and compare designs from multiple AI models side by side. Try AI Design

Start with Visual Editor

Components Navigations Headers Features Pricing Footers

Header

Build from 13,400+ UI components and templates, then customize every detail. Try Visual Editor

EXPORT CODE TO THE TECH YOU LOVE

Next.js

Tailwind CSS

shadcn/ui

Laravel

WordPress

Shopify

Next.js

Tailwind CSS

shadcn/ui

Laravel

WordPress

Shopify

Navigation (horizontal) from Metis

Tailwind CSS

Metis

Metis Logo Wordmark on White Background

A centered brand lockup showing a blue rounded-square icon with white abstract mark next to the bold dark wordmark 'Metis' on a plain white background. It has no interactive controls or navigation and functions only as a logo or brand identifier.

<section>
  <div class="container px-4 mx-auto">
    <nav class="flex items-center py-6">
      <a class="block mx-auto text-3xl font-semibold leading-none" href="#">
        <img class="h-10" src="metis-assets/logos/metis/metis.svg" alt="" width="auto">
      </a>
    </nav>
  </div>
</section>

Navigation (horizontal) from Shuffle UX

Tailwind CSS

Shuffle UX

Slate Blue Navigation Bar with Logo, Links, and Search

A horizontal top navigation bar on a slate blue background, with the Shuffle UX logo and wordmark at left, centered text links for About, Company, Services, and Testimonials, and a search input with a magnifier icon at right. The layout is a single horizontal row with minimal styling.

<nav class="px-10 py-8 bg-gray-500" x-data="{ mobileNavOpen: false }">
  <div class="flex justify-between items-center">
    <a class="text-white text-2xl leading-none" href="#">
      <img class="h-8" src="mockup-assets/logos/shuffle-ux-light.svg" alt="" width="auto">
    </a>
    <div class="lg:hidden">
      <button x-on:click="mobileNavOpen = !mobileNavOpen" class="block text-gray-50 hover:text-gray-200 focus:outline-none">
        <svg class="h-4 w-4" fill="currentColor " viewBox="0 0 20 20" xmlns="http://www.w3.org/2000/svg">
          <title>Mobile menu</title>
          <path d="M0 3h20v2H0V3zm0 6h20v2H0V9zm0 6h20v2H0v-2z"></path>
        </svg>
      </button>
    </div>
    <ul class="hidden lg:flex lg:mx-auto lg:items-center lg:w-auto lg:space-x-10">
      <li><a class="text-sm text-gray-50 hover:text-gray-200" href="#">About</a></li>
      <li><a class="text-sm text-gray-50 hover:text-gray-200" href="#">Company</a></li>
      <li><a class="text-sm text-gray-50 hover:text-gray-200" href="#">Services</a></li>
      <li><a class="text-sm text-gray-50 hover:text-gray-200" href="#">Testimonials</a></li>
    </ul>
    <div class="hidden lg:flex">
      <input class="inline-block px-4 py-3 text-sm text-gray-50 placeholder-gray-50 font-semibold bg-gray-400 border border-transparent rounded-l" placeholder="Search">
      <button class="px-2 rounded-r bg-gray-400">
        <svg class="text-gray-50 w-4 h-4" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke="currentColor">
          <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M21 21l-6-6m2-5a7 7 0 11-14 0 7 7 0 0114 0z"></path>
        </svg>
      </button>
    </div>
  </div>
  <div :class="{'block': mobileNavOpen, 'hidden': !mobileNavOpen}" class="hidden fixed top-0 left-0 bottom-0 w-5/6 max-w-sm z-50">
    <div x-on:click="mobileNavOpen = !mobileNavOpen" class="fixed inset-0 bg-gray-800 opacity-25"></div>
    <nav class="relative flex flex-col py-6 px-6 w-full h-full bg-white border-r overflow-y-auto">
      <div class="flex items-center mb-8">
        <a class="mr-auto text-2xl font-semibold leading-none" href="#">
          <img class="h-8" src="mockup-assets/logos/shuffle-ux.svg" alt="" width="auto">
        </a>
        <button x-on:click="mobileNavOpen = !mobileNavOpen">
          <svg class="h-6 w-6 text-gray-400 cursor-pointer hover:text-gray-500" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke="currentColor">
            <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M6 18L18 6M6 6l12 12"></path>
          </svg>
        </button>
      </div>
      <div>
        <ul>
          <li class="mb-1"><a class="block p-4 text-sm font-semibold text-gray-900 hover:bg-gray-50 rounded" href="#">About</a></li>
          <li class="mb-1"><a class="block p-4 text-sm font-semibold text-gray-900 hover:bg-gray-50 rounded" href="#">Company</a></li>
          <li class="mb-1"><a class="block p-4 text-sm font-semibold text-gray-900 hover:bg-gray-50 rounded" href="#">Services</a></li>
          <li class="mb-1"><a class="block p-4 text-sm font-semibold text-gray-900 hover:bg-gray-50 rounded" href="#">Testimonials</a></li>
        </ul>
      </div>
      <div class="mt-auto">
        <p class="mt-6 mb-4 text-sm text-center text-gray-400">
          <span>© 2021 All rights reserved.</span>
        </p>
      </div>
    </nav>
  </div>
</nav>

Navigation (horizontal) from Cronos

Tailwind CSS

Cronos

Cronos logo wordmark on white background

A small centered brand lockup showing a teal circular monogram mark beside the black sans-serif wordmark 'Cronos' on a plain white background. It is a logo element rather than an interactive navigation or marketing section.

<nav class="py-8">
    <div class="container mx-auto px-4">
        <div class="flex justify-center">
            <a class="inline-block" href="#">
              <img class="h-8" src="cronos-assets/logos/cronos-logo.svg" alt="alt">
            </a>
        </div>
    </div>
</nav>

Navigation (horizontal) from NEUB

Tailwind CSS

NEUB

Yellow Neubrutalist Navigation Bar with Logo and CTA

A horizontal top navigation bar on a solid yellow background with a bold NEUB wordmark on the left, four bordered menu items (About, Work, Services, Contact) centered, and a white outlined Get Started button with a hard black offset shadow on the right. A thick black rule runs along the bottom edge.

<section x-data="{ mobileNavOpen: false }" class="bg-yellow-300 relative pb-5 overflow-hidden">
    <div class="relative container px-6 mx-auto">
        <nav class="relative flex justify-between items-center py-8 border-b-4 border-black">
            <a href="#">
                <img src="neub-assets/logos/neub-logo.png" alt="" class="h-7">
            </a>
            <div class="lg:hidden">
                <button x-on:click="mobileNavOpen = !mobileNavOpen" class="block w-12 h-12 bg-white hover:bg-pink-500 transition-colors border-2 border-black">
                    <svg class="w-6 h-6 mx-auto" fill="currentColor" viewBox="0 0 20 20">
                        <path d="M0 3h20v2H0V3zm0 6h20v2H0V9zm0 6h20v2H0v-2z"></path>
                    </svg>
                </button>
            </div>
            <ul class="absolute top-1/2 left-1/2 -translate-x-1/2 -translate-y-1/2 hidden lg:flex items-center space-x-0">
                <li><a class="block px-6 py-4 text-lg font-bold hover:bg-pink-500 hover:text-white transition-all border-2 border-black border-r-0" href="#">ABOUT</a></li>
                <li><a class="block px-6 py-4 text-lg font-bold hover:bg-pink-500 hover:text-white transition-all border-2 border-black border-r-0" href="#">WORK</a></li>
                <li><a class="block px-6 py-4 text-lg font-bold hover:bg-pink-500 hover:text-white transition-all border-2 border-black border-r-0" href="#">SERVICES</a></li>
                <li><a class="block px-6 py-4 text-lg font-bold hover:bg-pink-500 hover:text-white transition-all border-2 border-black" href="#">CONTACT</a></li>
            </ul>
            <div class="hidden lg:block">
                <button class="px-8 py-4 bg-white hover:bg-pink-500 text-black hover:text-white font-black font-heading text-lg border-4 border-black transition-all hover:translate-x-1 hover:translate-y-1 shadow-[8px_8px_0px_0px_#000000] hover:shadow-[4px_4px_0px_0px_#000000]">
                    GET STARTED
                </button>
            </div>
        </nav>
    </div>
    <div :class="{'block': mobileNavOpen, 'hidden': !mobileNavOpen}" class="navbar-menu fixed top-0 left-0 bottom-0 w-full max-w-sm z-50 transition-duration-300 ease-in-out lg:hidden">
        <div x-on:click="mobileNavOpen = false" class="fixed inset-0 bg-black bg-opacity-50"></div>
        <nav class="relative w-full h-full bg-white border-r-4 border-black overflow-y-auto">
            <div class="flex items-center justify-between p-6 border-b-4 border-black">
                <a href="#">
                    <img src="neub-assets/logos/neub-logo.png" alt="" class="h-6">
                </a>
                <button x-on:click="mobileNavOpen = false" class="w-10 h-10 bg-pink-500 hover:bg-yellow-300 border-2 border-black">
                    <svg class="w-5 h-5 mx-auto" fill="currentColor" viewBox="0 0 24 24">
                        <path d="M6 18L18 6M6 6l12 12" stroke="currentColor" stroke-width="2" stroke-linecap="round">
                        </path>
                    </svg>
                </button>
            </div>
            <div class="p-6">
                <ul class="space-y-0">
                    <li><a class="block p-4 text-xl font-black font-heading hover:bg-pink-500 hover:text-white border-2 border-black border-b-0" href="#">ABOUT</a></li>
                    <li><a class="block p-4 text-xl font-black font-heading hover:bg-pink-500 hover:text-white border-2 border-black border-b-0" href="#">WORK</a></li>
                    <li><a class="block p-4 text-xl font-black font-heading hover:bg-pink-500 hover:text-white border-2 border-black border-b-0" href="#">SERVICES</a></li>
                    <li><a class="block p-4 text-xl font-black font-heading hover:bg-pink-500 hover:text-white border-2 border-black" href="#">CONTACT</a></li>
                </ul>
                <div class="mt-8">
                    <a href="#" class="w-full px-6 py-4 bg-yellow-300 hover:bg-pink-500 text-black hover:text-white font-black font-heading text-lg border-4 border-black transition-all hover:translate-x-1 hover:translate-y-1 shadow-[6px_6px_0px_0px_#000000] hover:shadow-[3px_3px_0px_0px_#000000]">
                        GET STARTED
                    </a>
                </div>
            </div>
        </nav>
    </div>
</section>

Navigation (horizontal) from Casper

Tailwind CSS

Casper

Casper Site Navigation Bar with Sign In and Sign Up

A light horizontal navigation header with the Casper logo on the left, text Sign In link and a rounded purple Sign Up button on the right, plus a hamburger menu icon. It provides primary site navigation and authentication entry points.

<section x-data="{ mobileNavOpen: false }">
  <nav class="bg-white py-7">
    <div class="container mx-auto px-4">
      <div class="relative flex items-center justify-between">
        <a class="inline-block" href="#">
          <img class="h-10" src="casper-assets/logos/casper-logo.svg" alt="">
        </a>
        <div class="flex items-center justify-end">
          <div class="hidden lg:block mr-10"><a class="inline-flex py-2 px-4 mr-4 items-center justify-center text-sm font-medium uppercase text-violet-900 hover:text-violet-500" href="#">SIGN IN</a><a class="inline-flex h-11 py-2 px-4 items-center justify-center text-sm font-medium uppercase text-black hover:text-white bg-violet-500 hover:bg-violet-600 transition duration-200 rounded-full" href="#">SIGN UP</a></div>
          <button x-on:click="mobileNavOpen = !mobileNavOpen" class="text-black hover:text-violet-500">
            <svg width="32" height="32" viewBox="0 0 32 32" fill="none" xmlns="http://www.w3.org/2000/svg">
              <path d="M3 16H29" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"></path>
              <path d="M3 8H29" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"></path>
              <path d="M20 24L29 24" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"></path>
            </svg>
          </button>
        </div>
      </div>
    </div>
  </nav>
  <div :class="{'block': mobileNavOpen, 'hidden': !mobileNavOpen}" class="hidden fixed top-0 left-0 bottom-0 w-5/6 max-w-md z-50">
    <div x-on:click="mobileNavOpen = !mobileNavOpen" class="fixed inset-0 bg-violet-900 opacity-20"></div>
    <nav class="relative flex flex-col py-7 px-10 w-full h-full bg-white overflow-y-auto">
      <div class="flex mb-auto items-center">
        <a class="inline-block mr-auto" href="#">
          <img class="h-10" src="casper-assets/logos/casper-logo.svg" alt="">
        </a>
        <button x-on:click="mobileNavOpen = !mobileNavOpen">
          <svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
            <path d="M6 18L18 6M6 6L18 18" stroke="#111827" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"></path>
          </svg>
        </button>
      </div>
      <div class="py-12 mb-auto">
        <ul class="flex-col">
          <li class="mb-6"><a class="inline-block text-base text-black font-medium uppercase" href="#">FEATURED</a></li>
          <li class="mb-6"><a class="inline-block text-base text-black font-medium uppercase" href="#">SOLUTIONS</a></li>
          <li class="mb-6"><a class="inline-block text-base text-black font-medium uppercase" href="#">PRODUCTS</a></li>
          <li><a class="inline-block text-base text-black font-medium uppercase" href="#">ARTICLES</a></li>
        </ul>
      </div>
      <div><a class="flex py-2 px-4 mb-4 items-center justify-center text-sm font-medium uppercase text-violet-900 hover:text-violet-500" href="#">SIGN IN</a><a class="flex h-11 py-2 px-4 items-center justify-center text-sm font-medium uppercase text-black hover:text-white bg-violet-500 hover:bg-violet-600 transition duration-200 rounded-full" href="#">SIGN UP</a></div>
    </nav>
  </div>
</section>

Navigation (horizontal) from Dashy

Tailwind CSS

Dashy

Dashboard Top Navigation Bar with Tabs and Trial Badge

A horizontal top navigation bar for an application dashboard, showing a circular logo, text tabs (Dashboard, Tweets, Growth, Spaces, Followers), a gradient "14 days left" status badge, a user avatar, and a dropdown chevron. The bar uses a light background with minimal styling.

<section class="overflow-hidden" x-data="{ mobileNavOpen: false, menu: '' }" x-init="menu = $refs.menu1.textContent">
  <nav class="flex items-center justify-between py-3.5 px-7 bg-neutral-50">
    <div class="w-full xl:w-auto px-2 xl:mr-10">
      <div class="flex items-center justify-between">
        <a class="inline-flex items-center h-7" href="#">
          <img src="dashy-assets/logos/dashy-circle2-logo.svg" alt="">
        </a>
        <div class="xl:hidden">
          <button x-on:click="mobileNavOpen = !mobileNavOpen" class="text-gray-400 hover:text-gray-300 focus:outline-none">
            <svg width="20" height="12" viewBox="0 0 20 12" fill="none" xmlns="http://www.w3.org/2000/svg">
              <path d="M1 2H19C19.2652 2 19.5196 1.89464 19.7071 1.70711C19.8946 1.51957 20 1.26522 20 1C20 0.734784 19.8946 0.48043 19.7071 0.292893C19.5196 0.105357 19.2652 0 19 0H1C0.734784 0 0.48043 0.105357 0.292893 0.292893C0.105357 0.48043 0 0.734784 0 1C0 1.26522 0.105357 1.51957 0.292893 1.70711C0.48043 1.89464 0.734784 2 1 2ZM19 10H1C0.734784 10 0.48043 10.1054 0.292893 10.2929C0.105357 10.4804 0 10.7348 0 11C0 11.2652 0.105357 11.5196 0.292893 11.7071C0.48043 11.8946 0.734784 12 1 12H19C19.2652 12 19.5196 11.8946 19.7071 11.7071C19.8946 11.5196 20 11.2652 20 11C20 10.7348 19.8946 10.4804 19.7071 10.2929C19.5196 10.1054 19.2652 10 19 10ZM19 5H1C0.734784 5 0.48043 5.10536 0.292893 5.29289C0.105357 5.48043 0 5.73478 0 6C0 6.26522 0.105357 6.51957 0.292893 6.70711C0.48043 6.89464 0.734784 7 1 7H19C19.2652 7 19.5196 6.89464 19.7071 6.70711C19.8946 6.51957 20 6.26522 20 6C20 5.73478 19.8946 5.48043 19.7071 5.29289C19.5196 5.10536 19.2652 5 19 5Z" fill="currentColor"></path>
            </svg>
          </button>
        </div>
      </div>
    </div>
    <div class="hidden xl:block w-full md:w-auto px-2 mr-auto">
      <ul class="flex items-center">
        <li class="mr-10"><a x-ref="menu1" x-on:click.prevent="menu = $refs.menu1.textContent" :class="{'text-neutral-600': menu == $refs.menu1.textContent, 'text-neutral-400 hover:text-neutral-600': menu !== $refs.menu1.textContent}" class="text-sm font-medium text-neutral-600" href="#">Dashboard</a></li>
        <li class="mr-10"><a x-ref="menu2" x-on:click.prevent="menu = $refs.menu2.textContent" :class="{'text-neutral-600': menu == $refs.menu2.textContent}" class="text-sm font-medium text-neutral-400 hover:text-neutral-600" href="#">Tweets</a></li>
        <li class="mr-10"><a x-ref="menu3" x-on:click.prevent="menu = $refs.menu3.textContent" :class="{'text-neutral-600': menu == $refs.menu3.textContent}" class="text-sm font-medium text-neutral-400 hover:text-neutral-600" href="#">Growth</a></li>
        <li class="mr-10"><a x-ref="menu4" x-on:click.prevent="menu = $refs.menu4.textContent" :class="{'text-neutral-600': menu == $refs.menu4.textContent}" class="text-sm font-medium text-neutral-400 hover:text-neutral-600" href="#">Spaces</a></li>
        <li><a x-ref="menu5" x-on:click.prevent="menu = $refs.menu5.textContent" :class="{'text-neutral-600': menu == $refs.menu5.textContent}" class="text-sm font-medium text-neutral-400 hover:text-neutral-600" href="#">Followers</a></li>
      </ul>
    </div>
    <div class="hidden xl:block w-full md:w-auto px-2">
      <div class="md:flex items-center">
        <div class="w-full md:w-auto mb-6 md:mb-0">
          <div class="flex flex-wrap items-center">
            <a class="mr-7 px-2.5 py-1 text-xs font-medium text-white bg-gradient-purple-left focus:ring-4 focus:ring-purple-300 rounded-full" href="#">14 days left</a>
            <img class="mr-3" src="dashy-assets/images/avatar3.png" alt="">
            <a href="#">
              <svg width="12" height="7" viewBox="0 0 12 7" fill="none" xmlns="http://www.w3.org/2000/svg">
                <path d="M10.6668 1L6.00016 5.66667L1.3335 1" stroke="#0C1523" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"></path>
              </svg>
            </a>
          </div>
        </div>
      </div>
    </div>
  </nav>
  <div :class="{'block': mobileNavOpen, 'hidden': !mobileNavOpen}" class="hidden fixed top-0 left-0 bottom-0 z-50">
    <div x-on:click="mobileNavOpen = !mobileNavOpen" class="fixed z-10 top-0 left-0 w-full h-full bg-gray-800 opacity-50"></div>
    <nav class="fixed z-20 w-full h-full max-w-xss bg-white">
      <div class="flex flex-wrap items-center justify-between px-7 py-2 pb-1 border-b border-gray-200">
        <div class="w-auto">
          <a class="inline-block" href="#">
            <img src="dashy-assets/logos/dashy-logo-dark.svg" alt="">
          </a>
        </div>
        <div class="w-auto">
          <a class="text-neutral-300 hover:text-neutral-400" href="#">
            <svg width="23" height="22" viewBox="0 0 23 22" fill="none" xmlns="http://www.w3.org/2000/svg">
              <path d="M6.97944 7.71965C6.68654 8.01254 6.68654 8.48742 6.97944 8.78031C7.27233 9.0732 7.7472 9.0732 8.0401 8.78031L6.97944 7.71965ZM11.1764 4.58331L11.7068 4.05298C11.4139 3.76009 10.939 3.76009 10.6461 4.05298L11.1764 4.58331ZM14.3128 8.78031C14.6057 9.0732 15.0805 9.0732 15.3734 8.78031C15.6663 8.48742 15.6663 8.01254 15.3734 7.71965L14.3128 8.78031ZM15.3734 14.2803C15.6663 13.9874 15.6663 13.5125 15.3734 13.2196C15.0805 12.9268 14.6057 12.9268 14.3128 13.2196L15.3734 14.2803ZM11.1764 17.4166L10.6461 17.947C10.939 18.2399 11.4139 18.2399 11.7068 17.947L11.1764 17.4166ZM8.0401 13.2196C7.7472 12.9268 7.27233 12.9268 6.97944 13.2196C6.68654 13.5125 6.68654 13.9874 6.97944 14.2803L8.0401 13.2196ZM8.0401 8.78031L11.7068 5.11364L10.6461 4.05298L6.97944 7.71965L8.0401 8.78031ZM10.6461 5.11364L14.3128 8.78031L15.3734 7.71965L11.7068 4.05298L10.6461 5.11364ZM14.3128 13.2196L10.6461 16.8863L11.7068 17.947L15.3734 14.2803L14.3128 13.2196ZM11.7068 16.8863L8.0401 13.2196L6.97944 14.2803L10.6461 17.947L11.7068 16.8863Z" fill="currentColor"></path>
            </svg>
          </a>
        </div>
      </div>
      <div class="py-6 h-full overflow-y-auto">
        <div class="flex flex-col flex-wrap px-7 -m-2.5" x-data="{ outerDropdown: false }">
          <div class="w-auto p-2.5">
            <a x-on:click.prevent="outerDropdown = !outerDropdown" class="flex flex-wrap items-center" href="#">
              <img class="mr-3" src="dashy-assets/images/home-2.svg" alt="">
              <p class="hover:text-neutral-700 font-medium">Dashboard</p>
            </a>
          </div>
          <div :class="{'hidden': outerDropdown }" class="w-auto p-2.5" x-data="{ dropdown: false }">
            <a x-on:click.prevent="dropdown = !dropdown" class="flex flex-wrap items-center mb-3.5" href="#">
              <img class="mr-3" src="dashy-assets/images/gear.svg" alt="">
              <p class="hover:text-neutral-700 font-medium">People &amp; Settings</p>
            </a>
            <div class="ml-8" :class="{'hidden': dropdown}">
              <div class="flex flex-wrap -m-1">
                <div class="w-auto p-1"><a class="font-medium text-neutral-500 hover:text-neutral-600" href="#">Help with Sketch</a></div>
                <div class="w-auto p-1"><a class="font-medium text-neutral-500 hover:text-neutral-600" href="#">All Documents</a></div>
                <div class="w-auto p-1"><a class="font-medium text-neutral-500 hover:text-neutral-600" href="#">Shared with Me</a></div>
                <div class="w-auto p-1"><a class="font-medium text-neutral-500 hover:text-neutral-600" href="#">Libraries</a></div>
              </div>
            </div>
          </div>
          <div class="w-auto p-2.5">
            <a class="flex flex-wrap items-center" href="#">
              <img class="mr-3" src="dashy-assets/images/loader-rec.svg" alt="">
              <p class="hover:text-neutral-700 font-medium">Discover</p>
            </a>
          </div>
          <div class="w-auto p-2.5">
            <a class="flex flex-wrap items-center" href="#">
              <img class="mr-3" src="dashy-assets/images/lifebuoy.svg" alt="">
              <p class="hover:text-neutral-700 font-medium">Help with Sketch</p>
            </a>
          </div>
          <div class="w-auto p-2.5">
            <a class="flex flex-wrap items-center" href="#">
              <img class="mr-3" src="dashy-assets/images/folder-open.svg" alt="">
              <p class="hover:text-neutral-700 font-medium">All Documents</p>
            </a>
          </div>
          <div class="w-auto p-2.5">
            <a class="flex flex-wrap items-center" href="#">
              <img class="mr-3" src="dashy-assets/images/user-circle.svg" alt="">
              <p class="hover:text-neutral-700 font-medium">Shared with Me</p>
            </a>
          </div>
          <div class="w-auto p-2.5">
            <a class="flex flex-wrap items-center" href="#">
              <img class="mr-3" src="dashy-assets/images/link-2-rec.svg" alt="">
              <p class="hover:text-neutral-700 font-medium">Libraries</p>
            </a>
          </div>
          <div class="w-auto p-2.5">
            <a class="flex flex-wrap items-center" href="#">
              <img class="mr-3" src="dashy-assets/images/list-unordered-3-rec.svg" alt="">
              <p class="hover:text-neutral-700 font-medium">My Drafts</p>
            </a>
          </div>
          <div class="w-auto p-2.5">
            <a class="flex flex-wrap items-center" href="#">
              <img class="mr-3" src="dashy-assets/images/trash.svg" alt="">
              <p class="hover:text-neutral-700 font-medium">Trash</p>
            </a>
          </div>
        </div>
      </div>
    </nav>
  </div>
</section>

Navigation (horizontal) from Mirga

Tailwind CSS

Mirga

Mirga Top Navigation Bar with Login and Sign Up Free

A horizontal top navigation bar on a lavender background with a hamburger menu icon on the left, the Mirga logo centered, and Login text link plus an outlined Sign up free button on the right. It provides primary site navigation and account entry actions.

<section x-data="{ mobileNavOpen: false }" class="overflow-hidden">
  <nav class="relative bg-purple-50 px-10 lg:px-32 py-7 lg:py-4">
    <div class="flex items-center justify-between">
      <button x-on:click="mobileNavOpen = !mobileNavOpen" class="inline-block order-1 lg:order-none">
        <svg xmlns="http://www.w3.org/2000/svg" width="34" height="14" viewBox="0 0 34 14" fill="none"><g clip-path="url(#clip0_231_4713)"><rect width="34" height="3" rx="1.5" fill="#19191B"></rect><rect y="11" width="34" height="3" rx="1.5" fill="#19191B"></rect></g><defs><clipPath id="clip0_231_4713"><rect width="34" height="14" fill="white"></rect></clipPath></defs></svg>
      </button>
      <a class="lg:absolute lg:top-1/2 lg:left-1/2 lg:transform lg:-translate-y-1/2 lg:-translate-x-1/2 pr-4 lg:pr-0" href="#">
        <img class="h-10" src="mirga-assets/images/logos/mirga-dark-logo3.svg" alt="">
      </a>
      <div class="hidden lg:flex items-center gap-5"><a class="inline-flex justify-center items-center text-center h-16 p-5 font-semibold tracking-tight text-lg focus:text-neutral-900 bg-transparent hover:bg-transparent focus:bg-transparent border border-transparent rounded-lg focus:ring-4 focus:ring-transparent transition duration-200" href="#">Login</a><a class="inline-flex justify-center items-center text-center h-16 p-5 font-semibold tracking-tight text-xl hover:text-white focus:text-white bg-transparent hover:bg-neutral-900 focus:bg-neutral-900 border border-neutral-900 rounded-lg focus:ring-4 focus:ring-neutral-400 transition duration-200" href="#">Sign up free</a></div>
    </div>
  </nav>
  <div :class="{'block': mobileNavOpen, 'hidden': !mobileNavOpen}" class="hidden fixed top-0 left-0 bottom-0 w-5/6 max-w-xs z-50">
    <div x-on:click="mobileNavOpen = !mobileNavOpen" class="fixed inset-0 bg-black opacity-20"></div>
    <nav class="relative p-8 w-full h-full bg-white overflow-y-auto">
      <div class="flex flex-col justify-between h-full">
        <div class="flex items-center justify-between mb-16">
          <a class="pr-4" href="#">
            <img class="h-10" src="mirga-assets/images/logos/mirga-dark-logo3.svg" alt="">
          </a>
          <button x-on:click="mobileNavOpen = !mobileNavOpen">
            <svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
              <path d="M6 18L18 6M6 6L18 18" stroke="#252E4A" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"></path>
            </svg>
          </button>
        </div>
        <div class="flex flex-col items-center gap-2"><a class="inline-flex justify-center items-center text-center w-full h-16 p-5 font-semibold tracking-tight text-lg focus:text-neutral-900 bg-transparent hover:bg-transparent focus:bg-transparent border border-transparent rounded-lg focus:ring-4 focus:ring-transparent transition duration-200" href="#">Login</a><a class="inline-flex justify-center items-center text-center w-full h-16 p-5 font-semibold tracking-tight text-xl hover:text-white focus:text-white bg-transparent hover:bg-neutral-900 focus:bg-neutral-900 border border-neutral-900 rounded-lg focus:ring-4 focus:ring-neutral-400 transition duration-200" href="#">Sign up free</a></div>
      </div>
    </nav>
  </div>
</section>

Navigation (horizontal) from Vista

Tailwind CSS

Vista

Dark Top Navigation Bar with Vista Logo and Sign In

A horizontal top navigation bar on a dark maroon background, with the Vista logo on the left, a rounded pill-shaped menu containing Home, Features, Pricing, About, and Contact in the center, and a Sign in link with a chevron on the right. It is a standard site header for navigating a marketing website.

<section x-data="{ mobileNavOpen: false }">
    <nav class="py-5 bg-darkPink-900">
        <div class="container mx-auto px-4">
            <div class="flex items-center justify-between">
                <a href="#">
                    <img src="vista-assets/images/logos/vista-logo.svg" alt="">
                </a>
                <div class="hidden lg:flex gap-2 p-1 rounded-full bg-white bg-opacity-10">
                    <a href="#" class="px-3 py-2 rounded-full text-white text-sm hover:bg-white hover:bg-opacity-20 transition duration-200">Home</a>
                    <a href="#" class="px-3 py-2 rounded-full text-white text-sm hover:bg-white hover:bg-opacity-20 transition duration-200">Features</a>
                    <a href="#" class="px-3 py-2 rounded-full text-white text-sm hover:bg-white hover:bg-opacity-20 transition duration-200">Pricing</a>
                    <a href="#" class="px-3 py-2 rounded-full text-white text-sm hover:bg-white hover:bg-opacity-20 transition duration-200">About</a>
                    <a href="#" class="px-3 py-2 rounded-full text-white text-sm hover:bg-white hover:bg-opacity-20 transition duration-200">Contact</a>
                </div>
                <a href="#" class="hidden lg:flex items-center gap-2 text-white hover:text-pink-500 transition duration-200">
                    <span class="text-sm font-medium">Sign in</span>
                    <svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 16 16" fill="none">
                        <path d="M5.5 3L10.5 8L5.5 13" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"></path>
                    </svg>
                </a>
                <button class="lg:hidden" x-on:click="mobileNavOpen = !mobileNavOpen">
                    <svg width="51" height="51" viewBox="0 0 56 56" fill="none" xmlns="http://www.w3.org/2000/svg">
                        <rect width="56" height="56" rx="28" fill="white"></rect>
                        <path d="M37 32H19M37 24H19" stroke="black" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"></path>
                    </svg>
                </button>
            </div>
        </div>
    </nav>
    <div :class="{ 'hidden': !mobileNavOpen, 'block': mobileNavOpen }" class="hidden fixed top-0 left-0 bottom-0 w-5/6 max-w-xs z-50">
        <div x-on:click="mobileNavOpen = !mobileNavOpen" class="fixed inset-0 bg-black opacity-20"></div>
        <nav class="relative p-8 w-full h-full bg-white overflow-y-auto">
            <div class="flex items-center justify-between">
                <a href="#" class="inline-block">
                    <img src="vista-assets/images/logos/vista-logo-dark.svg" alt="">
                </a>
                <button x-on:click="mobileNavOpen = !mobileNavOpen">
                    <svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
                      <path d="M6 18L18 6M6 6L18 18" stroke="#111827" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"></path>
                    </svg>
                </button>
            </div>
            <ul class="flex flex-col gap-12 py-12 my-12">
                <li>
                    <a href="#" class="text-sm font-medium">Home</a>
                </li>
                <li>
                    <a href="#" class="text-sm font-medium">Features</a>
                </li>
                <li>
                    <a href="#" class="text-sm font-medium">Pricing</a>
                </li>
                <li>
                    <a href="#" class="text-sm font-medium">About</a>
                </li>
                <li>
                    <a href="#" class="text-sm font-medium">Contact</a>
                </li>
            </ul>
            <div class="text-center">
                <a href="#" class="inline-flex items-center gap-2 text-black hover:text-opacity-80 transition duration-200">
                    <span class="text-sm font-medium">Sign in</span>
                    <svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 16 16" fill="none">
                        <path d="M5.5 3L10.5 8L5.5 13" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"></path>
                    </svg>
                </a>
            </div>
        </nav>
    </div>
</section>

Navigation (horizontal) from Flow

Tailwind CSS

Flow

Flow site navigation bar with logo, links, and login button

A horizontal top navigation bar showing the Flow logo with a lime icon, text links for About us, Team, Solutions, and Blog, and an outlined Login button at the right. A thin lavender rule runs along the bottom edge on a white background.

<section x-data="{ mobileNavOpen: false }" class="overflow-hidden">
        <nav class="mx-4 py-6 border-b">
            <div class="container mx-auto px-4">
                <div class="relative flex items-center justify-between">
                    <div class="flex items-center">
                        <a href="#" class="inline-block">
                            <img class="h-8" src="flow-assets/logos/flow-logo.svg" alt="">
                        </a>
                        <ul class="hidden md:flex ml-10">
                            <li class="mr-8"><a class="inline-block text-teal-900 hover:text-teal-700 font-medium" href="#">About us</a></li>
                            <li class="mr-8"><a class="inline-block text-teal-900 hover:text-teal-700 font-medium" href="#">Team</a></li>
                            <li class="mr-8"><a class="inline-block text-teal-900 hover:text-teal-700 font-medium" href="#">Solutions</a></li>
                            <li><a class="inline-block text-teal-900 hover:text-teal-700 font-medium" href="#">Blog</a></li>
                        </ul>
                    </div>
                    <div class="flex items-center justify-end">
                        <div class="hidden md:block">
                            <a href="#" class="inline-flex py-2.5 px-4 items-center justify-center text-sm font-medium text-teal-900 hover:text-white border border-teal-900 hover:bg-teal-900 rounded-full transition duration-200">Login</a>
                        </div>
                        <button x-on:click="mobileNavOpen = !mobileNavOpen" class="md:hidden text-teal-900 hover:text-teal-800">
                            <svg width="32" height="32" viewBox="0 0 32 32" fill="none" xmlns="http://www.w3.org/2000/svg">
                                <path d="M5.19995 23.2H26.7999" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"></path>
                                <path d="M5.19995 16H26.7999" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"></path>
                                <path d="M5.19995 8.79999H26.7999" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"></path>
                            </svg>                                                                                          
                        </button>
                    </div>
                </div>
            </div>
        </nav>
      
        <div :class="{'block': mobileNavOpen, 'hidden': !mobileNavOpen}" class="hidden fixed top-0 left-0 bottom-0 w-full xs:w-5/6 xs:max-w-md z-50">
            <div x-on:click="mobileNavOpen = !mobileNavOpen" class="fixed inset-0 bg-violet-900 opacity-20"></div>
            <nav class="relative flex flex-col py-7 px-10 w-full h-full bg-white overflow-y-auto">
                <div class="flex items-center justify-between">
                    <a href="#" class="inline-block">
                        <img class="h-8" src="flow-assets/logos/sign-logo-flow.svg" alt="">
                    </a>
                    <div class="flex items-center">
                        <a href="#" class="inline-flex py-2.5 px-4 items-center justify-center text-sm font-medium text-teal-900 hover:text-white border border-teal-900 hover:bg-teal-900 rounded-full transition duration-200">Login</a>
                        <button x-on:click="mobileNavOpen = !mobileNavOpen" class="ml-6">
                            <svg width="32" height="32" viewBox="0 0 32 32" fill="none" xmlns="http://www.w3.org/2000/svg">
                                <path d="M23.2 8.79999L8.80005 23.2M8.80005 8.79999L23.2 23.2" stroke="#1D1F1E" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"></path>
                            </svg>                            
                        </button>
                    </div>
                </div>
                <div class="pt-20 pb-12 mb-auto">
                    <ul class="flex-col">
                        <li class="mb-6">
                            <a class="inline-block text-teal-900 hover:text-teal-700 font-medium" href="#">About us</a>
                        </li>
                        <li class="mb-6">
                            <a class="inline-block text-teal-900 hover:text-teal-700 font-medium" href="#">Team</a>
                        </li>
                        <li class="mb-6">
                            <a class="inline-block text-teal-900 hover:text-teal-700 font-medium" href="#">Solutions</a>
                        </li>
                        <li>
                            <a class="inline-block text-teal-900 hover:text-teal-700 font-medium" href="#">Blog</a>
                        </li>
                    </ul>
                </div>
                <div class="flex items-center justify-between">
                    <a href="#" class="inline-flex items-center text-lg font-medium text-teal-900">
                        <span>
                            <svg width="32" height="32" viewBox="0 0 32 32" fill="none" xmlns="http://www.w3.org/2000/svg">
                                <path d="M6.4 6.39999H25.6C26.92 6.39999 28 7.47999 28 8.79999V23.2C28 24.52 26.92 25.6 25.6 25.6H6.4C5.08 25.6 4 24.52 4 23.2V8.79999C4 7.47999 5.08 6.39999 6.4 6.39999Z" stroke="#646A69" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"></path>
                                <path d="M28 8.8L16 17.2L4 8.8" stroke="#646A69" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"></path>
                            </svg>                                
                        </span>
                        <span class="ml-2">Newsletter</span>
                    </a>
                    <div class="flex items-center">
                        <a href="#" class="inline-block mr-4">
                            <svg width="20" height="20" viewBox="0 0 20 20" fill="none" xmlns="http://www.w3.org/2000/svg">
                                <g clip-path="url(#clip0_282_7847)">
                                <path d="M11.548 19.9999V10.8776H14.6087L15.0679 7.32146H11.548V5.05136C11.548 4.02209 11.8326 3.32066 13.3103 3.32066L15.1918 3.31988V0.139123C14.8664 0.0968385 13.7495 -0.000106812 12.4495 -0.000106812C9.73488 -0.000106812 7.87642 1.65686 7.87642 4.69916V7.32146H4.8064V10.8776H7.87642V19.9999H11.548Z" fill="#022C22"></path>
                                </g>
                            </svg>                                                           
                        </a>
                        <a href="#" class="inline-block mr-4">
                            <svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
                                <path d="M7.8 2H16.2C19.4 2 22 4.6 22 7.8V16.2C22 17.7383 21.3889 19.2135 20.3012 20.3012C19.2135 21.3889 17.7383 22 16.2 22H7.8C4.6 22 2 19.4 2 16.2V7.8C2 6.26174 2.61107 4.78649 3.69878 3.69878C4.78649 2.61107 6.26174 2 7.8 2ZM7.6 4C6.64522 4 5.72955 4.37928 5.05442 5.05442C4.37928 5.72955 4 6.64522 4 7.6V16.4C4 18.39 5.61 20 7.6 20H16.4C17.3548 20 18.2705 19.6207 18.9456 18.9456C19.6207 18.2705 20 17.3548 20 16.4V7.6C20 5.61 18.39 4 16.4 4H7.6ZM17.25 5.5C17.5815 5.5 17.8995 5.6317 18.1339 5.86612C18.3683 6.10054 18.5 6.41848 18.5 6.75C18.5 7.08152 18.3683 7.39946 18.1339 7.63388C17.8995 7.8683 17.5815 8 17.25 8C16.9185 8 16.6005 7.8683 16.3661 7.63388C16.1317 7.39946 16 7.08152 16 6.75C16 6.41848 16.1317 6.10054 16.3661 5.86612C16.6005 5.6317 16.9185 5.5 17.25 5.5ZM12 7C13.3261 7 14.5979 7.52678 15.5355 8.46447C16.4732 9.40215 17 10.6739 17 12C17 13.3261 16.4732 14.5979 15.5355 15.5355C14.5979 16.4732 13.3261 17 12 17C10.6739 17 9.40215 16.4732 8.46447 15.5355C7.52678 14.5979 7 13.3261 7 12C7 10.6739 7.52678 9.40215 8.46447 8.46447C9.40215 7.52678 10.6739 7 12 7ZM12 9C11.2044 9 10.4413 9.31607 9.87868 9.87868C9.31607 10.4413 9 11.2044 9 12C9 12.7956 9.31607 13.5587 9.87868 14.1213C10.4413 14.6839 11.2044 15 12 15C12.7956 15 13.5587 14.6839 14.1213 14.1213C14.6839 13.5587 15 12.7956 15 12C15 11.2044 14.6839 10.4413 14.1213 9.87868C13.5587 9.31607 12.7956 9 12 9Z" fill="currentColor"></path>
                            </svg>                                                  
                        </a>
                        <a href="#" class="inline-block">
                            <svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
                                <path d="M19 3C19.5304 3 20.0391 3.21071 20.4142 3.58579C20.7893 3.96086 21 4.46957 21 5V19C21 19.5304 20.7893 20.0391 20.4142 20.4142C20.0391 20.7893 19.5304 21 19 21H5C4.46957 21 3.96086 20.7893 3.58579 20.4142C3.21071 20.0391 3 19.5304 3 19V5C3 4.46957 3.21071 3.96086 3.58579 3.58579C3.96086 3.21071 4.46957 3 5 3H19ZM18.5 18.5V13.2C18.5 12.3354 18.1565 11.5062 17.5452 10.8948C16.9338 10.2835 16.1046 9.94 15.24 9.94C14.39 9.94 13.4 10.46 12.92 11.24V10.13H10.13V18.5H12.92V13.57C12.92 12.8 13.54 12.17 14.31 12.17C14.6813 12.17 15.0374 12.3175 15.2999 12.5801C15.5625 12.8426 15.71 13.1987 15.71 13.57V18.5H18.5ZM6.88 8.56C7.32556 8.56 7.75288 8.383 8.06794 8.06794C8.383 7.75288 8.56 7.32556 8.56 6.88C8.56 5.95 7.81 5.19 6.88 5.19C6.43178 5.19 6.00193 5.36805 5.68499 5.68499C5.36805 6.00193 5.19 6.43178 5.19 6.88C5.19 7.81 5.95 8.56 6.88 8.56ZM8.27 18.5V10.13H5.5V18.5H8.27Z" fill="currentColor"></path>
                            </svg>                                                       
                        </a>
                    </div>
                </div>
            </nav>
        </div>
    </section>

Navigation (horizontal) from Cyber

Tailwind CSS

Cyber

Dark Cyber Navigation Bar with Search

A horizontal dark navigation bar with a gradient cyan-to-purple wordmark logo on the left, four uppercase monospace menu links (About, Company, Services, Testimonials) in the center, and a search input with a gradient search button on the right. The styling uses a futuristic neon-accent aesthetic on a near-black textured background.

<nav class="relative px-10 py-8 bg-gradient-to-br from-black via-gray-950 to-black border-b border-blue-400 border-opacity-20 scan-lines" x-data="{ mobileNavOpen: false }">
        <div class="absolute inset-0 opacity-20">
            <div class="absolute top-4 left-1/4 w-2 h-2 bg-blue-400 rounded-full animate-pulse"></div>
            <div class="absolute top-6 right-1/3 w-1 h-1 bg-green-400 rounded-full animate-pulse delay-75"></div>
            <div class="absolute bottom-4 left-1/3 w-3 h-3 bg-purple-500 rounded-full animate-pulse delay-150"></div>
            <div class="absolute bottom-6 right-1/4 w-1 h-1 bg-blue-400 rounded-full animate-pulse delay-300"></div>
        </div>
        
        <div class="flex justify-between items-center relative z-10">
            <a class="text-blue-400 text-2xl leading-none font-heading tracking-wider hover:animate-glitch transition-all duration-300" href="#">
                <img src="cyber-assets/logo.png" alt="" class="h-5">
            </a>
            <div class="lg:hidden">
                <button x-on:click="mobileNavOpen = !mobileNavOpen" class="block text-blue-400 hover:text-purple-500 focus:outline-none transition-colors duration-300">
                    <svg class="h-6 w-6" fill="currentColor" viewBox="0 0 20 20" xmlns="http://www.w3.org/2000/svg">
                        <title>Mobile menu</title>
                        <path d="M0 3h20v2H0V3zm0 6h20v2H0V9zm0 6h20v2H0v-2z"></path>
                    </svg>
                </button>
            </div>
            <ul class="hidden absolute top-1/2 left-1/2 transform -translate-y-1/2 -translate-x-1/2 lg:flex lg:items-center lg:w-auto lg:space-x-12">
                <li><a class="text-sm text-gray-50 hover:text-blue-400 font-medium tracking-wider transition-all duration-300 hover:animate-pulse relative group" href="#">
                    ABOUT
                    <span class="absolute -bottom-1 left-0 w-0 h-0.5 bg-blue-400 transition-all duration-300 group-hover:w-full"></span>
                </a></li>
                <li><a class="text-sm text-gray-50 hover:text-purple-500 font-medium tracking-wider transition-all duration-300 hover:animate-pulse relative group" href="#">
                    COMPANY
                    <span class="absolute -bottom-1 left-0 w-0 h-0.5 bg-purple-500 transition-all duration-300 group-hover:w-full"></span>
                </a></li>
                <li><a class="text-sm text-gray-50 hover:text-green-400 font-medium tracking-wider transition-all duration-300 hover:animate-pulse relative group" href="#">
                    SERVICES
                    <span class="absolute -bottom-1 left-0 w-0 h-0.5 bg-green-400 transition-all duration-300 group-hover:w-full"></span>
                </a></li>
                <li><a class="text-sm text-gray-50 hover:text-blue-400 font-medium tracking-wider transition-all duration-300 hover:animate-pulse relative group" href="#">
                    TESTIMONIALS
                    <span class="absolute -bottom-1 left-0 w-0 h-0.5 bg-blue-400 transition-all duration-300 group-hover:w-full"></span>
                </a></li>
            </ul>
            <div class="hidden lg:flex relative hologram-effect">
                <input class="inline-block px-4 py-3 text-sm text-blue-400 placeholder-blue-400 font-semibold bg-gray-950 border-2 border-blue-400 border-opacity-30 rounded-l bg-opacity-50 focus:outline-none focus:border-blue-400 focus:animate-pulse-neon transition-all duration-300" placeholder="SEARCH QUERY">
                <button class="px-4 rounded-r bg-gradient-to-r from-blue-400 to-purple-500 hover:from-purple-500 hover:to-blue-400 transition-all duration-300 transform hover:scale-105">
                    <svg class="text-gray-950 w-4 h-4" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke="currentColor">
                        <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M21 21l-6-6m2-5a7 7 0 11-14 0 7 7 0 0114 0z"></path>
                    </svg>
                </button>
            </div>
        </div>
        <div :class="{'block': mobileNavOpen, 'hidden': !mobileNavOpen}" class="hidden fixed top-0 left-0 bottom-0 w-5/6 max-w-sm z-50">
            <div x-on:click="mobileNavOpen = !mobileNavOpen" class="fixed inset-0 bg-gray-950 bg-opacity-90 backdrop-blur-sm"></div>
            <nav class="relative flex flex-col py-6 px-6 w-full h-full bg-gradient-to-b from-gray-800 to-gray-950 border-r-2 border-blue-400 overflow-y-auto">
                <div class="flex items-center mb-12">
                    <a class="text-blue-400 text-2xl leading-none font-heading tracking-wider hover:animate-glitch transition-all duration-300" href="#">
                        <img src="cyber-assets/logo.png" alt="" class="h-4">
                    </a>
                    <button x-on:click="mobileNavOpen = !mobileNavOpen" class="ml-auto text-blue-400 hover:text-purple-500 transition-colors duration-300">
                        <svg class="h-6 w-6" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke="currentColor">
                            <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M6 18L18 6M6 6l12 12"></path>
                        </svg>
                    </button>
                </div>
                <div>
                    <ul class="space-y-2">
                        <li><a class="block p-4 text-sm font-semibold text-gray-50 hover:bg-blue-400 hover:bg-opacity-10 hover:text-blue-400 transition-all duration-300 border-l-4 border-transparent hover:border-blue-400 tracking-wider" href="#">ABOUT</a></li>
                        <li><a class="block p-4 text-sm font-semibold text-gray-50 hover:bg-purple-500 hover:bg-opacity-10 hover:text-purple-500 transition-all duration-300 border-l-4 border-transparent hover:border-purple-500 tracking-wider" href="#">COMPANY</a></li>
                        <li><a class="block p-4 text-sm font-semibold text-gray-50 hover:bg-green-400 hover:bg-opacity-10 hover:text-green-400 transition-all duration-300 border-l-4 border-transparent hover:border-green-400 tracking-wider" href="#">SERVICES</a></li>
                        <li><a class="block p-4 text-sm font-semibold text-gray-50 hover:bg-blue-400 hover:bg-opacity-10 hover:text-blue-400 transition-all duration-300 border-l-4 border-transparent hover:border-blue-400 tracking-wider" href="#">TESTIMONIALS</a></li>
                    </ul>
                </div>
                <div class="mt-auto">
                    <div class="pt-6">
                        <a class="block px-6 py-3 mb-3 text-sm text-center font-semibold text-blue-400 hover:text-gray-950 hover:bg-blue-400 border-2 border-blue-400 transition-all duration-300 transform hover:scale-105 tracking-wider" href="#" style="clip-path: polygon(0 0, calc(100% - 15px) 0, 100% 100%, 15px 100%);">SIGN IN</a>
                        <a class="block px-6 py-3 text-sm text-center font-semibold text-green-400 hover:text-gray-950 hover:bg-green-400 border-2 border-green-400 transition-all duration-300 transform hover:scale-105 tracking-wider" href="#" style="clip-path: polygon(15px 0, 100% 0, calc(100% - 15px) 100%, 0 100%);">SIGN UP</a>
                    </div>
                    <p class="mt-6 mb-4 text-xs text-center text-gray-500">
                        <span>© 2025 CYBER SYSTEMS ACTIVATED</span>
                    </p>
                </div>
            </nav>
        </div>
    </nav>

Navigation (horizontal) from FilyTreck

Tailwind CSS

FilyTreck

FilyTreck Top Navigation Bar with Login and Get Started Buttons

A dark purple horizontal navigation bar with the FilyTreck logo on the left, text links for Our features, How to use?, Use cases with a dropdown, and Plans & pricing, plus an outlined Login button and a filled blue Get started button on the right.

<section x-data="{ mobileNavOpen: false, dropdown: false }" class="relative" style="background: url('fily-assets/gradients/gradient-navigation.jpg') no-repeat left center;background-size: cover;">
    <nav class="relative px-12 py-5">
        <div class="flex items-center justify-between">
            <a class="relative z-10 pr-4 lg:pr-0" href="#">
                <img class="h-9" src="fily-assets/logos/fily-treck-white-logo.svg" alt="">
            </a>
            <ul class="hidden xl:absolute xl:top-1/2 xl:left-1/2 xl:transform xl:-translate-y-1/2 xl:-translate-x-1/2 xl:flex lg:justify-center gap-14">
                <li>
                    <a x-on:mousemove="dropdown = false" href="#" class="text-lg text-white hover:text-gray-300 font-medium transition duration-200">Our features</a>
                </li>
                <li>
                    <a x-on:mousemove="dropdown = false" href="#" class="text-lg text-white hover:text-gray-300 font-medium transition duration-200">How to use?</a>
                </li>
                <li>
                    <a x-on:mousemove="dropdown = true" href="#" :class="{'text-gray-300': dropdown}" class="flex items-center text-lg text-white hover:text-gray-300 font-medium transition duration-200">
                        <span class="mr-2.5">Use cases</span>
                        <div :class="{'rotate-180': dropdown}" class="transform">
                            <svg xmlns="http://www.w3.org/2000/svg" width="13" height="13" viewBox="0 0 13 13" fill="none">
                                <g>
                                    <path d="M11.8098 3.51666C11.7362 3.43826 11.6487 3.37604 11.5523 3.33357C11.4559 3.2911 11.3525 3.26924 11.2481 3.26924C11.1436 3.26924 11.0402 3.2911 10.9438 3.33357C10.8474 3.37604 10.7599 3.43826 10.6864 3.51666L7.06305 7.34761C6.9895 7.42601 6.902 7.48824 6.8056 7.5307C6.70919 7.57317 6.60579 7.59503 6.50135 7.59503C6.39691 7.59503 6.29351 7.57317 6.19711 7.5307C6.1007 7.48824 6.0132 7.42601 5.93966 7.34761L2.31633 3.51666C2.24279 3.43826 2.15529 3.37604 2.05888 3.33357C1.96248 3.2911 1.85907 3.26924 1.75464 3.26924C1.6502 3.26924 1.5468 3.2911 1.45039 3.33357C1.35399 3.37604 1.26649 3.43826 1.19294 3.51666C1.0456 3.67338 0.962891 3.88538 0.962891 4.10636C0.962891 4.32734 1.0456 4.53934 1.19294 4.69606L4.82418 8.53537C5.26918 9.00529 5.87241 9.26924 6.50135 9.26924C7.13029 9.26924 7.73352 9.00529 8.17852 8.53537L11.8098 4.69606C11.9571 4.53934 12.0398 4.32734 12.0398 4.10636C12.0398 3.88538 11.9571 3.67338 11.8098 3.51666Z" fill="currentColor"></path>
                                </g>
                                <defs>
                                    <clipPath>
                                        <rect width="12" height="12" fill="white" transform="translate(0.5 0.5)"></rect>
                                    </clipPath>
                                </defs>
                            </svg>
                        </div>
                    </a>
                </li>
                <li>
                    <a x-on:mousemove="dropdown = false" href="#" class="text-lg text-white hover:text-gray-300 font-medium transition duration-200">Plans &amp; pricing</a>
                </li>
            </ul>
            <div class="hidden xl:flex items-center gap-2">
                <a class="hidden 2xl:block mr-8" href="#">
                    <svg xmlns="http://www.w3.org/2000/svg" width="20" height="20" viewBox="0 0 20 20" fill="none">
                        <g clip-path="url(#clip0_231_6677)">
                            <path d="M19.6343 17.871L15.7634 13.9984C18.6598 10.1278 17.87 4.64195 13.9994 1.74551C10.1288 -1.15092 4.64292 -0.361157 1.74649 3.50949C-1.14994 7.38013 -0.36018 12.866 3.51046 15.7624C6.61969 18.0891 10.8901 18.0891 13.9994 15.7624L17.872 19.635C18.3587 20.1216 19.1477 20.1216 19.6343 19.635C20.121 19.1483 20.121 18.3593 19.6343 17.8727L19.6343 17.871ZM8.7872 15.015C5.34716 15.015 2.55848 12.2263 2.55848 8.78623C2.55848 5.34618 5.34716 2.55751 8.7872 2.55751C12.2273 2.55751 15.0159 5.34618 15.0159 8.78623C15.0123 12.2247 12.2257 15.0113 8.7872 15.015Z" fill="#19191B"></path>
                        </g>
                        <defs>
                            <clipPath id="clip0_231_6677">
                                <rect width="20" height="20" fill="white"></rect>
                            </clipPath>
                        </defs>
                    </svg>
                </a>
                <a class="inline-flex justify-center items-center text-center h-12 p-5 px-6 font-semibold text-white hover:text-black focus:text-black bg-transparent hover:bg-white focus:bg-white border border-gray-300 rounded-full focus:ring-4 focus:ring-white focus:ring-opacity-50 transition duration-200" href="#">Login</a>
                <a class="inline-flex justify-center items-center text-center h-12 p-5 px-6 font-semibold text-white hover:text-white focus:text-white bg-blue-500 hover:bg-blue-600 focus:bg-blue-600 rounded-full focus:ring-4 focus:ring-blue-200 transition duration-200" href="#">Get started</a>
            </div>
            <a x-on:click.prevent="mobileNavOpen = !mobileNavOpen" class="flex items-center justify-center h-12 p-5 text-white border border-gray-300 xl:hidden rounded-full" href="#">
                <svg width="20" height="16" viewBox="0 0 20 16" fill="none" xmlns="http://www.w3.org/2000/svg">
                    <path d="M18.75 6.75003H1.25C0.559648 6.75003 0 7.30968 0 8.00003C0 8.69038 0.559648 9.25003 1.25 9.25003H18.75C19.4404 9.25003 20 8.69038 20 8.00003C20 7.30968 19.4404 6.75003 18.75 6.75003Z" fill="currentColor"></path>
                    <path d="M1.25 3.41669H18.75C19.4404 3.41669 20 2.85704 20 2.16669C20 1.47634 19.4404 0.916687 18.75 0.916687H1.25C0.559648 0.916687 0 1.47634 0 2.16669C0 2.85704 0.559648 3.41669 1.25 3.41669Z" fill="currentColor"></path>
                    <path d="M18.75 12.5834H1.25C0.559648 12.5834 0 13.143 0 13.8334C0 14.5237 0.559648 15.0834 1.25 15.0834H18.75C19.4404 15.0834 20 14.5237 20 13.8334C20 13.143 19.4404 12.5834 18.75 12.5834Z" fill="currentColor"></path>
                </svg>
            </a>
        </div>
    </nav>
    <div :class="{'hidden': !dropdown}" class="hidden absolute w-full z-40 px-8 lg:px-20 2xl:px-40">
        <div x-on:mouseleave="dropdown = false">
            <div class="bg-white rounded-3xl">
                <div class="flex flex-wrap divide-x divide-gray-100">
                    <div class="w-7/12 py-20">
                        <div class="flex px-16 -m-8">
                            <div class="w-1-2 p-8">
                                <h3 class="mb-10 font-heading text-2xl font-bold">By industry</h3>
                                <a href="#" class="mb-6 block max-w-max text-lg hover:text-gray-700 font-medium">Creative &amp; Marketing agencies</a>
                                <a href="#" class="mb-6 block max-w-max text-lg hover:text-gray-700 font-medium">Software &amp; Engineering firms</a>
                                <a href="#" class="mb-6 block max- w-max text-lg hover:text-gray-700 font-medium">Architecture firms</a>
                                <a href="#" class="mb-6 block max-w-max text-lg hover:text-gray-700 font-medium">Consulting businesses</a>
                                <a href="#" class="block max-w-max text-lg hover:text-gray-700 font-medium">Educational institutions </a>
                            </div>
                            <div class="w-1/2 p-8">
                                <h3 class="mb-10 font-heading text-2xl font-bold">By role</h3>
                                <a href="#" class="mb-2.5 block max-w-max text-lg hover:text-gray-800 font-medium">For business owners</a>
                                <p class="text-sm mb-6 text-gray-500 font-medium">Nullam bibendum mollis enim, sed tempus lacus tempus nec. Etiam cursus nec neque at tempor.</p>
                                <a href="#" class="mb-2.5 block max-w-max text-lg hover:text-gray-800 font-medium">For project managers</a>
                                <p class="text-sm mb-6 text-gray-500 font-medium">Nam ut neque nisi. Vestibulum volutpat feugiat libero, tempus ligula. Nullam ut diam sit amet turpis pretium.</p>
                                <a href="#" class="mb-2.5 block max-w-max text-lg hover:text-gray-800 font-medium">For employees</a>
                                <p class="text-sm mb-6 text-gray-500 font-medium">Vivamus sapien enim, consequat ac volutpat a, ultrices quis enim. Cras scelerisque vel eros in consequat.</p>
                            </div>
                        </div>
                    </div>
                    <div class="flex-1 py-20">
                        <div class="px-16">
                            <h3 class="mb-10 font-heading text-2xl font-bold">Recommended articles</h3>
                            <div class="mb-6">
                                <div class="flex flex-wrap items-center -m-4">
                                    <div class="w-auto p-4">
                                        <div class="overflow-hidden rounded-3xl" style="width: 130px;height: 130px;">
                                            <img class="w-full h-full object-cover" src="fily-assets/navigations/article.png" alt="">
                                        </div>
                                    </div>
                                    <div class="flex-1 p-4">
                                        <h3 class="mb-6 text-xl font-medium leading-snug">2023 Remote Work: A Comprehensive Guide</h3>
                                        <a href="#" class="flex flex-wrap items-center text-blue-500 hover:text-blue-600">
                                            <span class="mr-2 font-semibold transition duration-200">Read more</span>
                                            <svg width="12" height="12" viewBox="0 0 12 12" fill="none" xmlns="http://www.w3.org/2000/svg">
                                                <path d="M6.51348 1.71443C6.4457 1.78417 6.39189 1.86715 6.35518 1.95857C6.31846 2.04999 6.29956 2.14804 6.29956 2.24708C6.29956 2.34612 6.31846 2.44417 6.35518 2.53559C6.39189 2.62701 6.4457 2.70999 6.51348 2.77973L8.89286 5.24793L1.66071 5.24793C1.46891 5.24793 1.28495 5.32697 1.14932 5.46766C1.0137 5.60835 0.9375 5.79917 0.9375 5.99814C0.9375 6.19711 1.0137 6.38793 1.14932 6.52862C1.28495 6.66931 1.46891 6.74835 1.66071 6.74835L8.89286 6.74835L6.51348 9.21654C6.4457 9.28629 6.39189 9.36926 6.35518 9.46068C6.31846 9.5521 6.29956 9.65016 6.29956 9.74919C6.29956 9.84823 6.31846 9.94629 6.35518 10.0377C6.39189 10.1291 6.4457 10.2121 6.51348 10.2818C6.64899 10.4216 6.83229 10.5 7.02335 10.5C7.21441 10.5 7.39771 10.4216 7.53322 10.2818L10.6358 7.05593C10.9074 6.77584 11.0609 6.39543 11.0625 5.99814C11.059 5.60345 10.9057 5.22609 10.6358 4.94784L7.53322 1.72193C7.39867 1.5812 7.21591 1.50142 7.02484 1.50002C6.83378 1.49861 6.64994 1.5757 6.51348 1.71443Z" fill="currentColor"></path>
                                            </svg> 
                                        </a>
                                    </div>
                                </div>
                            </div>
                            <div class="mb-6">
                                <div class="flex flex-wrap items-center -m-4">
                                    <div class="w-auto p-4">
                                        <div class="overflow-hidden rounded-3xl" style="width: 130px;height: 130px;">
                                            <img class="w-full h-full object-cover" src="fily-assets/navigations/article2.png" alt="">
                                        </div>
                                    </div>
                                    <div class="flex-1 p-4">
                                        <h3 class="mb-6 text-xl font-medium leading-snug">Mastering the Art of Project Management Success</h3>
                                        <a href="#" class="flex flex-wrap items-center text-blue-500 hover:text-blue-600">
                                            <span class="mr-2 font-semibold transition duration-200">Read more</span>
                                            <svg width="12" height="12" viewBox="0 0 12 12" fill="none" xmlns="http://www.w3.org/2000/svg">
                                                <path d="M6.51348 1.71443C6.4457 1.78417 6.39189 1.86715 6.35518 1.95857C6.31846 2.04999 6.29956 2.14804 6.29956 2.24708C6.29956 2.34612 6.31846 2.44417 6.35518 2.53559C6.39189 2.62701 6.4457 2.70999 6.51348 2.77973L8.89286 5.24793L1.66071 5.24793C1.46891 5.24793 1.28495 5.32697 1.14932 5.46766C1.0137 5.60835 0.9375 5.79917 0.9375 5.99814C0.9375 6.19711 1.0137 6.38793 1.14932 6.52862C1.28495 6.66931 1.46891 6.74835 1.66071 6.74835L8.89286 6.74835L6.51348 9.21654C6.4457 9.28629 6.39189 9.36926 6.35518 9.46068C6.31846 9.5521 6.29956 9.65016 6.29956 9.74919C6.29956 9.84823 6.31846 9.94629 6.35518 10.0377C6.39189 10.1291 6.4457 10.2121 6.51348 10.2818C6.64899 10.4216 6.83229 10.5 7.02335 10.5C7.21441 10.5 7.39771 10.4216 7.53322 10.2818L10.6358 7.05593C10.9074 6.77584 11.0609 6.39543 11.0625 5.99814C11.059 5.60345 10.9057 5.22609 10.6358 4.94784L7.53322 1.72193C7.39867 1.5812 7.21591 1.50142 7.02484 1.50002C6.83378 1.49861 6.64994 1.5757 6.51348 1.71443Z" fill="currentColor"></path>
                                            </svg> 
                                        </a>
                                    </div>
                                </div>
                            </div>
                            <div>
                                <div class="flex flex-wrap items-center -m-4">
                                    <div class="w-auto p-4">
                                        <div class="overflow-hidden rounded-3xl" style="width: 130px;height: 130px;">
                                            <img class="w-full h-full object-cover" src="fily-assets/navigations/article3.png" alt="">
                                        </div>
                                    </div>
                                    <div class="flex-1 p-4">
                                        <h3 class="mb-6 text-xl font-medium leading-snug">Optimal Work Management Software for Firms</h3>
                                        <a href="#" class="flex flex-wrap items-center text-blue-500 hover:text-blue-600">
                                            <span class="mr-2 font-semibold transition duration-200">Read more</span>
                                            <svg width="12" height="12" viewBox="0 0 12 12" fill="none" xmlns="http://www.w3.org/2000/svg">
                                                <path d="M6.51348 1.71443C6.4457 1.78417 6.39189 1.86715 6.35518 1.95857C6.31846 2.04999 6.29956 2.14804 6.29956 2.24708C6.29956 2.34612 6.31846 2.44417 6.35518 2.53559C6.39189 2.62701 6.4457 2.70999 6.51348 2.77973L8.89286 5.24793L1.66071 5.24793C1.46891 5.24793 1.28495 5.32697 1.14932 5.46766C1.0137 5.60835 0.9375 5.79917 0.9375 5.99814C0.9375 6.19711 1.0137 6.38793 1.14932 6.52862C1.28495 6.66931 1.46891 6.74835 1.66071 6.74835L8.89286 6.74835L6.51348 9.21654C6.4457 9.28629 6.39189 9.36926 6.35518 9.46068C6.31846 9.5521 6.29956 9.65016 6.29956 9.74919C6.29956 9.84823 6.31846 9.94629 6.35518 10.0377C6.39189 10.1291 6.4457 10.2121 6.51348 10.2818C6.64899 10.4216 6.83229 10.5 7.02335 10.5C7.21441 10.5 7.39771 10.4216 7.53322 10.2818L10.6358 7.05593C10.9074 6.77584 11.0609 6.39543 11.0625 5.99814C11.059 5.60345 10.9057 5.22609 10.6358 4.94784L7.53322 1.72193C7.39867 1.5812 7.21591 1.50142 7.02484 1.50002C6.83378 1.49861 6.64994 1.5757 6.51348 1.71443Z" fill="currentColor"></path>
                                            </svg> 
                                        </a>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
    <div :class="{'hidden': !mobileNavOpen}" class="hidden fixed top-0 left-0 bottom-0 w-5/6 max-w-xs z-50">
        <div x-on:click="mobileNavOpen = !mobileNavOpen" class="fixed inset-0 bg-black opacity-20"></div>
        <nav class="relative p-8 w-full h-full bg-white overflow-y-auto">
            <div class="flex flex-col justify-between h-full">
                <div class="flex items-center justify-between mb-8">
                    <a class="pr-4" href="#">
                        <img class="h-8" src="fily-assets/logos/fily-treck-black-logo.svg" alt="">
                    </a>
                    <a x-on:click.prevent="mobileNavOpen = !mobileNavOpen" href="#">
                        <svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
                            <path d="M6 18L18 6M6 6L18 18" stroke="#252E4A" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"></path>
                        </svg>
                    </a>
                </div>
                <ul class="flex flex-col gap-8 py-16">
                    <li>
                        <a href="#" class="text-lg text-black hover:text-gray-700 font-medium transition duration-200">Our features</a>
                    </li>
                    <li>
                        <a href="#" class="text-lg text-black hover:text-gray-700 font-medium transition duration-200">How to use?</a>
                    </li>
                    <li>
                        <a x-on:mousemove="dropdown = true" href="#" class="inline-flex items-center text-lg text-black hover:text-gray-700 font-medium transition duration-200">
                            <span class="mr-2.5">Use cases</span>
                            <svg xmlns="http://www.w3.org/2000/svg" width="13" height="13" viewBox="0 0 13 13" fill="none">
                                <g>
                                    <path d="M11.8098 3.51666C11.7362 3.43826 11.6487 3.37604 11.5523 3.33357C11.4559 3.2911 11.3525 3.26924 11.2481 3.26924C11.1436 3.26924 11.0402 3.2911 10.9438 3.33357C10.8474 3.37604 10.7599 3.43826 10.6864 3.51666L7.06305 7.34761C6.9895 7.42601 6.902 7.48824 6.8056 7.5307C6.70919 7.57317 6.60579 7.59503 6.50135 7.59503C6.39691 7.59503 6.29351 7.57317 6.19711 7.5307C6.1007 7.48824 6.0132 7.42601 5.93966 7.34761L2.31633 3.51666C2.24279 3.43826 2.15529 3.37604 2.05888 3.33357C1.96248 3.2911 1.85907 3.26924 1.75464 3.26924C1.6502 3.26924 1.5468 3.2911 1.45039 3.33357C1.35399 3.37604 1.26649 3.43826 1.19294 3.51666C1.0456 3.67338 0.962891 3.88538 0.962891 4.10636C0.962891 4.32734 1.0456 4.53934 1.19294 4.69606L4.82418 8.53537C5.26918 9.00529 5.87241 9.26924 6.50135 9.26924C7.13029 9.26924 7.73352 9.00529 8.17852 8.53537L11.8098 4.69606C11.9571 4.53934 12.0398 4.32734 12.0398 4.10636C12.0398 3.88538 11.9571 3.67338 11.8098 3.51666Z" fill="currentColor"></path>
                                </g>
                                <defs>
                                    <clipPath>
                                        <rect width="12" height="12" fill="white" transform="translate(0.5 0.5)"></rect>
                                    </clipPath>
                                </defs>
                            </svg>
                        </a>
                    </li>
                    <li>
                        <a href="#" class="text-lg text-black hover:text-gray-700 font-medium transition duration-200">Plans &amp; pricing</a>
                    </li>
                </ul>
                <div class="flex flex-col items-center gap-2">
                    <a class="inline-flex justify-center items-center text-center w-full h-12 py-5 px-6 font-semibold text-black hover:text-black focus:text-black bg-transparent hover:bg-white focus:bg-white border border-gray-100 rounded-full focus:ring-4 focus:ring-white focus:ring-opacity-50 transition duration-200" href="#">Login</a>
                    <a class="inline-flex justify-center items-center text-center w-full h-12 py-5 px-6 font-semibold text-white hover:text-white focus:text-white bg-blue-500 hover:bg-blue-600 focus:bg-blue-600 rounded-full focus:ring-4 focus:ring-blue-200 transition duration-200" href="#">Get started</a>
                </div>
            </div>
        </nav>
    </div>
</section>

Navigation (horizontal) from Shopky

Tailwind CSS

Shopky

Shopky light top navigation bar with logo, menu links, cart, and account

A horizontal header bar with the Shopky logo on the left, five text navigation links (Discover, Collection, Perfect Match, Show Reel, Campaign) in the center-left, and cart and account controls on the right. It uses a white background with dark text and a green logo accent, suited to an ecommerce site header.

<div x-data="{ mobileNavOpen: false }">
    <nav class="relative bg-white py-3 shadow-lg">
        <div class="container mx-auto px-4">
            <div class="flex items-center justify-between">
                <div class="flex items-center">
                    <a href="#" class="inline-block mr-10">
                        <img class="h-18" src="shopky-assets/logos/shopky-logo.svg" alt="">
                    </a>
                    <ul class="hidden lg:flex items-center gap-10">
                        <li>
                            <a href="#" class="text-sm font-medium">Discover</a>
                        </li>
                        <li>
                            <a href="#" class="text-gray-500 text-sm font-medium hover:text-gray-900 transition duration-200">Collection</a>
                        </li>
                        <li>
                            <a href="#" class="text-gray-500 text-sm font-medium hover:text-gray-900 transition duration-200">Perfect Match</a>
                        </li>
                        <li>
                            <a href="#" class="text-gray-500 text-sm font-medium hover:text-gray-900 transition duration-200">Show Reel</a>
                        </li>
                        <li>
                            <a href="#" class="text-gray-500 text-sm font-medium hover:text-gray-900 transition duration-200">Campaign</a>
                        </li>
                    </ul>
                </div>
                <div class="hidden lg:flex gap-10">
                    <a href="#" class="group">
                        <div class="flex items-center flex-wrap gap-2">
                            <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none">
                                <path d="M19 7H16V6C16 4.93913 15.5786 3.92172 14.8284 3.17157C14.0783 2.42143 13.0609 2 12 2C10.9391 2 9.92172 2.42143 9.17157 3.17157C8.42143 3.92172 8 4.93913 8 6V7H5C4.73478 7 4.48043 7.10536 4.29289 7.29289C4.10536 7.48043 4 7.73478 4 8V19C4 19.7956 4.31607 20.5587 4.87868 21.1213C5.44129 21.6839 6.20435 22 7 22H17C17.7956 22 18.5587 21.6839 19.1213 21.1213C19.6839 20.5587 20 19.7956 20 19V8C20 7.73478 19.8946 7.48043 19.7071 7.29289C19.5196 7.10536 19.2652 7 19 7ZM10 6C10 5.46957 10.2107 4.96086 10.5858 4.58579C10.9609 4.21071 11.4696 4 12 4C12.5304 4 13.0391 4.21071 13.4142 4.58579C13.7893 4.96086 14 5.46957 14 6V7H10V6ZM18 19C18 19.2652 17.8946 19.5196 17.7071 19.7071C17.5196 19.8946 17.2652 20 17 20H7C6.73478 20 6.48043 19.8946 6.29289 19.7071C6.10536 19.5196 6 19.2652 6 19V9H8V10C8 10.2652 8.10536 10.5196 8.29289 10.7071C8.48043 10.8946 8.73478 11 9 11C9.26522 11 9.51957 10.8946 9.70711 10.7071C9.89464 10.5196 10 10.2652 10 10V9H14V10C14 10.2652 14.1054 10.5196 14.2929 10.7071C14.4804 10.8946 14.7348 11 15 11C15.2652 11 15.5196 10.8946 15.7071 10.7071C15.8946 10.5196 16 10.2652 16 10V9H18V19Z" fill="black"></path>
                            </svg>
                            <span class="text-sm text-gray-500 group-hover:text-gray-900 transition duration-200">Cart(0)</span>
                        </div>
                    </a>
                    <a href="#" class="group">
                        <div class="flex items-center flex-wrap gap-2">
                            <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none">
                                <path d="M15.7105 12.71C16.6909 11.9387 17.4065 10.8809 17.7577 9.68394C18.109 8.48697 18.0784 7.21027 17.6703 6.03147C17.2621 4.85267 16.4967 3.83039 15.4806 3.10686C14.4644 2.38332 13.2479 1.99451 12.0005 1.99451C10.753 1.99451 9.5366 2.38332 8.52041 3.10686C7.50423 3.83039 6.73883 4.85267 6.3307 6.03147C5.92257 7.21027 5.892 8.48697 6.24325 9.68394C6.59449 10.8809 7.31009 11.9387 8.29048 12.71C6.61056 13.383 5.14477 14.4994 4.04938 15.9399C2.95398 17.3805 2.27005 19.0913 2.07048 20.89C2.05604 21.0213 2.0676 21.1542 2.10451 21.2811C2.14142 21.4079 2.20295 21.5263 2.2856 21.6293C2.4525 21.8375 2.69527 21.9708 2.96049 22C3.2257 22.0292 3.49164 21.9518 3.69981 21.7849C3.90798 21.618 4.04131 21.3752 4.07049 21.11C4.29007 19.1552 5.22217 17.3498 6.6887 16.0388C8.15524 14.7278 10.0534 14.003 12.0205 14.003C13.9876 14.003 15.8857 14.7278 17.3523 16.0388C18.8188 17.3498 19.7509 19.1552 19.9705 21.11C19.9977 21.3557 20.1149 21.5827 20.2996 21.747C20.4843 21.9114 20.7233 22.0015 20.9705 22H21.0805C21.3426 21.9698 21.5822 21.8373 21.747 21.6313C21.9119 21.4252 21.9886 21.1624 21.9605 20.9C21.76 19.0962 21.0724 17.381 19.9713 15.9382C18.8703 14.4954 17.3974 13.3795 15.7105 12.71ZM12.0005 12C11.2094 12 10.436 11.7654 9.7782 11.3259C9.12041 10.8864 8.60772 10.2616 8.30497 9.53074C8.00222 8.79983 7.923 7.99557 8.07734 7.21964C8.23168 6.44372 8.61265 5.73099 9.17206 5.17158C9.73147 4.61217 10.4442 4.2312 11.2201 4.07686C11.996 3.92252 12.8003 4.00173 13.5312 4.30448C14.2621 4.60724 14.8868 5.11993 15.3264 5.77772C15.7659 6.43552 16.0005 7.20888 16.0005 8C16.0005 9.06087 15.5791 10.0783 14.8289 10.8284C14.0788 11.5786 13.0614 12 12.0005 12Z" fill="black"></path>
                            </svg>
                            <span class="text-sm text-gray-500 group-hover:text-gray-900 transition duration-200">Account</span>
                        </div>
                    </a>
                </div>
                <button x-on:click="mobileNavOpen = !mobileNavOpen" class="lg:hidden">
                    <svg class="text-black" width="51" height="51" viewBox="0 0 56 56" fill="none" xmlns="http://www.w3.org/2000/svg">
                      <rect width="56" height="56" rx="28" fill="currentColor"></rect>
                      <path d="M37 32H19M37 24H19" stroke="white" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"></path>
                    </svg>
                </button>
            </div>
        </div>
    </nav>
    <div x-show="mobileNavOpen" class="navbar-menu fixed top-0 left-0 bottom-0 w-5/6 max-w-xs z-50">
        <div x-on:click="mobileNavOpen = !mobileNavOpen" class="navbar-menu fixed inset-0 bg-black opacity-20"></div>
        <nav class="relative p-8 w-full h-full bg-white overflow-y-auto">
            <div class="flex items-center justify-between">
                <a href="#" class="inline-block">
                    <img class="h-18" src="shopky-assets/logos/shopky-logo.svg" alt="">
                </a>
                <button x-on:click="mobileNavOpen = !mobileNavOpen">
                    <svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
                      <path d="M6 18L18 6M6 6L18 18" stroke="#111827" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"></path>
                    </svg>
                </button>
            </div>
            <ul class="flex flex-col gap-12 py-12">
                <li>
                    <a href="#" class="text-sm font-medium">Discover</a>
                </li>
                <li>
                    <a href="#" class="text-sm font-medium">Collection</a>
                </li>
                <li>
                    <a href="#" class="text-sm font-medium">Perfect Match</a>
                </li>
                <li>
                    <a href="#" class="text-sm font-medium">Show Reel</a>
                </li>
                <li>
                    <a href="#" class="text-sm font-medium">Campaign</a>
                </li>
            </ul>
            <div class="flex flex-col gap-10">
                <a href="#" class="group">
                    <div class="flex items-center flex-wrap gap-2">
                        <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none">
                            <path d="M19 7H16V6C16 4.93913 15.5786 3.92172 14.8284 3.17157C14.0783 2.42143 13.0609 2 12 2C10.9391 2 9.92172 2.42143 9.17157 3.17157C8.42143 3.92172 8 4.93913 8 6V7H5C4.73478 7 4.48043 7.10536 4.29289 7.29289C4.10536 7.48043 4 7.73478 4 8V19C4 19.7956 4.31607 20.5587 4.87868 21.1213C5.44129 21.6839 6.20435 22 7 22H17C17.7956 22 18.5587 21.6839 19.1213 21.1213C19.6839 20.5587 20 19.7956 20 19V8C20 7.73478 19.8946 7.48043 19.7071 7.29289C19.5196 7.10536 19.2652 7 19 7ZM10 6C10 5.46957 10.2107 4.96086 10.5858 4.58579C10.9609 4.21071 11.4696 4 12 4C12.5304 4 13.0391 4.21071 13.4142 4.58579C13.7893 4.96086 14 5.46957 14 6V7H10V6ZM18 19C18 19.2652 17.8946 19.5196 17.7071 19.7071C17.5196 19.8946 17.2652 20 17 20H7C6.73478 20 6.48043 19.8946 6.29289 19.7071C6.10536 19.5196 6 19.2652 6 19V9H8V10C8 10.2652 8.10536 10.5196 8.29289 10.7071C8.48043 10.8946 8.73478 11 9 11C9.26522 11 9.51957 10.8946 9.70711 10.7071C9.89464 10.5196 10 10.2652 10 10V9H14V10C14 10.2652 14.1054 10.5196 14.2929 10.7071C14.4804 10.8946 14.7348 11 15 11C15.2652 11 15.5196 10.8946 15.7071 10.7071C15.8946 10.5196 16 10.2652 16 10V9H18V19Z" fill="black"></path>
                        </svg>
                        <span class="text-sm text-gray-500 group-hover:text-gray-900 transition duration-200">Cart(0)</span>
                    </div>
                </a>
                <a href="#" class="group">
                    <div class="flex items-center flex-wrap gap-2">
                        <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none">
                            <path d="M15.7105 12.71C16.6909 11.9387 17.4065 10.8809 17.7577 9.68394C18.109 8.48697 18.0784 7.21027 17.6703 6.03147C17.2621 4.85267 16.4967 3.83039 15.4806 3.10686C14.4644 2.38332 13.2479 1.99451 12.0005 1.99451C10.753 1.99451 9.5366 2.38332 8.52041 3.10686C7.50423 3.83039 6.73883 4.85267 6.3307 6.03147C5.92257 7.21027 5.892 8.48697 6.24325 9.68394C6.59449 10.8809 7.31009 11.9387 8.29048 12.71C6.61056 13.383 5.14477 14.4994 4.04938 15.9399C2.95398 17.3805 2.27005 19.0913 2.07048 20.89C2.05604 21.0213 2.0676 21.1542 2.10451 21.2811C2.14142 21.4079 2.20295 21.5263 2.2856 21.6293C2.4525 21.8375 2.69527 21.9708 2.96049 22C3.2257 22.0292 3.49164 21.9518 3.69981 21.7849C3.90798 21.618 4.04131 21.3752 4.07049 21.11C4.29007 19.1552 5.22217 17.3498 6.6887 16.0388C8.15524 14.7278 10.0534 14.003 12.0205 14.003C13.9876 14.003 15.8857 14.7278 17.3523 16.0388C18.8188 17.3498 19.7509 19.1552 19.9705 21.11C19.9977 21.3557 20.1149 21.5827 20.2996 21.747C20.4843 21.9114 20.7233 22.0015 20.9705 22H21.0805C21.3426 21.9698 21.5822 21.8373 21.747 21.6313C21.9119 21.4252 21.9886 21.1624 21.9605 20.9C21.76 19.0962 21.0724 17.381 19.9713 15.9382C18.8703 14.4954 17.3974 13.3795 15.7105 12.71ZM12.0005 12C11.2094 12 10.436 11.7654 9.7782 11.3259C9.12041 10.8864 8.60772 10.2616 8.30497 9.53074C8.00222 8.79983 7.923 7.99557 8.07734 7.21964C8.23168 6.44372 8.61265 5.73099 9.17206 5.17158C9.73147 4.61217 10.4442 4.2312 11.2201 4.07686C11.996 3.92252 12.8003 4.00173 13.5312 4.30448C14.2621 4.60724 14.8868 5.11993 15.3264 5.77772C15.7659 6.43552 16.0005 7.20888 16.0005 8C16.0005 9.06087 15.5791 10.0783 14.8289 10.8284C14.0788 11.5786 13.0614 12 12.0005 12Z" fill="black"></path>
                        </svg>
                        <span class="text-sm text-gray-500 group-hover:text-gray-900 transition duration-200">Account</span>
                    </div>
                </a>
            </div>
        </nav>
    </div>
</div>

Navigation (horizontal) from Vendia

Tailwind CSS

Vendia

Dark top navigation bar with Why Vendia dropdown menu

A black site header with logo, primary links, search, cart badge, and account control, with an open dropdown panel listing three category entries and documentation links. The dropdown sits below the Why Vendia trigger on a light gray background.

<section x-data="{ dropdown: false, mobileNavOpen: false, nav: '' }">
  <nav class="relative px-6 lg:px-16 py-9 bg-black">
    <div class="flex items-center">
      <a class="inline-block text-lg font-bold" href="#">
        <img class="h-6" src="vendia-assets/logos/vendia.svg" alt="" width="auto">
      </a>
      <div class="lg:hidden ml-auto">
        <button x-on:click="mobileNavOpen = !mobileNavOpen" class="flex items-center p-3 text-white hover:text-yellow-500">
          <svg class="block h-4 w-4" stroke="currentColor" viewBox="0 0 20 20" xmlns="http://www.w3.org/2000/svg">
            <title>Mobile menu</title>
            <path d="M0 3h20v2H0V3zm0 6h20v2H0V9zm0 6h20v2H0v-2z"></path>
          </svg>
        </button>
      </div>
      <ul class="hidden lg:flex ml-16 lg:w-auto lg:space-x-12">
        <li class="relative group" x-on:mouseover="dropdown = true" x-on:mouseleave="dropdown = false">
          <a class="inline-flex items-center text-yellow-500 font-medium" href="#">
            <span class="mr-3">Why Vendia?</span>
            <span :class="{'rotate-180': !dropdown, 'rotate-0': dropdown }" class="block transform rotate-180">
                <svg width="12" height="7" viewBox="0 0 12 7" fill="none" xmlns="http://www.w3.org/2000/svg">
                  <path d="M10.6667 6L6.00001 1.33333L1.33334 6" stroke="white" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"></path>
                </svg>
            </span>
          </a>
          <div :class="{'block': dropdown, 'hidden': !dropdown }" class="hidden absolute top-full left-0 px-2 pt-10 bg-black min-w-max z-50">
            <div class="px-3 pb-2 border-b border-blueGray-800">
              <a class="group relative flex p-5 hover:bg-gray-900 transition duration-200" href="#">
                <div class="mr-5">
                  <svg width="21" height="21" viewBox="0 0 21 21" fill="none" xmlns="http://www.w3.org/2000/svg">
                    <path d="M10.4717 6.33333V19.875M10.4717 6.33333C10.4717 6.33333 10.4717 4.77836 10.4717 4.25C10.4717 3.09941 11.4038 2.16667 12.5537 2.16667C13.7036 2.16667 14.6357 3.09941 14.6357 4.25C14.6357 5.40059 13.7036 6.33333 12.5537 6.33333C11.9319 6.33333 10.4717 6.33333 10.4717 6.33333ZM10.4717 6.33333C10.4717 6.33333 10.4717 4.31553 10.4717 3.72917C10.4717 2.29093 9.30649 1.125 7.86914 1.125C6.4318 1.125 5.2666 2.29093 5.2666 3.72917C5.2666 5.16741 6.4318 6.33333 7.86914 6.33333C8.72048 6.33333 10.4717 6.33333 10.4717 6.33333ZM3.18457 10.5H17.7588M3.18457 10.5C2.0347 10.5 1.10254 9.56726 1.10254 8.41667C1.10254 7.26607 2.0347 6.33333 3.18457 6.33333H17.7588C18.9087 6.33333 19.8408 7.26607 19.8408 8.41667C19.8408 9.56726 18.9087 10.5 17.7588 10.5M3.18457 10.5L3.18457 17.7917C3.18457 18.9423 4.11673 19.875 5.2666 19.875H15.6768C16.8266 19.875 17.7588 18.9423 17.7588 17.7917V10.5" stroke="#A1A4A8" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"></path>
                  </svg>
                </div>
                <div class="mr-24">
                  <span class="block font-bold text-white">Category Text</span>
                  <span class="text-gray-500">Add your details here</span>
                </div>
                <div class="hidden group-hover:block absolute right-0 top-1/2 mr-6 transform -translate-y-1/2 self-center">
                  <svg width="21" height="20" viewBox="0 0 21 20" fill="none" xmlns="http://www.w3.org/2000/svg">
                    <path d="M12.4471 4.16675L18.2768 10.0001M18.2768 10.0001L12.4471 15.8334M18.2768 10.0001L3.28613 10.0001" stroke="#F2FF5A" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"></path>
                  </svg>
                </div>
              </a>
              <a class="group relative flex p-5 hover:bg-gray-900 transition duration-200" href="#">
                <div class="mr-5">
                  <svg width="21" height="21" viewBox="0 0 21 21" fill="none" xmlns="http://www.w3.org/2000/svg">
                    <path d="M10.4717 6.33333V19.875M10.4717 6.33333C10.4717 6.33333 10.4717 4.77836 10.4717 4.25C10.4717 3.09941 11.4038 2.16667 12.5537 2.16667C13.7036 2.16667 14.6357 3.09941 14.6357 4.25C14.6357 5.40059 13.7036 6.33333 12.5537 6.33333C11.9319 6.33333 10.4717 6.33333 10.4717 6.33333ZM10.4717 6.33333C10.4717 6.33333 10.4717 4.31553 10.4717 3.72917C10.4717 2.29093 9.30649 1.125 7.86914 1.125C6.4318 1.125 5.2666 2.29093 5.2666 3.72917C5.2666 5.16741 6.4318 6.33333 7.86914 6.33333C8.72048 6.33333 10.4717 6.33333 10.4717 6.33333ZM3.18457 10.5H17.7588M3.18457 10.5C2.0347 10.5 1.10254 9.56726 1.10254 8.41667C1.10254 7.26607 2.0347 6.33333 3.18457 6.33333H17.7588C18.9087 6.33333 19.8408 7.26607 19.8408 8.41667C19.8408 9.56726 18.9087 10.5 17.7588 10.5M3.18457 10.5L3.18457 17.7917C3.18457 18.9423 4.11673 19.875 5.2666 19.875H15.6768C16.8266 19.875 17.7588 18.9423 17.7588 17.7917V10.5" stroke="#A1A4A8" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"></path>
                  </svg>
                </div>
                <div class="mr-24">
                  <span class="block font-bold text-white">Category Text</span>
                  <span class="text-gray-500">Add your details here</span>
                </div>
                <div class="hidden group-hover:block absolute right-0 top-1/2 mr-6 transform -translate-y-1/2 self-center">
                  <svg width="21" height="20" viewBox="0 0 21 20" fill="none" xmlns="http://www.w3.org/2000/svg">
                    <path d="M12.4471 4.16675L18.2768 10.0001M18.2768 10.0001L12.4471 15.8334M18.2768 10.0001L3.28613 10.0001" stroke="#F2FF5A" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"></path>
                  </svg>
                </div>
              </a>
              <a class="group relative flex p-5 hover:bg-gray-900 transition duration-200" href="#">
                <div class="mr-5">
                  <svg width="21" height="21" viewBox="0 0 21 21" fill="none" xmlns="http://www.w3.org/2000/svg">
                    <path d="M10.4717 6.33333V19.875M10.4717 6.33333C10.4717 6.33333 10.4717 4.77836 10.4717 4.25C10.4717 3.09941 11.4038 2.16667 12.5537 2.16667C13.7036 2.16667 14.6357 3.09941 14.6357 4.25C14.6357 5.40059 13.7036 6.33333 12.5537 6.33333C11.9319 6.33333 10.4717 6.33333 10.4717 6.33333ZM10.4717 6.33333C10.4717 6.33333 10.4717 4.31553 10.4717 3.72917C10.4717 2.29093 9.30649 1.125 7.86914 1.125C6.4318 1.125 5.2666 2.29093 5.2666 3.72917C5.2666 5.16741 6.4318 6.33333 7.86914 6.33333C8.72048 6.33333 10.4717 6.33333 10.4717 6.33333ZM3.18457 10.5H17.7588M3.18457 10.5C2.0347 10.5 1.10254 9.56726 1.10254 8.41667C1.10254 7.26607 2.0347 6.33333 3.18457 6.33333H17.7588C18.9087 6.33333 19.8408 7.26607 19.8408 8.41667C19.8408 9.56726 18.9087 10.5 17.7588 10.5M3.18457 10.5L3.18457 17.7917C3.18457 18.9423 4.11673 19.875 5.2666 19.875H15.6768C16.8266 19.875 17.7588 18.9423 17.7588 17.7917V10.5" stroke="#A1A4A8" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"></path>
                  </svg>
                </div>
                <div class="mr-24">
                  <span class="block font-bold text-white">Category Text</span>
                  <span class="text-gray-500">Add your details here</span>
                </div>
                <div class="hidden group-hover:block absolute right-0 top-1/2 mr-6 transform -translate-y-1/2 self-center">
                  <svg width="21" height="20" viewBox="0 0 21 20" fill="none" xmlns="http://www.w3.org/2000/svg">
                    <path d="M12.4471 4.16675L18.2768 10.0001M18.2768 10.0001L12.4471 15.8334M18.2768 10.0001L3.28613 10.0001" stroke="#F2FF5A" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"></path>
                  </svg>
                </div>
              </a>
            </div>
            <div class="px-8 py-5">
              <span class="block mb-2 text-sm font-medium text-gray-400">Documentation</span>
              <a class="block mb-2 font-medium text-yellow-500 hover:text-yellow-600" href="#">Get the most out of the platform</a><a class="block font-medium text-yellow-500 hover:text-yellow-600" href="#">See more components</a>
            </div>
          </div>
        </li>
        <li><a class="inline-block text-gray-50 hover:text-yellow-500 font-medium" href="#">Browse</a></li>
        <li><a class="inline-block text-gray-50 hover:text-yellow-500 font-medium" href="#">Resources</a></li>
        <li><a class="inline-block text-gray-50 hover:text-yellow-500 font-medium" href="#">Brands</a></li>
      </ul>
      <div class="hidden lg:inline-flex items-center ml-auto">
        <a class="inline-block mr-8 text-white hover:text-yellow-500" href="#">
          <svg width="18" height="18" viewBox="0 0 18 18" fill="none" xmlns="http://www.w3.org/2000/svg">
            <path d="M16.5 16.5L11.5 11.5M13.1667 7.33333C13.1667 10.555 10.555 13.1667 7.33333 13.1667C4.11167 13.1667 1.5 10.555 1.5 7.33333C1.5 4.11167 4.11167 1.5 7.33333 1.5C10.555 1.5 13.1667 4.11167 13.1667 7.33333Z" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"></path>
          </svg>
        </a>
        <a class="mr-8 group inline-flex items-center" href="#">
          <span class="text-white group-hover:text-yellow-500">
            <svg width="16" height="18" viewBox="0 0 16 18" fill="none" xmlns="http://www.w3.org/2000/svg">
              <path d="M11.3334 8.16667V4.83333C11.3334 2.99238 9.84099 1.5 8.00004 1.5C6.15909 1.5 4.66671 2.99238 4.66671 4.83333V8.16667M2.16671 6.5H13.8334L14.6667 16.5H1.33337L2.16671 6.5Z" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"></path>
            </svg>
          </span>
          <span class="-ml-2 flex items-center justify-center h-6 w-6 border-2 border-blueGray-800 bg-yellow-500 group-hover:bg-yellow-400 rounded-full">
            <span class="text-xs font-bold text-black">3</span>
          </span>
        </a>
        <a class="inline-flex items-center font-medium text-white hover:text-yellow-500" href="#">
          <svg width="14" height="15" viewBox="0 0 14 15" fill="none" xmlns="http://www.w3.org/2000/svg">
            <path d="M7 6C8.65685 6 10 4.65685 10 3C10 1.34315 8.65685 0 7 0C5.34315 0 4 1.34315 4 3C4 4.65685 5.34315 6 7 6Z" fill="currentColor"></path>
            <path d="M0 15C0 11.134 3.13401 8 7 8C10.866 8 14 11.134 14 15H0Z" fill="currentColor"></path>
          </svg>
          <span class="mx-3">My Account</span>
          <svg width="12" height="7" viewBox="0 0 12 7" fill="none" xmlns="http://www.w3.org/2000/svg">
            <path d="M10.6667 1L6.00004 5.66667L1.33337 1" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"></path>
          </svg>
        </a>
      </div>
    </div>
  </nav>
  <div :class="{'block': mobileNavOpen, 'hidden': !mobileNavOpen}" class="hidden fixed top-0 left-0 bottom-0 w-5/6 max-w-sm z-50">
    <div x-on:click="mobileNavOpen = !mobileNavOpen" class="fixed inset-0 bg-gray-800 opacity-25"></div>
    <nav class="relative flex flex-col py-6 px-6 w-full h-full bg-white border-r overflow-y-auto">
      <div class="flex items-center mb-8">
        <a class="mr-auto text-2xl font-medium leading-none" href="#">
          <img class="h-6" src="vendia-assets/logos/vendia-dark.svg" alt="" width="auto">
        </a>
        <button x-on:click="mobileNavOpen = !mobileNavOpen">
          <svg class="h-6 w-6 text-gray-500 cursor-pointer hover:text-gray-500" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke="currentColor">
            <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M6 18L18 6M6 6l12 12"></path>
          </svg>
        </button>
      </div>
      <div>
        <ul>
          <li class="mb-1"><a class="block p-4 font-medium text-black hover:bg-gray-50" href="#">Why Vendia?</a></li>
          <li class="mb-1"><a class="block p-4 font-medium text-black hover:bg-gray-50" href="#">Browse</a></li>
          <li class="mb-1"><a class="block p-4 font-medium text-black hover:bg-gray-50" href="#">Resources</a></li>
          <li class="mb-1"><a class="block p-4 font-medium text-black hover:bg-gray-50" href="#">Brands</a></li>
        </ul>
      </div>
      <div class="mt-auto">
        <div class="pt-6"><a class="block mb-2 py-3 text-sm text-center border border-gray-200 hover:border-gray-400 font-bold" href="#">Login</a><a class="block py-3 text-sm text-center text-black bg-yellow-500 hover:bg-yellow-600 font-bold transition duration-200" href="#">Sign In</a></div>
      </div>
    </nav>
  </div>
</section>

Navigation (horizontal) from Aurora

Tailwind CSS

Aurora

Aurora Top Navigation Bar with Login and Get Started

A horizontal top navigation bar with the Aurora logo on the left, centered menu links (Product with dropdown, Features, Pricing, Resources), and Login and Get Started buttons on the right. It uses a light background with a green accent on the primary call-to-action button.

<section x-data="{ mobileNavOpen: false }">
  <nav>
    <div class="container mx-auto px-4">
      <div class="relative flex h-24 items-center">
        <a class="inline-block" href="#">
          <img class="h-10" src="aurora-assets/logos/aurora-logo.svg" alt="">
        </a>
        <button x-on:click="mobileNavOpen = !mobileNavOpen" class="lg:hidden flex items-center justify-center h-10 w-10 ml-auto bg-gradient-to-b from-cyanGreen-800 to-cyan-800 rounded-lg">
          <svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
            <path d="M3 5H21" stroke="white" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"></path>
            <path d="M3 12H21" stroke="white" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"></path>
            <path d="M3 19H21" stroke="white" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"></path>
          </svg>
        </button>
        <div class="absolute top-1/2 left-1/2 transform -translate-x-1/2 -translate-y-1/2 hidden lg:flex items-center">
          <a class="inline-block hover:text-yellowGreen-700 mr-10" href="#">
            <div class="flex items-center">
              <span class="mr-3">Product</span>
              <svg width="10" height="6" viewBox="0 0 10 6" fill="none" xmlns="http://www.w3.org/2000/svg">
                <path d="M1 1L5 5L9 1" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"></path>
              </svg>
            </div>
          </a>
          <a class="inline-block hover:text-yellowGreen-700 mr-10" href="#">Features</a><a class="inline-block hover:text-yellowGreen-700 mr-10" href="#">Pricing</a><a class="inline-block hover:text-yellowGreen-700" href="#">Resources</a>
        </div>
        <div class="hidden lg:block ml-auto"><a class="inline-flex items-center justify-center mr-4 h-10 px-4 text-center leading-loose text-sm text-gray-700 hover:text-yellowGreen-700 font-semibold border border-gray-200 hover:border-yellowGreen-600 shadow-sm hover:shadow-none rounded-lg transition duration-200" href="#">Login</a><a class="inline-flex items-center justify-center h-10 px-4 text-center leading-loose text-sm text-white font-semibold border border-yellowGreen-700 bg-yellowGreen-600 hover:bg-yellowGreen-700 rounded-lg transition duration-200" href="#">Get Started</a></div>
      </div>
    </div>
  </nav>
  <div :class="{'block': mobileNavOpen, 'hidden': !mobileNavOpen}" class="hidden fixed top-0 left-0 bottom-0 w-5/6 max-w-md z-50">
    <div x-on:click="mobileNavOpen = !mobileNavOpen" class="fixed inset-0 bg-teal-800 opacity-70"></div>
    <nav class="relative flex flex-col py-6 px-10 w-full h-full bg-white overflow-y-auto">
      <div class="flex mb-auto items-center">
        <a class="inline-block mr-auto" href="#">
          <img class="h-10" src="aurora-assets/logos/aurora-logo.svg" alt="">
        </a>
        <button x-on:click="mobileNavOpen = !mobileNavOpen">
          <svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
            <path d="M6 18L18 6M6 6L18 18" stroke="#111827" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"></path>
          </svg>
        </button>
      </div>
      <div class="py-12 mb-auto">
        <ul class="flex-col">
          <li class="mb-6"><a class="inline-block text-black" href="#">Product</a></li>
          <li class="mb-6"><a class="inline-block text-black" href="#">Features</a></li>
          <li class="mb-6"><a class="inline-block text-black" href="#">Pricing</a></li>
          <li><a class="inline-block text-black" href="#">Resources</a></li>
        </ul>
      </div>
      <div><a class="flex items-center justify-center h-12 mb-4 px-4 text-center text-base text-gray-700 font-semibold border border-gray-200 hover:bg-gray-100 shadow-lg rounded-lg transition duration-200" href="#">Login</a><a class="flex items-center justify-center h-12 px-4 text-center text-base text-white font-semibold bg-gradient-to-b from-cyanGreen-800 to-cyan-800 rounded-lg transition duration-200" href="#">Get Started</a></div>
    </nav>
  </div>
</section>

Navigation (horizontal) from asitrastudio

Tailwind CSS

asitrastudio

Minimal header navigation bar with logo, links, and consultation CTA

A horizontal top navigation bar with a wordmark logo on the left, four text links (About, Services, Projects, Contact us), and an outlined pill-shaped call-to-action button labeled "Get consulation" with an arrow on the right. The layout is a single row with a white background and black text.

<section x-data="{ mobileNavOpen: false }">
  <nav>
    <div class="container mx-auto px-4">
      <div class="flex h-24 items-center">
        <a class="inline-block" href="#">
          <img class="h-5" src="asitrastudio-assets/logos/logo-asi.svg" alt="">
        </a>
        <button x-on:click="mobileNavOpen = !mobileNavOpen" class="lg:hidden py-1 ml-auto">
          <svg width="44" height="16" viewBox="0 0 44 16" fill="none" xmlns="http://www.w3.org/2000/svg"><rect width="44" height="2" rx="1" fill="black"></rect><rect y="14" width="44" height="2" rx="1" fill="black"></rect></svg>
        </button>
        <div class="hidden lg:flex ml-auto mr-12 items-center"><a class="inline-block hover:underline mr-10" href="#">About</a><a class="inline-block hover:underline mr-10" href="#">Services</a><a class="inline-block hover:underline mr-10" href="#">Projects</a><a class="inline-block hover:underline" href="#">Contact us</a></div>
        <a class="group hidden lg:inline-flex py-4 px-8 items-center justify-center leading-none font-medium text-black hover:text-white border border-black rounded-full hover:bg-black transition duration-200" href="#">
          <span class="mr-2">Get consulation</span>
          <span class="group-hover:rotate-45 transform transition duration-100">
            <svg width="10" height="10" viewBox="0 0 10 10" fill="none" xmlns="http://www.w3.org/2000/svg">
              <path d="M9 1L1 9" stroke="currentColor" stroke-width="1.3" stroke-miterlimit="10" stroke-linecap="round" stroke-linejoin="round"></path>
              <path d="M9 8.33571V1H1.66429" stroke="currentColor" stroke-width="1.3" stroke-miterlimit="10" stroke-linecap="round" stroke-linejoin="round"></path>
            </svg>
          </span>
        </a>
      </div>
    </div>
  </nav>
  <div :class="{'block': mobileNavOpen,'hidden': !mobileNavOpen}" class="hidden fixed top-0 left-0 bottom-0 w-5/6 max-w-md z-50">
    <div x-on:click="mobileNavOpen = !mobileNavOpen" class="fixed inset-0 bg-gray-800 opacity-50"></div>
    <nav class="relative flex flex-col py-6 px-10 w-full h-full bg-white overflow-y-auto">
      <div class="flex mb-auto items-center">
        <a class="inline-block mr-auto" href="#">
          <img class="h-4" src="asitrastudio-assets/logos/logo-asi.svg" alt="">
        </a>
        <button x-on:click="mobileNavOpen = !mobileNavOpen">
          <svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
            <path d="M6 18L18 6M6 6L18 18" stroke="#111827" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"></path>
          </svg>
        </button>
      </div>
      <div class="py-12 mb-auto">
        <ul class="flex-col">
          <li class="mb-6"><a class="inline-block hover:underline text-black" href="#">About</a></li>
          <li class="mb-6"><a class="inline-block hover:underline text-black" href="#">Services</a></li>
          <li class="mb-6"><a class="inline-block hover:underline text-black" href="#">Projects</a></li>
          <li><a class="inline-block hover:underline text-black" href="#">Contact us</a></li>
        </ul>
      </div>
      <div><a class="block mb-3 px-4 py-4 text-center font-medium text-black hover:text-white border border-black hover:bg-black rounded-full transition duration-200" href="#">Login</a><a class="block px-4 py-4 text-center font-medium text-white bg-blue-500 hover:bg-blue-600 rounded-full transition duration-200" href="#">Sign in</a></div>
    </nav>
  </div>
</section>

Navigation (horizontal) from Coleos

Tailwind CSS

Coleos

Coleos Site Header with Top Utility Bar and Main Navigation

A two-tier website header with a purple top bar showing contact email, phone number, language and currency selectors, login, and favorites links. Below it, a white main bar contains the Coleos logo, primary navigation links with dropdown indicators, and a rounded search input on the right.

<section x-data="{ mobileNavOpen: false }">
  <nav>
    <div class="py-3 px-6 bg-purple-700">
      <div class="flex flex-wrap -mx-4 items-center justify-between">
        <div class="w-full lg:w-1/2 px-4 mb-6 lg:mb-0">
          <div class="-mb-4">
            <a class="group mb-4 mr-6 inline-flex items-center text-sm" href="#">
              <span class="mr-2 text-purple-400">
                <svg width="16" height="16" viewBox="0 0 16 16" fill="none" xmlns="http://www.w3.org/2000/svg">
                  <path d="M1.80008 0C1.67638 0.000162751 1.55768 0.0738921 1.47011 0.20508C1.38265 0.336427 1.3335 0.514491 1.3335 0.700042L1.3335 15.3001C1.3335 15.4857 1.38265 15.6637 1.47011 15.7951C1.55767 15.9263 1.67638 16 1.80008 16L14.5557 16C14.6794 16 14.7981 15.9263 14.8857 15.7951C14.9731 15.6637 15.0223 15.4857 15.0223 15.3001L15.0223 0.700042C15.0223 0.514495 14.9732 0.336431 14.8857 0.20508C14.7981 0.0738962 14.6794 0.000162501 14.5557 0L1.80008 0ZM3.12237 1.40009L13.2335 1.40009L8.17796 7.50305L3.12237 1.40009ZM2.26678 2.15839L7.88626 8.93968C7.96905 9.03913 8.07192 9.09333 8.17793 9.09333C8.28394 9.09333 8.38681 9.03913 8.4696 8.93968L14.0891 2.15839L14.0891 14.6001L2.26678 14.6001L2.26678 2.15839Z" fill="currentColor"></path>
                </svg>
              </span>
              <span class="text-white group-hover:text-purple-200">contact@shuffleux.com</span>
            </a>
            <a class="group mb-4 inline-flex items-center text-sm" href="#">
              <span class="mr-2 text-purple-400">
                <svg width="16" height="16" viewBox="0 0 16 16" fill="none" xmlns="http://www.w3.org/2000/svg">
                  <path d="M8.00004 0.666664C6.54961 0.666664 5.13181 1.09669 3.92564 1.9025C2.71971 2.70831 1.77976 3.85356 1.22469 5.1937C0.669627 6.53365 0.524488 8.00802 0.807413 9.43066C1.09034 10.8533 1.78883 12.1599 2.81442 13.1855C3.93385 14.3044 5.38513 15.0313 6.95158 15.2578C8.51798 15.4843 10.1156 15.1982 11.5062 14.4423C11.6499 14.3639 11.741 14.2147 11.7448 14.051C11.7488 13.8873 11.6653 13.734 11.5255 13.6486C11.3857 13.5634 11.211 13.5591 11.0673 13.6375C9.71636 14.363 8.14878 14.5758 6.65315 14.2364C5.1577 13.8971 3.83524 13.0287 2.92985 11.7912C2.02424 10.5536 1.59651 9.03056 1.72544 7.50257C1.85449 5.9746 2.53137 4.54477 3.63158 3.47655C4.73179 2.40832 6.18102 1.77386 7.71206 1.68995C9.24327 1.60604 10.7531 2.07851 11.9634 3.02017C13.1737 3.96184 14.0027 5.30925 14.2978 6.81397C14.5928 8.31883 14.3341 9.87958 13.5691 11.2085C13.4971 11.3339 13.3782 11.4255 13.2387 11.463C13.099 11.5006 12.9502 11.4811 12.8251 11.4088L12.0022 10.9335C12.0727 10.652 12.1389 10.3803 12.1988 10.1257H12.1989C12.2367 9.96845 12.2139 9.80268 12.1351 9.66155C12.0564 9.52029 11.9273 9.41393 11.7738 9.3635L10.1053 8.80777C9.98694 8.76727 9.8593 8.76241 9.73814 8.79373C9.61708 8.82505 9.50779 8.89124 9.424 8.98412L8.95347 9.49675C8.23859 9.14308 6.85728 7.76188 6.50317 7.04644L7.0158 6.57591C7.10867 6.49212 7.17476 6.38283 7.20618 6.26167C7.2375 6.14061 7.23264 6.01297 7.19215 5.89462L6.63611 4.22615C6.58568 4.07259 6.47931 3.94354 6.33806 3.86472C6.19692 3.78599 6.03114 3.76321 5.87392 3.801C5.61906 3.86094 5.34606 3.92746 5.06239 3.99862V3.99873C5.01638 4.01029 4.97243 4.02886 4.93204 4.05392C4.28616 4.45682 3.86598 5.13878 3.79653 5.89688C3.77418 6.05854 3.78098 6.22279 3.81672 6.38208C4.10128 7.68098 4.85202 8.9905 5.9302 10.0697C7.00838 11.149 8.31894 11.8986 9.61784 12.1833C9.71525 12.205 9.8146 12.2159 9.91428 12.2159C9.97746 12.2159 10.0405 12.2116 10.103 12.2031C10.587 12.1502 11.0462 11.9621 11.4282 11.6604L12.3673 12.2027C12.7034 12.3967 13.1028 12.449 13.4775 12.3481C13.8522 12.2472 14.1714 12.0014 14.3647 11.6649C15.0017 10.5488 15.3355 9.28527 15.3331 7.99997C15.3331 6.71274 14.9944 5.44815 14.3508 4.33335C13.707 3.21857 12.7813 2.29286 11.6665 1.64913C10.5517 1.00552 9.28709 0.666748 7.99991 0.666748L8.00004 0.666664ZM9.9822 11.2947C9.92626 11.3032 9.86935 11.3009 9.81427 11.2879C7.46763 10.7736 5.22649 8.53231 4.71201 6.18593C4.69905 6.13085 4.69668 6.07383 4.70521 6.01789C4.74063 5.55646 4.98091 5.13495 5.35996 4.86942C5.52638 4.82784 5.6887 4.78788 5.84539 4.7503L6.26806 6.01865L5.87367 6.3802C5.73059 6.51022 5.6335 6.68333 5.59722 6.87318C5.56093 7.06313 5.58728 7.25977 5.67227 7.43344C6.10412 8.32683 7.67312 9.89583 8.56676 10.3279H8.56665C8.74041 10.4128 8.93696 10.439 9.12692 10.4028C9.31676 10.3664 9.48976 10.2694 9.61978 10.1263L9.98122 9.73247L11.2497 10.1551C11.2119 10.3121 11.1721 10.4746 11.1306 10.6406V10.6407C10.8648 11.0194 10.4434 11.2594 9.98209 11.2948L9.9822 11.2947Z" fill="currentColor"></path>
                </svg>
              </span>
              <span class="text-white group-hover:text-purple-200">+1-202-555-0147</span>
            </a>
          </div>
        </div>
        <div class="w-full lg:w-1/2 px-4">
          <div class="flex flex-wrap -mb-4 items-center justify-end">
            <div class="mb-4">
              <div class="group relative mr-6 inline-block text-sm">
                <span class="absolute top-1/2 right-0 transform -translate-y-1/2 text-purple-400">
                  <svg width="16" height="16" viewBox="0 0 16 16" fill="none" xmlns="http://www.w3.org/2000/svg">
                    <path d="M8.47339 10.36L12.2401 6.58666C12.3025 6.52469 12.3521 6.45096 12.386 6.36972C12.4198 6.28848 12.4373 6.20134 12.4373 6.11333C12.4373 6.02532 12.4198 5.93819 12.386 5.85695C12.3521 5.77571 12.3025 5.70197 12.2401 5.64C12.1151 5.51583 11.9462 5.44614 11.7701 5.44614C11.5939 5.44614 11.425 5.51583 11.3001 5.64L7.96672 8.94L4.66672 5.64C4.54182 5.51583 4.37285 5.44614 4.19672 5.44614C4.0206 5.44614 3.85163 5.51583 3.72672 5.64C3.66373 5.70174 3.61362 5.77537 3.57929 5.85662C3.54496 5.93787 3.52709 6.02513 3.52672 6.11333C3.52709 6.20154 3.54496 6.28879 3.57929 6.37004C3.61362 6.45129 3.66373 6.52492 3.72672 6.58666L7.49339 10.36C7.55582 10.4277 7.63159 10.4817 7.71592 10.5186C7.80025 10.5555 7.89132 10.5746 7.98339 10.5746C8.07546 10.5746 8.16653 10.5555 8.25086 10.5186C8.33519 10.4817 8.41096 10.4277 8.47339 10.36Z" fill="currentColor"></path>
                  </svg>
                </span>
                <select class="relative pl-2 pr-5 bg-transparent cursor-pointer text-sm text-white hover:text-purple-200 appearance-none outline-none" name="" id="">
                  <option class="bg-purple-700" value="1">English</option>
                  <option class="bg-purple-700" value="2">Germany</option>
                  <option class="bg-purple-700" value="3">Polish</option>
                </select>
              </div>
              <div class="group relative inline-block text-sm">
                <span class="absolute top-1/2 right-0 transform -translate-y-1/2 text-purple-400">
                  <svg width="16" height="16" viewBox="0 0 16 16" fill="none" xmlns="http://www.w3.org/2000/svg">
                    <path d="M8.47339 10.36L12.2401 6.58666C12.3025 6.52469 12.3521 6.45096 12.386 6.36972C12.4198 6.28848 12.4373 6.20134 12.4373 6.11333C12.4373 6.02532 12.4198 5.93819 12.386 5.85695C12.3521 5.77571 12.3025 5.70197 12.2401 5.64C12.1151 5.51583 11.9462 5.44614 11.7701 5.44614C11.5939 5.44614 11.425 5.51583 11.3001 5.64L7.96672 8.94L4.66672 5.64C4.54182 5.51583 4.37285 5.44614 4.19672 5.44614C4.0206 5.44614 3.85163 5.51583 3.72672 5.64C3.66373 5.70174 3.61362 5.77537 3.57929 5.85662C3.54496 5.93787 3.52709 6.02513 3.52672 6.11333C3.52709 6.20154 3.54496 6.28879 3.57929 6.37004C3.61362 6.45129 3.66373 6.52492 3.72672 6.58666L7.49339 10.36C7.55582 10.4277 7.63159 10.4817 7.71592 10.5186C7.80025 10.5555 7.89132 10.5746 7.98339 10.5746C8.07546 10.5746 8.16653 10.5555 8.25086 10.5186C8.33519 10.4817 8.41096 10.4277 8.47339 10.36Z" fill="currentColor"></path>
                  </svg>
                </span>
                <select class="relative pl-2 pr-5 bg-transparent cursor-pointer text-sm text-white hover:text-purple-200 appearance-none outline-none" name="" id="">
                  <option class="bg-purple-700" value="1">USD</option>
                  <option class="bg-purple-700" value="2">EURO</option>
                  <option class="bg-purple-700" value="3">PLN</option>
                </select>
              </div>
            </div>
            <div class="ml-6 mb-4">
              <a class="group mr-6 inline-flex items-center text-sm" href="#">
                <span class="md:mr-2 text-purple-400">
                  <svg width="16" height="16" viewBox="0 0 16 16" fill="none" xmlns="http://www.w3.org/2000/svg">
                    <path d="M13.3334 13.3333V12C13.3334 11.2928 13.0525 10.6145 12.5524 10.1144C12.0523 9.61429 11.374 9.33334 10.6667 9.33334H5.33341C4.62617 9.33334 3.94789 9.61429 3.4478 10.1144C2.9477 10.6145 2.66675 11.2928 2.66675 12V13.3333" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"></path>
                    <path d="M7.99992 6.66667C9.47268 6.66667 10.6666 5.47276 10.6666 4C10.6666 2.52724 9.47268 1.33334 7.99992 1.33334C6.52716 1.33334 5.33325 2.52724 5.33325 4C5.33325 5.47276 6.52716 6.66667 7.99992 6.66667Z" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"></path>
                  </svg>
                </span>
                <span class="hidden md:inline-block text-white group-hover:text-purple-200">Login</span>
              </a>
              <a class="group mr-6 inline-flex items-center text-sm" href="#">
                <span class="md:mr-2 text-purple-400">
                  <svg width="16" height="16" viewBox="0 0 16 16" fill="none" xmlns="http://www.w3.org/2000/svg">
                    <g clip-path="url(#clip0_1208_8162)">
                      <path d="M14.1941 3.07455C13.8536 2.73389 13.4493 2.46365 13.0043 2.27927C12.5594 2.0949 12.0824 2 11.6008 2C11.1191 2 10.6422 2.0949 10.1972 2.27927C9.75224 2.46365 9.34795 2.73389 9.00745 3.07455L8.30078 3.78122L7.59411 3.07455C6.90632 2.38676 5.97347 2.00036 5.00078 2.00036C4.02809 2.00036 3.09524 2.38676 2.40745 3.07455C1.71965 3.76235 1.33325 4.69519 1.33325 5.66788C1.33325 6.64057 1.71965 7.57342 2.40745 8.26122L3.11411 8.96788L8.30078 14.1545L13.4874 8.96788L14.1941 8.26122C14.5348 7.92071 14.805 7.51643 14.9894 7.07145C15.1738 6.62648 15.2687 6.14954 15.2687 5.66788C15.2687 5.18623 15.1738 4.70929 14.9894 4.26431C14.805 3.81934 14.5348 3.41505 14.1941 3.07455V3.07455Z" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"></path>
                    </g>
                  </svg>
                </span>
                <span class="hidden md:inline-block text-white group-hover:text-purple-200">Favorite</span>
              </a>
              <a class="inline-flex items-center text-sm text-purple-400 hover:text-purple-200" href="#">
                <svg width="18" height="17" viewBox="0 0 18 17" fill="none" xmlns="http://www.w3.org/2000/svg">
                  <path d="M6.99992 15.3333C7.36811 15.3333 7.66658 15.0349 7.66658 14.6667C7.66658 14.2985 7.36811 14 6.99992 14C6.63173 14 6.33325 14.2985 6.33325 14.6667C6.33325 15.0349 6.63173 15.3333 6.99992 15.3333Z" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"></path>
                  <path d="M14.3334 15.3333C14.7016 15.3333 15.0001 15.0349 15.0001 14.6667C15.0001 14.2985 14.7016 14 14.3334 14C13.9652 14 13.6667 14.2985 13.6667 14.6667C13.6667 15.0349 13.9652 15.3333 14.3334 15.3333Z" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"></path>
                  <path d="M1.66675 1.33334H4.33341L6.12008 10.26C6.18104 10.5669 6.34802 10.8426 6.59178 11.0389C6.83554 11.2351 7.14055 11.3393 7.45341 11.3333H13.9334C14.2463 11.3393 14.5513 11.2351 14.7951 11.0389C15.0388 10.8426 15.2058 10.5669 15.2667 10.26L16.3334 4.66667H5.00008" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"></path>
                </svg>
              </a>
            </div>
          </div>
        </div>
      </div>
    </div>
    <div class="h-20 py-4 px-6 bg-white">
      <div class="flex h-full -mx-4 items-center justify-between">
        <div class="w-auto sm:w-1/2 xl:w-auto px-4">
          <div class="flex items-center">
            <a class="inline-block mr-12 font-bold h-9" href="#">
              <img class="block" src="coleos-assets/logos/logo-coleos-2.svg" alt="">
            </a>
            <div class="hidden xl:block">
              <a class="inline-flex mr-10 items-center text-sm font-bold text-rhino-700 hover:text-rhino-400" href="#">
                <span class="mr-2">Home</span>
                <svg width="16" height="16" viewBox="0 0 16 16" fill="none" xmlns="http://www.w3.org/2000/svg">
                  <path d="M8.47315 10.36L12.2398 6.58667C12.3023 6.52469 12.3519 6.45096 12.3857 6.36972C12.4196 6.28848 12.437 6.20134 12.437 6.11333C12.437 6.02533 12.4196 5.93819 12.3857 5.85695C12.3519 5.77571 12.3023 5.70198 12.2398 5.64C12.1149 5.51583 11.9459 5.44614 11.7698 5.44614C11.5937 5.44614 11.4247 5.51583 11.2998 5.64L7.96648 8.94L4.66648 5.64C4.54157 5.51583 4.3726 5.44614 4.19648 5.44614C4.02036 5.44614 3.85139 5.51583 3.72648 5.64C3.66349 5.70174 3.61337 5.77537 3.57904 5.85662C3.54471 5.93787 3.52685 6.02513 3.52648 6.11333C3.52685 6.20154 3.54471 6.28879 3.57904 6.37004C3.61337 6.45129 3.66349 6.52492 3.72648 6.58667L7.49315 10.36C7.55557 10.4277 7.63134 10.4817 7.71568 10.5186C7.80001 10.5556 7.89108 10.5746 7.98315 10.5746C8.07521 10.5746 8.16628 10.5556 8.25062 10.5186C8.33495 10.4817 8.41072 10.4277 8.47315 10.36Z" fill="currentColor"></path>
                </svg>
              </a>
              <a class="inline-flex mr-10 items-center text-sm font-bold text-rhino-700 hover:text-rhino-400" href="#">
                <span class="mr-2">Pages</span>
                <svg width="16" height="16" viewBox="0 0 16 16" fill="none" xmlns="http://www.w3.org/2000/svg">
                  <path d="M8.47315 10.36L12.2398 6.58667C12.3023 6.52469 12.3519 6.45096 12.3857 6.36972C12.4196 6.28848 12.437 6.20134 12.437 6.11333C12.437 6.02533 12.4196 5.93819 12.3857 5.85695C12.3519 5.77571 12.3023 5.70198 12.2398 5.64C12.1149 5.51583 11.9459 5.44614 11.7698 5.44614C11.5937 5.44614 11.4247 5.51583 11.2998 5.64L7.96648 8.94L4.66648 5.64C4.54157 5.51583 4.3726 5.44614 4.19648 5.44614C4.02036 5.44614 3.85139 5.51583 3.72648 5.64C3.66349 5.70174 3.61337 5.77537 3.57904 5.85662C3.54471 5.93787 3.52685 6.02513 3.52648 6.11333C3.52685 6.20154 3.54471 6.28879 3.57904 6.37004C3.61337 6.45129 3.66349 6.52492 3.72648 6.58667L7.49315 10.36C7.55557 10.4277 7.63134 10.4817 7.71568 10.5186C7.80001 10.5556 7.89108 10.5746 7.98315 10.5746C8.07521 10.5746 8.16628 10.5556 8.25062 10.5186C8.33495 10.4817 8.41072 10.4277 8.47315 10.36Z" fill="currentColor"></path>
                </svg>
              </a>
              <a class="inline-flex mr-10 items-center text-sm font-bold text-rhino-700 hover:text-rhino-400" href="#">
                <span class="mr-2">Products</span>
                <svg width="16" height="16" viewBox="0 0 16 16" fill="none" xmlns="http://www.w3.org/2000/svg">
                  <path d="M8.47315 10.36L12.2398 6.58667C12.3023 6.52469 12.3519 6.45096 12.3857 6.36972C12.4196 6.28848 12.437 6.20134 12.437 6.11333C12.437 6.02533 12.4196 5.93819 12.3857 5.85695C12.3519 5.77571 12.3023 5.70198 12.2398 5.64C12.1149 5.51583 11.9459 5.44614 11.7698 5.44614C11.5937 5.44614 11.4247 5.51583 11.2998 5.64L7.96648 8.94L4.66648 5.64C4.54157 5.51583 4.3726 5.44614 4.19648 5.44614C4.02036 5.44614 3.85139 5.51583 3.72648 5.64C3.66349 5.70174 3.61337 5.77537 3.57904 5.85662C3.54471 5.93787 3.52685 6.02513 3.52648 6.11333C3.52685 6.20154 3.54471 6.28879 3.57904 6.37004C3.61337 6.45129 3.66349 6.52492 3.72648 6.58667L7.49315 10.36C7.55557 10.4277 7.63134 10.4817 7.71568 10.5186C7.80001 10.5556 7.89108 10.5746 7.98315 10.5746C8.07521 10.5746 8.16628 10.5556 8.25062 10.5186C8.33495 10.4817 8.41072 10.4277 8.47315 10.36Z" fill="currentColor"></path>
                </svg>
              </a>
              <a class="inline-flex mr-10 items-center text-sm font-bold text-rhino-700 hover:text-rhino-400" href="#">Blog</a><a class="inline-flex mr-10 items-center text-sm font-bold text-rhino-700 hover:text-rhino-400" href="#">Shop</a><a class="inline-flex items-center text-sm font-bold text-rhino-700 hover:text-rhino-400" href="#">Contact</a>
            </div>
          </div>
        </div>
        <div class="w-auto sm:w-1/2 xl:w-auto px-4">
          <div class="flex items-center justify-end">
            <div class="hidden md:flex items-center px-6 py-1 border border-coolGray-200 rounded-full">
              <input class="h-12 bg-transparent border-0 text-sm text-coolGray-500 placeholder-coolGray-500 outline-none" type="search" placeholder="Search...">
              <button class="inline-block text-coolGray-400 hover:text-rhino-500" type="submit">
                <svg width="14" height="14" viewBox="0 0 14 14" fill="none" xmlns="http://www.w3.org/2000/svg">
                  <path d="M6.33333 11.6667C9.27885 11.6667 11.6667 9.27885 11.6667 6.33333C11.6667 3.38782 9.27885 1 6.33333 1C3.38782 1 1 3.38782 1 6.33333C1 9.27885 3.38782 11.6667 6.33333 11.6667Z" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"></path>
                  <path d="M13.0001 13L10.1001 10.1" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"></path>
                </svg>
              </button>
            </div>
            <button x-on:click="mobileNavOpen = !mobileNavOpen" class="xl:hidden ml-8 text-coolGray-400">
              <svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
                <path d="M3 12H21" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"></path>
                <path d="M3 6H21" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"></path>
                <path d="M3 18H21" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"></path>
              </svg>
            </button>
          </div>
        </div>
      </div>
    </div>
  </nav>
  <div :class="{ 'block': mobileNavOpen, 'hidden': !mobileNavOpen }" class="hidden fixed top-0 left-0 bottom-0 w-5/6 max-w-md z-50">
    <div x-on:click="mobileNavOpen = !mobileNavOpen" class="fixed inset-0 bg-purple-800 opacity-70"></div>
    <nav class="relative flex flex-col pt-12 pb-6 px-8 w-full h-full bg-white overflow-y-auto">
      <div class="flex mb-12 items-center">
        <a class="inline-block mr-auto" href="#">
          <img class="h-8" src="coleos-assets/logos/logo-coleos-2.svg" alt="">
        </a>
        <button x-on:click="mobileNavOpen = !mobileNavOpen">
          <svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
            <path d="M6 18L18 6M6 6L18 18" stroke="#252E4A" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"></path>
          </svg>
        </button>
      </div>
      <div class="flex w-full max-w-xs items-center px-6 border border-coolGray-200 rounded-full">
        <input class="h-12 w-full bg-transparent border-0 text-sm text-coolGray-500 placeholder-coolGray-500 outline-none" type="search" placeholder="Search...">
        <button class="inline-block ml-auto text-coolGray-400 hover:text-rhino-500" type="submit">
          <svg width="14" height="14" viewBox="0 0 14 14" fill="none" xmlns="http://www.w3.org/2000/svg">
            <path d="M6.33333 11.6667C9.27885 11.6667 11.6667 9.27885 11.6667 6.33333C11.6667 3.38782 9.27885 1 6.33333 1C3.38782 1 1 3.38782 1 6.33333C1 9.27885 3.38782 11.6667 6.33333 11.6667Z" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"></path>
            <path d="M13.0001 13L10.1001 10.1" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"></path>
          </svg>
        </button>
      </div>
      <div class="py-12 mb-auto">
        <ul class="flex-col">
          <li class="mb-3">
            <a class="group mr-6 inline-flex items-center text-base" href="#">
              <span class="mr-2 text-purple-400">
                <svg width="16" height="16" viewBox="0 0 16 16" fill="none" xmlns="http://www.w3.org/2000/svg">
                  <path d="M13.3334 13.3333V12C13.3334 11.2928 13.0525 10.6145 12.5524 10.1144C12.0523 9.61429 11.374 9.33334 10.6667 9.33334H5.33341C4.62617 9.33334 3.94789 9.61429 3.4478 10.1144C2.9477 10.6145 2.66675 11.2928 2.66675 12V13.3333" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"></path>
                  <path d="M7.99992 6.66667C9.47268 6.66667 10.6666 5.47276 10.6666 4C10.6666 2.52724 9.47268 1.33334 7.99992 1.33334C6.52716 1.33334 5.33325 2.52724 5.33325 4C5.33325 5.47276 6.52716 6.66667 7.99992 6.66667Z" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"></path>
                </svg>
              </span>
              <span class="font-semibold text-rhino-700">Login</span>
            </a>
          </li>
          <li class="mb-3">
            <a class="group mr-6 inline-flex items-center text-base" href="#">
              <span class="mr-2 text-purple-400">
                <svg width="16" height="16" viewBox="0 0 16 16" fill="none" xmlns="http://www.w3.org/2000/svg">
                  <g clip-path="url(#clip0_1208_8162)">
                    <path d="M14.1941 3.07455C13.8536 2.73389 13.4493 2.46365 13.0043 2.27927C12.5594 2.0949 12.0824 2 11.6008 2C11.1191 2 10.6422 2.0949 10.1972 2.27927C9.75224 2.46365 9.34795 2.73389 9.00745 3.07455L8.30078 3.78122L7.59411 3.07455C6.90632 2.38676 5.97347 2.00036 5.00078 2.00036C4.02809 2.00036 3.09524 2.38676 2.40745 3.07455C1.71965 3.76235 1.33325 4.69519 1.33325 5.66788C1.33325 6.64057 1.71965 7.57342 2.40745 8.26122L3.11411 8.96788L8.30078 14.1545L13.4874 8.96788L14.1941 8.26122C14.5348 7.92071 14.805 7.51643 14.9894 7.07145C15.1738 6.62648 15.2687 6.14954 15.2687 5.66788C15.2687 5.18623 15.1738 4.70929 14.9894 4.26431C14.805 3.81934 14.5348 3.41505 14.1941 3.07455V3.07455Z" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"></path>
                  </g>
                </svg>
              </span>
              <span class="font-semibold text-rhino-700">Favorite</span>
            </a>
          </li>
          <li class="mb-12">
            <a class="inline-flex items-center text-base text-purple-400 hover:text-purple-200" href="#">
              <span class="mr-2 text-purple-400">
                <svg width="18" height="17" viewBox="0 0 18 17" fill="none" xmlns="http://www.w3.org/2000/svg">
                  <path d="M6.99992 15.3333C7.36811 15.3333 7.66658 15.0349 7.66658 14.6667C7.66658 14.2985 7.36811 14 6.99992 14C6.63173 14 6.33325 14.2985 6.33325 14.6667C6.33325 15.0349 6.63173 15.3333 6.99992 15.3333Z" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"></path>
                  <path d="M14.3334 15.3333C14.7016 15.3333 15.0001 15.0349 15.0001 14.6667C15.0001 14.2985 14.7016 14 14.3334 14C13.9652 14 13.6667 14.2985 13.6667 14.6667C13.6667 15.0349 13.9652 15.3333 14.3334 15.3333Z" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"></path>
                  <path d="M1.66675 1.33334H4.33341L6.12008 10.26C6.18104 10.5669 6.34802 10.8426 6.59178 11.0389C6.83554 11.2351 7.14055 11.3393 7.45341 11.3333H13.9334C14.2463 11.3393 14.5513 11.2351 14.7951 11.0389C15.0388 10.8426 15.2058 10.5669 15.2667 10.26L16.3334 4.66667H5.00008" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"></path>
                </svg>
              </span>
              <span class="font-semibold text-rhino-700">Cart</span>
            </a>
          </li>
          <li class="mb-4">
            <a class="flex items-center text-base font-bold text-rhino-700" href="#">
              <span class="mr-2">Home</span>
              <svg width="16" height="16" viewBox="0 0 16 16" fill="none" xmlns="http://www.w3.org/2000/svg">
                <path d="M8.47315 10.36L12.2398 6.58667C12.3023 6.52469 12.3519 6.45096 12.3857 6.36972C12.4196 6.28848 12.437 6.20134 12.437 6.11333C12.437 6.02533 12.4196 5.93819 12.3857 5.85695C12.3519 5.77571 12.3023 5.70198 12.2398 5.64C12.1149 5.51583 11.9459 5.44614 11.7698 5.44614C11.5937 5.44614 11.4247 5.51583 11.2998 5.64L7.96648 8.94L4.66648 5.64C4.54157 5.51583 4.3726 5.44614 4.19648 5.44614C4.02036 5.44614 3.85139 5.51583 3.72648 5.64C3.66349 5.70174 3.61337 5.77537 3.57904 5.85662C3.54471 5.93787 3.52685 6.02513 3.52648 6.11333C3.52685 6.20154 3.54471 6.28879 3.57904 6.37004C3.61337 6.45129 3.66349 6.52492 3.72648 6.58667L7.49315 10.36C7.55557 10.4277 7.63134 10.4817 7.71568 10.5186C7.80001 10.5556 7.89108 10.5746 7.98315 10.5746C8.07521 10.5746 8.16628 10.5556 8.25062 10.5186C8.33495 10.4817 8.41072 10.4277 8.47315 10.36Z" fill="currentColor"></path>
              </svg>
            </a>
          </li>
          <li class="mb-4">
            <a class="flex items-center text-base font-bold text-rhino-700" href="#">
              <span class="mr-2">Pages</span>
              <svg width="16" height="16" viewBox="0 0 16 16" fill="none" xmlns="http://www.w3.org/2000/svg">
                <path d="M8.47315 10.36L12.2398 6.58667C12.3023 6.52469 12.3519 6.45096 12.3857 6.36972C12.4196 6.28848 12.437 6.20134 12.437 6.11333C12.437 6.02533 12.4196 5.93819 12.3857 5.85695C12.3519 5.77571 12.3023 5.70198 12.2398 5.64C12.1149 5.51583 11.9459 5.44614 11.7698 5.44614C11.5937 5.44614 11.4247 5.51583 11.2998 5.64L7.96648 8.94L4.66648 5.64C4.54157 5.51583 4.3726 5.44614 4.19648 5.44614C4.02036 5.44614 3.85139 5.51583 3.72648 5.64C3.66349 5.70174 3.61337 5.77537 3.57904 5.85662C3.54471 5.93787 3.52685 6.02513 3.52648 6.11333C3.52685 6.20154 3.54471 6.28879 3.57904 6.37004C3.61337 6.45129 3.66349 6.52492 3.72648 6.58667L7.49315 10.36C7.55557 10.4277 7.63134 10.4817 7.71568 10.5186C7.80001 10.5556 7.89108 10.5746 7.98315 10.5746C8.07521 10.5746 8.16628 10.5556 8.25062 10.5186C8.33495 10.4817 8.41072 10.4277 8.47315 10.36Z" fill="currentColor"></path>
              </svg>
            </a>
          </li>
          <li class="mb-4"><a class="flex items-center text-base font-bold text-rhino-700" href="#">Products</a></li>
          <li class="mb-4"><a class="flex items-center text-base font-bold text-rhino-700" href="#">Blog</a></li>
          <li class="mb-4"><a class="flex items-center text-base font-bold text-rhino-700" href="#">Shop</a></li>
          <li><a class="flex items-center text-base font-bold text-rhino-700 hover:text-rhino-400" href="#">Contact</a></li>
        </ul>
      </div>
      <div>
        <p class="text-center text-sm text-coolGray-400">Coleos Shuffle 2023</p>
      </div>
    </nav>
  </div>
</section>

Navigation (horizontal) from Consulty

Tailwind CSS

Consulty

Consulty Top Navigation Bar with Hiring Badge and CTA Buttons

A horizontal site header showing the Consulty logo, a yellow 'We are hiring!' pill badge, text navigation links with dropdown indicators for Products and Resources, and outlined Sign In and filled black 'Get A Free Consultation' buttons on a light background.

<div x-data="{ mobileNavOpen: false }">
    <nav class="relative p-4">
        <div class="flex items-center justify-between">
            <div class="flex items-center gap-3">
                <a href="#" class="inline-block">
                    <img class="h-7" src="consulty-assets/logos/consulty-logo2.svg" alt="">
                </a>
                <span class="hidden lg:block px-2 py-1 bg-orange-50 border border-orange-100 rounded-3xl text-orange-500 text-xs font-medium tracking-tight">We are hiring!</span>
            </div>
            <ul class="hidden lg:flex items-center gap-2">
                <li>
                    <a href="#" class="inline-block py-2 px-3 hover:bg-gray-100 group transition duration-200 rounded-full">
                        <div class="flex items-center gap-2">
                            <span class=" group-hover:text-black text-sm font-medium tracking-tight">Products</span>
                            <div class=" group-hover:text-black transition duration-200">
                                <svg xmlns="http://www.w3.org/2000/svg" width="17" height="16" viewBox="0 0 17 16" fill="none">
                                    <path d="M12.848 6L8.18132 10.6667L3.51465 6" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"></path>
                                </svg>
                            </div>
                        </div>
                    </a>
                </li>
                <li>
                    <a href="#" class="inline-block py-2 px-3 hover:bg-gray-100 hover:text-black transition duration-200  text-sm font-medium tracking-tight rounded-full">Case Studies</a>
                </li>
                <li>
                    <a href="#" class="inline-block py-2 px-3 hover:bg-gray-100 hover:text-black transition duration-200  text-sm font-medium tracking-tight rounded-full">Support</a>
                </li>
                <li>
                    <a href="#" class="inline-block py-2 px-3 hover:bg-gray-100 group transition duration-200 rounded-full">
                        <div class="flex items-center gap-2">
                            <span class="group-hover:text-black text-sm font-medium tracking-tight">Resources</span>
                            <div class="group-hover:text-black transition duration-200">
                                <svg xmlns="http://www.w3.org/2000/svg" width="17" height="16" viewBox="0 0 17 16" fill="none">
                                    <path d="M12.848 6L8.18132 10.6667L3.51465 6" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"></path>
                                </svg>
                            </div>
                        </div>
                    </a>
                </li>
            </ul>
            <div class="hidden lg:flex gap-4">
                <a href="#" class="bg-white h-14 border border-gray-200 rounded-full px-5 py-3 inline-flex items-center justify-center hover:bg-gray-100 focus:bg-gray-100 focus:ring-4 focus:ring-gray-200 transition duration-200 tracking-tight text-sm font-semibold">Sign In</a>
                <a href="#" class="bg-black h-14 rounded-full px-5 py-3 inline-flex items-center justify-center gap-2 hover:bg-orange-600 focus:bg-orange-500 focus:ring-4 focus:ring-orange-200 transition duration-200">
                    <span class="text-sm font-semibold tracking-tight text-white">Get A Free Consultation</span>
                    <svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 16 16" fill="none">
                        <path d="M14 6.66667H7.33333C4.38781 6.66667 2 9.05449 2 12V13.3333M14 6.66667L10 10.6667M14 6.66667L10 2.66667" stroke="white" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"></path>
                    </svg>
                </a>
            </div>
            <a x-on:click.prevent="mobileNavOpen = !mobileNavOpen" href="#" class="lg:hidden">
                <svg class="navbar-burger text-black" width="51" height="51" viewBox="0 0 56 56" fill="none" xmlns="http://www.w3.org/2000/svg">
                  <rect width="56" height="56" rx="28" fill="currentColor"></rect>
                  <path d="M37 32H19M37 24H19" stroke="white" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"></path>
                </svg>
            </a>
        </div>
    </nav>
    <div :class="{'hidden': !mobileNavOpen}" class="hidden fixed top-0 left-0 bottom-0 w-5/6 max-w-xs z-50">
        <div x-on:click="mobileNavOpen = !mobileNavOpen" class="fixed inset-0 bg-black opacity-20"></div>
        <nav class="relative p-8 w-full h-full bg-white overflow-y-auto">
            <div class="flex items-center justify-between">
                <a href="#" class="inline-block">
                    <img class="h-7" src="consulty-assets/logos/consulty-logo2.svg" alt="">
                </a>
                <a x-on:click.prevent="mobileNavOpen = !mobileNavOpen" href="#">
                    <svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
                      <path d="M6 18L18 6M6 6L18 18" stroke="#111827" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"></path>
                    </svg>
                </a>
            </div>
            <ul class="flex flex-col gap-12 py-12">
                <li>
                    <a href="#" class="inline-block py-2 px-3 hover:bg-gray-50 transition duration-200 rounded-full">
                        <div class="flex items-center gap-2">
                            <span class="text-sm font-medium tracking-tight">Products</span>
                            <svg xmlns="http://www.w3.org/2000/svg" width="17" height="16" viewBox="0 0 17 16" fill="none">
                                <path d="M12.848 6L8.18132 10.6667L3.51465 6" stroke="black" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"></path>
                            </svg>
                        </div>
                    </a>
                </li>
                <li>
                    <a href="#" class="inline-block py-2 px-3 hover:bg-gray-50 transition duration-200 text-sm font-medium tracking-tight rounded-full">Case Studies</a>
                </li>
                <li>
                    <a href="#" class="inline-block py-2 px-3 hover:bg-gray-50 transition duration-200 text-sm font-medium tracking-tight rounded-full">Support</a>
                </li>
                <li>
                    <a href="#" class="inline-block py-2 px-3 hover:bg-gray-50 transition duration-200 rounded-full">
                        <div class="flex items-center gap-2">
                            <span class="text-sm font-medium tracking-tight">Resources</span>
                            <svg xmlns="http://www.w3.org/2000/svg" width="17" height="16" viewBox="0 0 17 16" fill="none">
                                <path d="M12.848 6L8.18132 10.6667L3.51465 6" stroke="black" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"></path>
                            </svg>
                        </div>
                    </a>
                </li>
            </ul>
            <div class="flex flex-col gap-4">
                <a href="#" class="bg-white h-14 border border-gray-200 rounded-full px-5 py-3 inline-flex items-center justify-center hover:bg-gray-100 focus:bg-gray-100 focus:ring-4 focus:ring-gray-200 transition duration-200 tracking-tight text-sm font-semibold">Sign In</a>
                <a href="#" class="rounded-full bg-black px-5 py-3 h-14 hover:bg-orange-600 focus:bg-orange-500 focus:ring-4 focus:ring-orange-200 inline-flex items-center justify-center gap-2 transition duration-200">
                    <span class="text-white text-sm font-semibold tracking-tight">Get A Free Consultation</span>
                    <svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 16 16" fill="none">
                        <path d="M14 6.66666H7.33333C4.38781 6.66666 2 9.05447 2 12V13.3333M14 6.66666L10 10.6667M14 6.66666L10 2.66666" stroke="white" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"></path>
                    </svg>
                </a>
            </div>
        </nav>
    </div>
</div>

A well-designed navigation component determines how easily users navigate your site. This will affect both the conversion of the page and its position in SEO.

Browse the Tailwind navigation component variants available in our editor. Under each of them is clear code that you can easily edit. Components are sorted by UI libraries, which consist of many other elements in the same style. Each of these libraries was created by our talented designers to allow you to create diverse and pretty pages.

See all variations of Tailwind navigation components and the code underneath them in Shuffle Editor.

Try the demo for free.

Try for Free →

Redirecting to PayPal

Shuffle's Editors

Supporting tools

Plans

Shuffle’s design systems

Most popular ui libraries

Flex

Zanrly

Saturn

Flaro

Gradia

Basko

Artemis

Vendia

Tailwind CSS Navigation (horizontal) Components

Framework

UI Library

Components

Navigation (horizontal) from BoldUI

BoldUI Dark Navigation Bar with Logo and Sign In/Support Links

Navigation (horizontal) from Acros

Dark Top Navigation Bar with Logo, Links, and Search

Navigation (horizontal) from Bendis

Bendis Blue Top Navigation Bar with Sign In and Sign Up

Your next website starts here

Navigation (horizontal) from Metis

Metis Logo Wordmark on White Background

Navigation (horizontal) from Shuffle UX

Slate Blue Navigation Bar with Logo, Links, and Search

Navigation (horizontal) from Cronos

Cronos logo wordmark on white background

Navigation (horizontal) from NEUB

Yellow Neubrutalist Navigation Bar with Logo and CTA

Navigation (horizontal) from Casper

Casper Site Navigation Bar with Sign In and Sign Up

Navigation (horizontal) from Dashy

Dashboard Top Navigation Bar with Tabs and Trial Badge

Navigation (horizontal) from Mirga

Mirga Top Navigation Bar with Login and Sign Up Free

Navigation (horizontal) from Vista

Dark Top Navigation Bar with Vista Logo and Sign In

Navigation (horizontal) from Flow

Flow site navigation bar with logo, links, and login button

Navigation (horizontal) from Cyber

Dark Cyber Navigation Bar with Search

Navigation (horizontal) from FilyTreck

FilyTreck Top Navigation Bar with Login and Get Started Buttons

Navigation (horizontal) from Shopky

Shopky light top navigation bar with logo, menu links, cart, and account

Navigation (horizontal) from Vendia

Dark top navigation bar with Why Vendia dropdown menu

Navigation (horizontal) from Aurora

Aurora Top Navigation Bar with Login and Get Started

Navigation (horizontal) from asitrastudio

Minimal header navigation bar with logo, links, and consultation CTA

Navigation (horizontal) from Coleos

Coleos Site Header with Top Utility Bar and Main Navigation

Navigation (horizontal) from Consulty

Consulty Top Navigation Bar with Hiring Badge and CTA Buttons

The easiest way to create beautiful websites

How many people?

monthly

annual

lifetime

Create an account

From idea to beautiful design in minutes.

Products

Extensions

UI Components

Company

Support