Tailwind Navigation (horizontal) Components (366)

Framework

UI Library

7-Day Pass

Full Shuffle Editor access for just $10

Great for quick projects and for testing everything Shuffle can do. One-time payment, not a subscription.

New to Shuffle? Try our tools:

Multi-AI Designer Kick off several design directions at once, then build on your favorite. Visual Editor Build from UI components and templates, then customize every detail.

Components

Navigation (horizontal) from Saturn

Tailwind CSS

Saturn

<section x-data="{ mobileNavOpen: false }">
  <nav class="relative py-6 bg-transparent z-50">
    <div class="container px-4 mx-auto">
      <div class="flex items-center">
        <a class="inline-block text-lg font-bold" href="#">
          <img class="h-10" src="saturn-assets/logos/logo-saturn-dark.svg" alt="" width="auto">
        </a>
        <div class="lg:hidden ml-auto">
          <button x-on:click="mobileNavOpen = !mobileNavOpen" class="flex w-12 h-12 items-center justify-center bg-gray-100 hover:bg-gray-200 rounded-md transition duration-200">
            <svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
              <path d="M3 12H21" stroke="black" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"></path>
              <path d="M3 6H21" stroke="black" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"></path>
              <path d="M3 18H21" stroke="black" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"></path>
            </svg>
          </button>
        </div>
        <ul class="hidden lg:flex ml-14 lg:w-auto lg:space-x-12">
          <li class="group relative">
            <a class="inline-block text-sm text-gray-900 hover:text-orange-900 font-medium" href="#">Featured</a>
            <div class="hidden group-hover:block absolute top-full left-0 min-w-max max-w-xs p-4 z-50">
              <div class="-mb-2 ml-8 w-4 h-4 rounded-sm bg-white border-l border-t border-gray-200 transform rotate-45"></div>
              <div class="w-full max-w-xs bg-white border border-gray-100 rounded-3xl pt-4 pb-4 px-4">
                <div class="pb-3 mb-3 border-b border-gray-100"><a class="block py-3 px-4 text-sm text-gray-900 hover:bg-orange-50 rounded-lg" href="#">Featured</a><a class="block py-3 px-4 text-sm text-gray-900 hover:bg-orange-50 rounded-lg" href="#">Solutions</a></div>
                <div class="pb-3 mb-3 border-b border-gray-100">

Get the code for 13,400+ components

Create a free account to copy production-ready code from every component in the library.

Free account · No credit card · No password needed

Already have an account? Sign in

Saturn Top Navigation Bar with Sign In and Create Account

A horizontal top navigation bar with the saturn logo on the left, four text links (Featured, Solutions, Products, Articles) in the center-left, and a Sign In text link plus an outlined Create an account button on the right. The light background and orange accents give it a minimal, clean header appearance.

Navigation (horizontal) from DarkPro

Tailwind CSS

DarkPro

<section x-data="{ mobileNavOpen: false }">
  <nav class="py-8 bg-gradient-to-r from-neutral-950 via-neutral-900 to-neutral-950">
    <div class="container px-4 mx-auto relative">
      <div class="flex justify-between items-center">
        <a href="#">
            <img src="darkpro-assets/darkpro-logo.png" alt="" class="h-8">
        </a>
        <div class="lg:hidden">
            <button x-on:click="mobileNavOpen = !mobileNavOpen" class="block hover:text-white text-neutral-300 focus:outline-none transition-colors duration-200">
                <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 lg:flex absolute top-1/2 left-1/2 transform -translate-x-1/2 -translate-y-1/2 items-center w-auto space-x-8">
          <li><a class="text-sm hover:text-white font-medium text-neutral-300 transition-colors duration-200" href="#">Product</a></li>
          <li><a class="text-sm hover:text-white font-medium text-neutral-300 transition-colors duration-200" href="#">Solutions</a></li>
          <li><a class="text-sm hover:text-white font-medium text-neutral-300 transition-colors duration-200" href="#">Resources</a></li>
          <li><a class="text-sm hover:text-white font-medium text-neutral-300 transition-colors duration-200" href="#">Company</a></li>
        </ul>
        <div class="hidden lg:block">
          <div class="group flex p-1 border border-white border-opacity-20  border border-neutral-700 hover:border-neutral-600 transition-all duration-200 transition-all rounded-md">
              <input class="inline-block px-4 py-3 text-sm text-neutral-300 placeholder-neutral-400 font-semibold bg-neutral-800 border border-neutral-700 group-hover:border-neutral-600 focus:border-neutral-600 transition-all duration-200 transition-all rounded-l focus:outline-none focus:border-white transition-colors duration-200" placeholder="Search">

Get the code for 13,400+ components

Create a free account to copy production-ready code from every component in the library.

Free account · No credit card · No password needed

Already have an account? Sign in

Dark Navigation Bar with Logo, Links, and Search

A dark full-width top navigation bar showing a rounded "D" logo with the DarkPro wordmark on the left, four centered text links (Product, Solutions, Resources, Company), and a bordered search input with a magnifier button on the right. The layout is a single horizontal row with minimal styling.

Navigation (horizontal) from Flaro

Tailwind CSS

Flaro

<section x-data="{ mobileNavOpen: false }" class="overflow-hidden">
  <div class="flex items-center justify-between px-7 xl:px-40 py-5 bg-white">
    <div class="w-auto">
      <div class="flex flex-wrap items-center">
        <div class="w-auto mr-14">
          <a href="#">
            <img class="h-8" src="flaro-assets/logos/flaro-logo-black.svg" alt="">
          </a>
        </div>
      </div>
    </div>
    <div class="w-auto">
      <div class="flex flex-wrap items-center">
        <div class="w-auto hidden lg:block">
          <ul class="flex items-center mr-16">
            <li class="mr-9 font-medium hover:text-gray-700"><a href="#">Features</a></li>
            <li class="mr-9 font-medium hover:text-gray-700"><a href="#">Solutions</a></li>
            <li class="mr-9 font-medium hover:text-gray-700"><a href="#">Resources</a></li>
            <li class="font-medium hover:text-gray-700"><a href="#">Pricing</a></li>
          </ul>
        </div>
        <div class="w-auto hidden lg:block">
          <div class="inline-block">
            <button class="py-3 px-5 w-full text-white font-semibold rounded-xl focus:ring focus:ring-indigo-300 bg-indigo-600 hover:bg-indigo-700 transition ease-in-out duration-200" type="button">Try 14 Days Free Trial</button>

Get the code for 13,400+ components

Create a free account to copy production-ready code from every component in the library.

Free account · No credit card · No password needed

Already have an account? Sign in

Flaro Top Navigation Bar with Free Trial CTA

A horizontal top navigation bar showing the Flaro logo on the left, text links for Features, Solutions, Resources, and Pricing in the center-right, and a purple call-to-action button reading "Try 14 Days Free Trial" on the right. The white background and single horizontal row distinguish it as a site header.

Navigation (horizontal) from Gradia

Tailwind CSS

Gradia

<section x-data="{ mobileNavOpen: false }" class="overflow-hidden">
  <div class="flex items-center justify-between px-8 py-5 bg-white">
    <div class="w-auto">
      <div class="flex flex-wrap items-center">
        <div class="w-auto mr-14"><a href="#"><img src="gradia-assets/logos/gradia-name-black.svg" alt=""></a></div>
      </div>
    </div>
    <div class="w-auto">
      <div class="flex flex-wrap items-center">
        <div class="w-auto hidden lg:block">
          <ul class="flex items-center mr-10">
            <li class="font-heading mr-9 text-gray-900 hover:text-gray-700 text-lg"><a href="#" >Features</a></li>
            <li class="font-heading mr-9 text-gray-900 hover:text-gray-700 text-lg"><a href="#" >Solutions</a></li>
            <li class="font-heading mr-9 text-gray-900 hover:text-gray-700 text-lg"><a href="#" >Resources</a></li>
            <li class="font-heading text-gray-900 hover:text-gray-700 text-lg"><a href="#" >Pricing</a></li>
          </ul>
        </div>
        <div class="w-auto hidden lg:block">
          <button class="group relative p-0.5 font-heading block w-full md:w-auto text-lg text-gray-900 font-medium bg-gradient-cyan overflow-hidden rounded-10">
            <div class="absolute top-0 left-0 transform -translate-y-full group-hover:-translate-y-0 h-full w-full bg-gradient-cyan transition ease-in-out duration-500"></div>
            <div class="py-2 px-5 bg-white rounded-lg">
              <p class="relative z-10" >Start Free Trial</p>
            </div>
          </button>

Get the code for 13,400+ components

Create a free account to copy production-ready code from every component in the library.

Free account · No credit card · No password needed

Already have an account? Sign in

Gradia logo navigation bar with Start Free Trial button

A horizontal top navigation bar with the Gradia logo on the left, four text links (Features, Solutions, Resources, Pricing), and an outlined gradient-bordered Start Free Trial call-to-action button on the right. The light background and single-row layout make it a standard site header.

Navigation (horizontal) from Solstice

Tailwind CSS

Solstice

<section class="overflow-hidden" x-data="{ mobileNavOpen: false }">
  <div class="container px-4 mx-auto">
    <div class="flex items-center justify-between py-6">
      <div class="flex items-center gap-10">
        <a href="#">
          <img src="solstice-assets/images/logos/solstice-logo-dark.svg" alt="">
        </a>
        <ul class="hidden lg:flex items-center gap-8">
          <li>
            <a class="flex items-center flex-wrap gap-2 group" href="#">
              <span class="group-hover:text-opacity-70 transition duration-200">Platform</span>
              <div class="group-hover:text-opacity-70 transition duration-200">
                <svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 16 16" fill="none">
                  <path d="M13 5.5L8 10.5L3 5.5" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"></path>
                </svg>
              </div>
            </a>
          </li>
          <li class="hover:text-opacity-70 transition duration-200"><a href="#">Features</a></li>
          <li class="hover:text-opacity-70 transition duration-200"><a href="#">Community</a></li>
          <li>
            <a class="flex items-center flex-wrap gap-2 group" href="#">
              <span class="group-hover:text-opacity-70 transition duration-200">Resources</span>
              <div class="group-hover:text-opacity-70 transition duration-200">

Get the code for 13,400+ components

Create a free account to copy production-ready code from every component in the library.

Free account · No credit card · No password needed

Already have an account? Sign in

Solstice Top Navigation Bar with Login and Get Started

A horizontal top navigation bar showing the Solstice logo, menu links with dropdown indicators for Platform and Resources, plain links for Features and Community, and right-aligned Login and Get Started buttons. The bar uses a light background with a bold orange primary call-to-action.

Navigation (horizontal) from Basko

Tailwind CSS

Basko

<section class="bg-white" x-data="{ mobileNavOpen: false }">
  <div class="container px-4 mx-auto">
    <div class="flex items-center justify-between py-5">
      <div class="w-auto">
        <div class="flex flex-wrap items-center">
          <div class="w-auto pr-2">
            <a href="#">
              <img src="basko-assets/logos/basko-logo-dark.png" alt="">
            </a>
          </div>
        </div>
      </div>
      <div class="w-auto">
        <div class="flex flex-wrap items-center">
          <div class="w-auto hidden lg:block">
            <ul class="flex items-center mr-8">
              <li class="mr-14 font-medium hover:text-gray-900 tracking-tight"><a href="#">Features</a></li>
              <li class="mr-14 font-medium hover:text-gray-900 tracking-tight"><a href="#">Pricing</a></li>
              <li class="mr-8 font-medium hover:text-gray-900 tracking-tight border-r pr-8"><a href="#">Automation</a></li>
              <li class="font-medium hover:text-gray-900 tracking-tight"><a href="#">Customer Login</a></li>
            </ul>
          </div>
          <div class="w-auto hidden lg:block">
            <div class="inline-block"><a class="inline-block px-5 py-3 text-white font-semibold text-center tracking-tight bg-indigo-500 hover:bg-indigo-600 rounded-lg focus:ring-4 focus:ring-indigo-300 transition duration-200" href="#">Try 14 Days Free Trial</a></div>

Get the code for 13,400+ components

Create a free account to copy production-ready code from every component in the library.

Free account · No credit card · No password needed

Already have an account? Sign in

Basko Website Top Navigation Bar with Logo, Links, and Trial CTA

A horizontal top navigation bar with the Basko logo on the left, text links for Features, Pricing, Automation, and Customer Login, and a purple Try 14 Days Free Trial button on the right. The light background and single row layout suggest a marketing site header.

Navigation (horizontal) from Zanrly

Tailwind CSS

Zanrly

<section class="py-6 bg-white" x-data="{ mobileNavOpen: false }">
  <div class="container mx-auto px-4">
    <div class="flex items-center justify-between px-6 py-3.5 bg-gray-100 border border-gray-100 rounded-full">
      <div class="w-auto">
        <div class="flex flex-wrap items-center">
          <div class="w-auto">
            <a href="#">
              <img src="zanrly-assets/logos/zanrly-logo.svg" alt="">
            </a>
          </div>
        </div>
      </div>
      <div class="w-auto">
        <div class="flex flex-wrap items-center">
          <div class="w-auto hidden lg:block">
            <ul class="flex items-center justify-center">
              <li class="mr-9"><a class="inline-block text-sm font-bold text-gray-900 hover:text-gray-700" href="#">Features</a></li>
              <li class="mr-9"><a class="inline-block text-sm font-bold text-gray-900 hover:text-gray-700" href="#">Solutions</a></li>
              <li class="mr-9"><a class="inline-block text-sm font-bold text-gray-900 hover:text-gray-700" href="#">Resources</a></li>
              <li><a class="inline-block text-sm font-bold text-gray-900 hover:text-gray-700" href="#">Pricing</a></li>
            </ul>
          </div>
        </div>
      </div>

Get the code for 13,400+ components

Create a free account to copy production-ready code from every component in the library.

Free account · No credit card · No password needed

Already have an account? Sign in

Zanrly Light Gray Top Navigation Bar with Blue CTA

A horizontal navigation bar with the Zanrly logo on the left, centered text links for Features, Solutions, Resources, and Pricing, and Log In and Get Started actions on the right. The bar uses a light gray rounded container with a solid blue call-to-action button.

Navigation (horizontal) from Nightsable

Tailwind CSS

Nightsable

<section x-data="{ mobileNavOpen: false }">
  <div class="container px-4 mx-auto">
    <div class="flex items-center justify-between pt-5 pb-2.5 -m-2">
      <div class="w-auto p-2">
        <div class="flex flex-wrap items-center">
          <div class="w-auto">
            <a class="relative z-10 inline-block" href="#">
              <img src="nightsable-assets/logos/logo.svg" alt="">
            </a>
          </div>
        </div>
      </div>
      <div class="w-auto p-2">
        <div class="flex flex-wrap items-center">
          <div class="w-auto hidden lg:block">
            <ul class="flex items-center mr-12">
              <li class="mr-12 text-white font-medium hover:text-opacity-90 tracking-tighter"><a href="#">Home</a></li>
              <li class="mr-12 text-white font-medium hover:text-opacity-90 tracking-tighter"><a href="#">About us</a></li>
              <li class="mr-12 text-white font-medium hover:text-opacity-90 tracking-tighter"><a href="#">Wallet</a></li>
              <li class="text-white font-medium hover:text-opacity-90 tracking-tighter"><a href="#">Blog</a></li>
            </ul>
          </div>
          <div class="w-auto hidden lg:block">
            <div class="inline-block"><a class="inline-block px-8 py-4 text-white hover:text-black tracking-tighter hover:bg-green-400 border-2 border-white focus:border-green-400 focus:border-opacity-40 hover:border-green-400 focus:ring-4 focus:ring-green-400 focus:ring-opacity-40 rounded-full transition duration-300" href="#">Get in touch</a></div>

Get the code for 13,400+ components

Create a free account to copy production-ready code from every component in the library.

Free account · No credit card · No password needed

Already have an account? Sign in

Dark top navigation bar with Nightsable logo, four text links, and outlined Get in touch button

A horizontal dark navigation bar showing the Nightsable logo on the left, text links for Home, About us, Wallet, and Blog in the center-right, and an outlined pill-shaped Get in touch button on the right. A blue strip runs along the bottom edge.

Navigation (horizontal) from Zeus

Tailwind CSS

Zeus

<section class="py-8" x-data="{ mobileNavOpen: false }">
  <div class="container px-4 mx-auto">
    <nav>
      <div class="flex justify-between items-center">
        <a class="text-lg font-medium" href="#">
          <img class="h-7" src="zeus-assets/logo/logo-zeus-red.svg" alt="" width="auto">
        </a>
        <div class="lg:hidden">
          <button x-on:click="mobileNavOpen = !mobileNavOpen" class="flex items-center p-3 hover:bg-gray-50 rounded">
            <svg class="block h-4 w-4" 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:ml-auto lg:mr-12 lg:items-center lg:w-auto lg:space-x-12">
          <li><a class="font-medium text-sm" href="#">About</a></li>
          <li><a class="font-medium text-sm" href="#">Company</a></li>
          <li><a class="font-medium text-sm" href="#">Services</a></li>
          <li><a class="font-medium text-sm" href="#">Testimonials</a></li>
        </ul>
        <div class="hidden lg:block"><a class="inline-block py-3 px-8 text-sm text-white font-medium leading-normal bg-red-400 hover:bg-red-300 rounded transition duration-200" href="#">Contact Us</a></div>
      </div>
    </nav>

Get the code for 13,400+ components

Create a free account to copy production-ready code from every component in the library.

Free account · No credit card · No password needed

Already have an account? Sign in

Zeus Logo Top Navigation Bar with Contact Us Button

A horizontal site header showing a red lightning-bolt logo with the wordmark Zeus on the left, text navigation links About, Company, Services, and Testimonials in the center-right, and a red Contact Us call-to-action button on the right. The bar is minimal on a white background.

Navigation (horizontal) from Artemis Dashboard

Tailwind CSS

Artemis Dashboard

<section x-data="{ mobileNavOpen: false }">
  <nav class="relative">
    <div class="p-6 flex items-center bg-gray-800">
      <a class="flex-shrink-0 mr-12 text-2xl text-white font-semibold" href="#">
        <img class="h-10" src="artemis-assets/logos/artemis-logo.svg" alt="" width="auto">
      </a>
      <ul class="hidden xl:flex">
        <li>
          <a class="flex mr-10 items-center text-gray-50 hover:text-gray-100 text-sm" href="#">
            <svg class="text-gray-500 w-5 h-5 mr-2" width="18" height="18" viewBox="0 0 18 18" fill="none" xmlns="http://www.w3.org/2000/svg">
              <path d="M14.9066 3.12886C14.9005 3.12235 14.8987 3.1137 14.8923 3.10734C14.8859 3.10098 14.8771 3.09905 14.8706 3.0929C13.3119 1.53919 11.2008 0.666748 8.99996 0.666748C6.79914 0.666748 4.68807 1.53919 3.12935 3.0929C3.12279 3.09905 3.11404 3.10093 3.10763 3.10734C3.10122 3.11375 3.09944 3.12234 3.09334 3.12886C1.93189 4.29587 1.14217 5.7808 0.823851 7.39621C0.505534 9.01163 0.672885 10.6851 1.30478 12.2055C1.93668 13.7259 3.00481 15.0251 4.37435 15.939C5.7439 16.8529 7.35348 17.3406 8.99996 17.3406C10.6464 17.3406 12.256 16.8529 13.6256 15.939C14.9951 15.0251 16.0632 13.7259 16.6951 12.2055C17.327 10.6851 17.4944 9.01163 17.1761 7.39621C16.8578 5.7808 16.068 4.29587 14.9066 3.12886ZM8.99992 15.6667C8.00181 15.6664 7.01656 15.4415 6.11714 15.0088C5.21773 14.576 4.42719 13.9465 3.80409 13.1667H7.15015C7.38188 13.4287 7.66662 13.6385 7.98551 13.7821C8.3044 13.9258 8.65017 14.0001 8.99992 14.0001C9.34968 14.0001 9.69544 13.9258 10.0143 13.7821C10.3332 13.6385 10.618 13.4287 10.8497 13.1667H14.1958C13.5727 13.9465 12.7821 14.576 11.8827 15.0088C10.9833 15.4416 9.99804 15.6664 8.99992 15.6667ZM8.16659 11.5001C8.16659 11.3353 8.21546 11.1741 8.30703 11.0371C8.3986 10.9001 8.52875 10.7933 8.68102 10.7302C8.83329 10.6671 9.00085 10.6506 9.1625 10.6828C9.32415 10.7149 9.47263 10.7943 9.58918 10.9108C9.70572 11.0274 9.78509 11.1759 9.81724 11.3375C9.8494 11.4992 9.83289 11.6667 9.76982 11.819C9.70675 11.9713 9.59994 12.1014 9.4629 12.193C9.32586 12.2845 9.16474 12.3334 8.99992 12.3334C8.77898 12.3332 8.56714 12.2453 8.41091 12.0891C8.25468 11.9329 8.16681 11.721 8.16659 11.5001ZM15.1751 11.5018L15.1665 11.5001H11.4999C11.4983 10.9848 11.3373 10.4826 11.0389 10.0624C10.7405 9.64231 10.3193 9.32485 9.83325 9.15364V6.50008C9.83325 6.27907 9.74546 6.06711 9.58918 5.91083C9.4329 5.75455 9.22093 5.66675 8.99992 5.66675C8.77891 5.66675 8.56695 5.75455 8.41067 5.91083C8.25439 6.06711 8.16659 6.27907 8.16659 6.50008V9.15364C7.68054 9.32485 7.25939 9.64231 6.96098 10.0624C6.66256 10.4826 6.50151 10.9848 6.49992 11.5001H2.83334L2.82474 11.5018C2.60799 10.967 2.46221 10.4061 2.39114 9.83341H3.16659C3.3876 9.83341 3.59956 9.74562 3.75584 9.58934C3.91212 9.43306 3.99992 9.2211 3.99992 9.00008C3.99992 8.77907 3.91212 8.56711 3.75584 8.41083C3.59956 8.25455 3.3876 8.16675 3.16659 8.16675H2.39114C2.54005 6.98222 3.00621 5.85993 3.74037 4.91851L4.28597 5.46411C4.36335 5.54149 4.4552 5.60286 4.5563 5.64474C4.65739 5.68661 4.76574 5.70816 4.87517 5.70816C4.98459 5.70816 5.09294 5.68661 5.19404 5.64474C5.29513 5.60286 5.38699 5.54148 5.46436 5.46411C5.54173 5.38674 5.60311 5.29488 5.64498 5.19379C5.68686 5.09269 5.70841 4.98434 5.70841 4.87492C5.70841 4.76549 5.68686 4.65714 5.64498 4.55605C5.60311 4.45495 5.54173 4.3631 5.46435 4.28572L4.91881 3.74017C5.86016 3.00626 6.98227 2.54022 8.16659 2.3913V3.16675C8.16659 3.38776 8.25439 3.59972 8.41067 3.756C8.56695 3.91228 8.77891 4.00008 8.99992 4.00008C9.22093 4.00008 9.4329 3.91228 9.58918 3.756C9.74546 3.59972 9.83325 3.38776 9.83325 3.16675V2.3913C11.0176 2.54022 12.1397 3.00626 13.081 3.74017L12.5355 4.28572C12.3792 4.44199 12.2914 4.65393 12.2914 4.87492C12.2914 5.09591 12.3792 5.30785 12.5355 5.46411C12.6917 5.62037 12.9037 5.70816 13.1247 5.70816C13.3457 5.70816 13.5576 5.62038 13.7139 5.46411L14.2595 4.91851C14.9936 5.85993 15.4598 6.98222 15.6087 8.16675H14.8333C14.6122 8.16675 14.4003 8.25455 14.244 8.41083C14.0877 8.56711 13.9999 8.77907 13.9999 9.00008C13.9999 9.2211 14.0877 9.43306 14.244 9.58934C14.4003 9.74562 14.6122 9.83341 14.8333 9.83341H15.6087C15.5376 10.4061 15.3919 10.967 15.1751 11.5018Z" fill="currentColor"></path>
            </svg>
            <span>Dashboard</span>
          </a>
        </li>
        <li>
          <a class="flex mr-10 items-center text-gray-50 hover:text-gray-100 text-sm" href="#">
            <svg class="text-gray-500 w-5 h-5 mr-2" width="18" height="18" viewBox="0 0 18 18" fill="none" xmlns="http://www.w3.org/2000/svg">
              <path d="M9.00017 0.666748C4.41684 0.666748 0.66684 4.41675 0.66684 9.00008C0.66684 13.5834 4.41684 17.3334 9.00017 17.3334C13.5835 17.3334 17.3335 13.5834 17.3335 9.00008C17.3335 4.41675 13.5835 0.666748 9.00017 0.666748ZM2.58351 10.6667C2.41684 10.0834 2.33351 9.58342 2.33351 9.00008C2.33351 8.41675 2.41684 7.91675 2.58351 7.33342H4.16684C4.00017 8.41675 4.00017 9.58342 4.16684 10.6667H2.58351ZM3.25017 12.3334H4.41684C4.58351 13.0834 4.83351 13.8334 5.25017 14.5001C4.41684 13.9167 3.75017 13.1667 3.25017 12.3334ZM4.41684 5.66675H3.25017C3.75017 4.83342 4.41684 4.08342 5.25017 3.50008C4.83351 4.16675 4.58351 4.91675 4.41684 5.66675ZM8.16684 15.4167C7.16684 14.6667 6.41684 13.5834 6.16684 12.3334H8.16684V15.4167ZM8.16684 10.6667H5.75017C5.66684 10.0834 5.66684 9.58342 5.66684 9.00008C5.66684 8.41675 5.66684 7.91675 5.75017 7.33342H8.16684V10.6667ZM8.16684 5.66675H6.16684C6.41684 4.41675 7.16684 3.33342 8.16684 2.58341V5.66675ZM14.7502 5.66675H13.5835C13.4168 4.91675 13.1668 4.16675 12.7502 3.50008C13.5835 4.08342 14.2502 4.83342 14.7502 5.66675ZM9.83351 2.58341C10.8335 3.33342 11.5835 4.41675 11.8335 5.66675H9.83351V2.58341ZM9.83351 15.4167V12.3334H11.8335C11.5835 13.5834 10.8335 14.6667 9.83351 15.4167ZM12.2502 10.6667H9.83351V7.33342H12.2502C12.3335 8.41675 12.3335 9.58342 12.2502 10.6667ZM12.8335 14.5001C13.1668 13.8334 13.4168 13.0834 13.6668 12.3334H14.8335C14.2502 13.1667 13.5835 13.9167 12.8335 14.5001ZM13.9168 10.6667C14.0835 9.58342 14.0835 8.41675 13.9168 7.33342H15.5002C15.8335 8.41675 15.8335 9.58342 15.5002 10.6667H13.9168Z" fill="currentColor"></path>
            </svg>
            <span>Discover</span>
          </a>
        </li>
        <li>

Get the code for 13,400+ components

Create a free account to copy production-ready code from every component in the library.

Free account · No credit card · No password needed

Already have an account? Sign in

Artemis Dashboard Top Navigation Bar with Secondary Utility Row

A two-tier application header with a dark primary bar containing the Artemis logo, main navigation links (Dashboard, Discover, Users, Documents, Applications), notification and message icons, and a user profile with avatar; a light secondary row below provides utility links such as Support Center, Inbox, File Manager, and Data List, plus settings and logout icons.

Navigation (horizontal) from Trizzle

Tailwind CSS

Trizzle

<section class="relative" x-data="{ mobileNavOpen: false }">
  <nav class="flex items-center p-8 bg-gray-700 mb-3">
    <div class="w-full xl:w-auto px-2 xl:mr-12">
      <div class="flex items-center justify-between">
        <a class="inline-flex items-center h-8" href="#">
          <img src="trizzle-assets/logos/trizzle-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">
              <title>Mobile menu</title>
              <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 class="inline-block text-sm font-semibold text-gray-300 hover:text-gray-200" href="#">Overview</a></li>
        <li class="mr-10"><a class="inline-block text-sm font-semibold text-gray-300 hover:text-gray-200" href="#">Analytics</a></li>
        <li class="mr-10"><a class="inline-block text-sm font-semibold text-gray-300 hover:text-gray-200" href="#">Products</a></li>
        <li class="mr-10">
          <a class="inline-flex items-center text-sm font-semibold text-gray-300 hover:text-gray-200" href="#">

Get the code for 13,400+ components

Create a free account to copy production-ready code from every component in the library.

Free account · No credit card · No password needed

Already have an account? Sign in

Dark App Top Navigation Bar with Logo, Links, and User Menu

A dark horizontal top navigation bar for a web application showing the Trizzle logo, primary links (Overview, Analytics, Products, Orders with a badge, Customers), and utility icons with a user avatar and name on the right. Items are arranged in a single horizontal row with a blue accent on the notification badge.

Navigation (horizontal) from Wrexa

Tailwind CSS

Wrexa

<section x-data="{ mobileNavOpen: false }">
  <nav class="relative bg-gray-900 px-6 sm:px-12 pt-4">
    <div class="absolute top-1/2 left-1/2 transform -translate-x-1/2 -translate-y-1/2 z-10">
      <a class="inline-block" href="#">
        <img src="wrexa-assets/logos/logo-wrexa.svg" alt="" width="auto">
      </a>
    </div>
    <div class="3xl:hidden pb-4">
      <button x-on:click="mobileNavOpen = !mobileNavOpen" class="flex ml-auto items-center justify-center w-14 h-14 rounded-full bg-white hover:bg-gray-200">
        <svg width="20" height="9" viewBox="0 0 20 9" fill="none" xmlns="http://www.w3.org/2000/svg"><line x1="0.75" y1="1.25" x2="19.25" y2="1.25" stroke="black" stroke-width="1.5" stroke-linecap="round"></line><line x1="0.75" y1="8.25" x2="13.25" y2="8.25" stroke="black" stroke-width="1.5" stroke-linecap="round"></line></svg>
      </button>
    </div>
    <div class="hidden 3xl:block">
      <div class="pb-2"><a class="inline-block mr-6 text-xs text-gray-400 hover:text-gray-300" href="#">Account</a><a class="inline-block text-xs text-gray-400 hover:text-gray-300" href="#">Saved</a></div>
      <div>
        <div class="flex relative">
          <div class="w-5/12 mr-auto">
            <div class="pt-5 pr-24 border-t border-gray-100 border-opacity-10">
              <ul class="flex items-center justify-end">
                <li class="mr-6">
                  <a class="inline-flex items-center pb-5 pr-8 text-sm text-white hover:text-gray-200" href="#">
                    <span class="mr-4">Collection</span>
                    <svg width="12" height="7" viewBox="0 0 12 7" fill="none" xmlns="http://www.w3.org/2000/svg">
                      <path d="M10 2L6 6L2 2" stroke="white" stroke-width="1.5" stroke-miterlimit="10" stroke-linecap="square" stroke-linejoin="round"></path>

Get the code for 13,400+ components

Create a free account to copy production-ready code from every component in the library.

Free account · No credit card · No password needed

Already have an account? Sign in

Dark Minimal Top Navigation Bar with Centered Logo and Menu Button

A thin dark navigation bar with a circular logo mark centered at the top and a white circular hamburger menu button on the right. The bar has no visible text links, suggesting a minimal header for a full-screen menu or single-page site.

Navigation (horizontal) from Zospace

Tailwind CSS

Zospace

<section class="py-8 px-4 lg:px-10 bg-gray-800" x-data="{ mobileNavOpen: false }">
  <nav class="relative flex justify-between items-center">
    <a class="text-2xl text-white font-bold" href="#">
      <img class="h-7" src="zospace-assets/logos/zospace-logo.svg" alt="" width="auto">
    </a>
    <button class="p-2" x-on:click="mobileNavOpen = !mobileNavOpen">
      <svg class="w-10 h-3" width="39" height="13" viewBox="0 0 39 13" fill="none" xmlns="http://www.w3.org/2000/svg"><rect width="39" height="2" rx="1" fill="#C4C4C4"></rect><rect x="19" y="11" width="20" height="2" rx="1" fill="#C4C4C4"></rect></svg>
    </button>
  </nav>
  <div :class="{ 'hidden': !mobileNavOpen, 'block': mobileNavOpen }" class="fixed top-0 left-0 bottom-0 w-5/6 max-w-sm z-50 hidden">
    <div x-on:click="mobileNavOpen = !mobileNavOpen" class="fixed inset-0 bg-gray-800 opacity-80"></div>
    <nav class="relative flex flex-col py-8 h-full w-full bg-white overflow-y-auto">
      <div class="flex items-center mb-16 pr-6">
        <a class="ml-10 text-2xl text-gray-800 font-bold" href="#">
          <img class="h-7" src="zospace-assets/logos/zospace-dark-logo.svg" alt="" width="auto">
        </a>
      </div>
      <div>
        <ul>
          <li class="mb-1 px-10"><a class="block pl-8 py-4 text-xl text-gray-800 hover:bg-blueGray-50 rounded-xl" href="#">Product</a></li>
          <li class="mb-1 px-10"><a class="block pl-8 py-4 text-xl text-gray-800 hover:bg-blueGray-50 rounded-xl" href="#">Story</a></li>
          <li class="mb-1 px-10"><a class="block pl-8 py-4 text-xl text-gray-800 hover:bg-blueGray-50 rounded-xl" href="#">Features</a></li>
          <li class="mb-1 px-10"><a class="block pl-8 py-4 text-xl text-gray-800 hover:bg-blueGray-50 rounded-xl" href="#">Contact</a></li>
        </ul>

Get the code for 13,400+ components

Create a free account to copy production-ready code from every component in the library.

Free account · No credit card · No password needed

Already have an account? Sign in

Dark Minimal Header Bar with Zospace Logo and Hamburger Menu

A slim dark header bar showing a blue ring logo with the wordmark Zospace on the left and a two-line hamburger menu icon on the right. The component has no visible navigation links, indicating a compact top navigation bar that likely opens a menu overlay.

Navigation (horizontal) from Flex

Tailwind CSS

Flex

<section class="overflow-hidden">
  <div>
    <div class="px-8 py-6 xl:py-0 bg-white border-b border-coolGray-100">
      <div class="flex items-center justify-between -m-2">
        <div class="flex flex-wrap items-center w-auto p-2">
          <a class="block max-w-max xl:mr-14" href="#">
            <img src="flex-ui-assets/logos/dashboard/flex-ui-black-green.svg" alt="">
          </a>
          <ul class="hidden xl:flex flex-wrap">
            <li class="mr-8">
              <a class="flex flex-wrap items-center py-8 text-base font-medium text-coolGray-500 hover:text-green-500 border-b-2 border-transparent hover:border-green-500" href="#">
                <svg class="mr-2" width="24" height="24" viewbox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
                  <path d="M12 6C11.7348 6 11.4804 6.10536 11.2929 6.29289C11.1054 6.48043 11 6.73478 11 7V17C11 17.2652 11.1054 17.5196 11.2929 17.7071C11.4804 17.8946 11.7348 18 12 18C12.2652 18 12.5196 17.8946 12.7071 17.7071C12.8946 17.5196 13 17.2652 13 17V7C13 6.73478 12.8946 6.48043 12.7071 6.29289C12.5196 6.10536 12.2652 6 12 6ZM7 12C6.73478 12 6.48043 12.1054 6.29289 12.2929C6.10536 12.4804 6 12.7348 6 13V17C6 17.2652 6.10536 17.5196 6.29289 17.7071C6.48043 17.8946 6.73478 18 7 18C7.26522 18 7.51957 17.8946 7.70711 17.7071C7.89464 17.5196 8 17.2652 8 17V13C8 12.7348 7.89464 12.4804 7.70711 12.2929C7.51957 12.1054 7.26522 12 7 12ZM17 10C16.7348 10 16.4804 10.1054 16.2929 10.2929C16.1054 10.4804 16 10.7348 16 11V17C16 17.2652 16.1054 17.5196 16.2929 17.7071C16.4804 17.8946 16.7348 18 17 18C17.2652 18 17.5196 17.8946 17.7071 17.7071C17.8946 17.5196 18 17.2652 18 17V11C18 10.7348 17.8946 10.4804 17.7071 10.2929C17.5196 10.1054 17.2652 10 17 10ZM19 2H5C4.20435 2 3.44129 2.31607 2.87868 2.87868C2.31607 3.44129 2 4.20435 2 5V19C2 19.7956 2.31607 20.5587 2.87868 21.1213C3.44129 21.6839 4.20435 22 5 22H19C19.7956 22 20.5587 21.6839 21.1213 21.1213C21.6839 20.5587 22 19.7956 22 19V5C22 4.20435 21.6839 3.44129 21.1213 2.87868C20.5587 2.31607 19.7956 2 19 2ZM20 19C20 19.2652 19.8946 19.5196 19.7071 19.7071C19.5196 19.8946 19.2652 20 19 20H5C4.73478 20 4.48043 19.8946 4.29289 19.7071C4.10536 19.5196 4 19.2652 4 19V5C4 4.73478 4.10536 4.48043 4.29289 4.29289C4.48043 4.10536 4.73478 4 5 4H19C19.2652 4 19.5196 4.10536 19.7071 4.29289C19.8946 4.48043 20 4.73478 20 5V19Z" fill="currentColor"></path>
                </svg>
                <p class="text-coolGray-800">Dashboard</p>
              </a>
            </li>
            <li class="mr-8">
              <a class="flex flex-wrap items-center py-8 text-base font-medium text-coolGray-500 hover:text-green-500 border-b-2 border-transparent hover:border-green-500" href="#">
                <svg class="mr-2" width="24" height="24" viewbox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
                  <path d="M2.50003 8.86L11.5 14.06C11.6521 14.1478 11.8245 14.194 12 14.194C12.1756 14.194 12.348 14.1478 12.5 14.06L21.5 8.86C21.6512 8.77275 21.7768 8.64746 21.8646 8.49659C21.9523 8.34572 21.999 8.17452 22 8C22.0007 7.82379 21.9549 7.65053 21.8671 7.49775C21.7792 7.34497 21.6526 7.21811 21.5 7.13L12.5 1.94C12.348 1.85224 12.1756 1.80603 12 1.80603C11.8245 1.80603 11.6521 1.85224 11.5 1.94L2.50003 7.13C2.34743 7.21811 2.22081 7.34497 2.13301 7.49775C2.04521 7.65053 1.99933 7.82379 2.00003 8C2.00108 8.17452 2.04779 8.34572 2.13551 8.49659C2.22322 8.64746 2.34889 8.77275 2.50003 8.86ZM12 4L19 8L12 12L5.00003 8L12 4ZM20.5 11.17L12 16L3.50003 11.13C3.3859 11.0639 3.25981 11.021 3.12903 11.0038C2.99825 10.9866 2.86537 10.9955 2.73803 11.0299C2.61069 11.0643 2.49141 11.1235 2.38706 11.2042C2.28271 11.2849 2.19536 11.3854 2.13003 11.5C1.99966 11.7296 1.96539 12.0015 2.03471 12.2563C2.10403 12.5111 2.2713 12.7281 2.50003 12.86L11.5 18.06C11.6521 18.1478 11.8245 18.194 12 18.194C12.1756 18.194 12.348 18.1478 12.5 18.06L21.5 12.86C21.7288 12.7281 21.896 12.5111 21.9654 12.2563C22.0347 12.0015 22.0004 11.7296 21.87 11.5C21.8047 11.3854 21.7173 11.2849 21.613 11.2042C21.5087 11.1235 21.3894 11.0643 21.262 11.0299C21.1347 10.9955 21.0018 10.9866 20.871 11.0038C20.7402 11.021 20.6142 11.0639 20.5 11.13V11.17ZM20.5 15.17L12 20L3.50003 15.13C3.3859 15.0639 3.25981 15.021 3.12903 15.0038C2.99825 14.9866 2.86537 14.9955 2.73803 15.0299C2.61069 15.0643 2.49141 15.1235 2.38706 15.2042C2.28271 15.2849 2.19536 15.3854 2.13003 15.5C1.99966 15.7296 1.96539 16.0015 2.03471 16.2563C2.10403 16.5111 2.2713 16.7281 2.50003 16.86L11.5 22.06C11.6521 22.1478 11.8245 22.194 12 22.194C12.1756 22.194 12.348 22.1478 12.5 22.06L21.5 16.86C21.7288 16.7281 21.896 16.5111 21.9654 16.2563C22.0347 16.0015 22.0004 15.7296 21.87 15.5C21.8047 15.3854 21.7173 15.2849 21.613 15.2042C21.5087 15.1235 21.3894 15.0643 21.262 15.0299C21.1347 14.9955 21.0018 14.9866 20.871 15.0038C20.7402 15.021 20.6142 15.0639 20.5 15.13V15.17Z" fill="currentColor"></path>
                </svg>
                <p class="text-coolGray-800">Projects</p>
              </a>

Get the code for 13,400+ components

Create a free account to copy production-ready code from every component in the library.

Free account · No credit card · No password needed

Already have an account? Sign in

Flex App Top Navigation Bar with Dashboard, Projects, Tasks, and Profile

A horizontal top navigation bar with the Flex logo, icon-labeled links for Dashboard, Projects, Tasks, and Products, and right-aligned mail and notification icons plus a user avatar with name and email. It is a single-row header with a light background and a thin bottom divider.

Navigation (horizontal) from Uinel

Tailwind CSS

Uinel

<section x-data="{ mobileNavOpen: false }">
  <div class="py-1 text-center text-sm bg-white border-b border-gray-100">
    <p class="font-medium text-darkBlueGray-300 leading-10">
      <span>Hello, you are new here.</span>
      <span class="text-darkBlueGray-900">Get 20% off card!</span>
    </p>
  </div>
  <div class="px-6 lg:px-12 py-6">
    <nav class="flex justify-between">
      <div class="flex w-full items-center">
        <a href="#">
          <img class="h-12" src="uinel-assets/logos/ecommerce/uistore-gray-black.svg" alt="">
        </a>
        <ul class="hidden xl:flex px-4 ml-20 2xl:ml-40 mr-auto">
          <li class="mr-16"><a class="font-medium hover:text-darkBlueGray-400" href="#">Stories</a></li>
          <li class="relative mr-16">
            <a class="flex items-center font-medium hover:text-darkBlueGray-400" href="#">
              <span class="mr-4">Products</span>
              <svg width="8" height="5" viewBox="0 0 8 5" fill="none" xmlns="http://www.w3.org/2000/svg">
                <path d="M6.97291 0.193232C7.20854 -0.0644107 7.58938 -0.0644107 7.82328 0.193232C8.05804 0.450875 8.05978 0.867141 7.82328 1.12478L4.42529 4.80677C4.19053 5.06441 3.81056 5.06441 3.57406 4.80677L0.176073 1.12478C-0.0586909 0.868102 -0.0586909 0.450875 0.176073 0.193232C0.411706 -0.0644107 0.792544 -0.0644107 1.02644 0.193232L4.00098 3.21284L6.97291 0.193232Z" fill="currentColor"></path>
              </svg>
            </a>
            <div class="product-menu hidden absolute top-0 left-0 mt-24 -ml-64 pl-24 pr-16 pt-16 pb-24 bg-white rounded-lg z-50">
              <div class="absolute top-0 left-0 ml-72 w-7 h-7 bg-white transform rotate-45 -translate-y-1/2"></div>

Get the code for 13,400+ components

Create a free account to copy production-ready code from every component in the library.

Free account · No credit card · No password needed

Already have an account? Sign in

Ecommerce Top Navigation Bar with Promo Banner, Search, and User Menu

A horizontal header with a promotional announcement strip above a main bar containing the Uistore logo, text navigation links (Stories, Products, Outlet), a rounded search input, wishlist and cart icons with a badge count, and a user avatar with name and dropdown chevron. Content is arranged in one horizontal row on a light background.

Navigation (horizontal) from Yofte

Tailwind CSS

Yofte

<section class="relative" x-data="{ mobileNavOpen: false }">
  <nav class="flex justify-between bg-gray-100 border-b">
    <div class="px-12 py-8 flex w-full items-center">
      <a class="lg:mr-8 2xl:mr-20 text-3xl font-bold font-heading" href="#">
        <img class="h-9" src="yofte-assets/logos/yofte-logo.svg" alt="" width="auto">
      </a>
      <div class="hidden xl:flex max-w-xs py-3 pl-8 pr-2 bg-white rounded-lg">
        <svg class="w-8 h-10 mr-2" width="18" height="18" viewBox="0 0 18 18" fill="none" xmlns="http://www.w3.org/2000/svg">
          <path d="M17.5 17.1309L12.5042 11.9551" stroke="black" stroke-miterlimit="10" stroke-linecap="round" stroke-linejoin="round"></path>
          <path d="M7.27524 13.8672C10.8789 13.8672 13.8002 10.945 13.8002 7.34033C13.8002 3.73565 10.8789 0.813477 7.27524 0.813477C3.67159 0.813477 0.750244 3.73565 0.750244 7.34033C0.750244 10.945 3.67159 13.8672 7.27524 13.8672Z" stroke="black" stroke-miterlimit="10" stroke-linecap="round" stroke-linejoin="round"></path>
        </svg>
        <input class="w-full border-0 focus:ring-transparent focus:outline-none py-2" type="text" placeholder="">
        <select class="pl-6 pr-6 border-0 border-l border-gray-100 focus:border-gray-100 focus:ring-transparent focus:outline-none cursor-pointer" name="" id="">
          <option>All&nbsp;items</option>
          <option>Collection</option>
          <option>Option</option>
        </select>
      </div>
      <ul class="hidden xl:flex px-4 mx-auto font-semibold font-heading">
        <li class="mr-12"><a class="hover:text-gray-600" href="#">Category</a></li>
        <li class="mr-12"><a class="hover:text-gray-600" href="#">Collection</a></li>
        <li class="mr-12"><a class="hover:text-gray-600" href="#">Story</a></li>
        <li><a class="hover:text-gray-600" href="#">Brand</a></li>
      </ul>

Get the code for 13,400+ components

Create a free account to copy production-ready code from every component in the library.

Free account · No credit card · No password needed

Already have an account? Sign in

Yofte e-commerce top navigation bar with search and account actions

A horizontal header bar with the Yofte logo, a search input with a category dropdown, text navigation links (Category, Collection, Story, Brand), wishlist and cart icons with a count badge, and a Sign In action on the right. It uses a light gray background and a single header row layout.

Navigation (horizontal) from Shopal

Tailwind CSS

Shopal

<div x-data="{ mobileNavOpen: false }">
  <nav>
    <div class="flex h-12 py-3 px-6 items-center justify-between bg-green-500">
      <div class="w-auto">
        <a class="inline-flex mr-6 items-center hover:text-indigo-500" href="mailto:contact@shopalux.com">
          <svg width="14" height="14" viewBox="0 0 14 14" fill="none" xmlns="http://www.w3.org/2000/svg">
            <path d="M9.76002 0.973331L3.74002 2.97333C-0.306649 4.32666 -0.306649 6.53333 3.74002 7.88L5.52668 8.47333L6.12002 10.26C7.46668 14.3067 9.68002 14.3067 11.0267 10.26L13.0333 4.24666C13.9267 1.54666 12.46 0.0733314 9.76002 0.973331ZM9.97335 4.56L7.44002 7.10666C7.34002 7.20667 7.21335 7.25333 7.08668 7.25333C6.96002 7.25333 6.83335 7.20667 6.73335 7.10666C6.54002 6.91333 6.54002 6.59333 6.73335 6.4L9.26668 3.85333C9.46002 3.66 9.78002 3.66 9.97335 3.85333C10.1667 4.04666 10.1667 4.36666 9.97335 4.56Z" fill="currentColor"></path>
          </svg>
          <span class="hidden lg:block ml-2 text-sm font-bold">contact@shopalux.com</span>
        </a>
        <a class="inline-flex items-center hover:text-indigo-500" href="#">
          <svg width="16" height="16" viewBox="0 0 16 16" fill="none" xmlns="http://www.w3.org/2000/svg">
            <path d="M7.36665 9.96668L6.13331 11.2C5.87331 11.46 5.45998 11.46 5.19331 11.2067C5.11998 11.1333 5.04665 11.0667 4.97331 10.9933C4.28665 10.3 3.66665 9.57334 3.11331 8.81334C2.56665 8.05334 2.12665 7.29334 1.80665 6.54001C1.49331 5.78001 1.33331 5.05334 1.33331 4.36001C1.33331 3.90668 1.41331 3.47334 1.57331 3.07334C1.73331 2.66668 1.98665 2.29334 2.33998 1.96001C2.76665 1.54001 3.23331 1.33334 3.72665 1.33334C3.91331 1.33334 4.09998 1.37334 4.26665 1.45334C4.43998 1.53334 4.59331 1.65334 4.71331 1.82668L6.25998 4.00668C6.37998 4.17334 6.46665 4.32668 6.52665 4.47334C6.58665 4.61334 6.61998 4.75334 6.61998 4.88001C6.61998 5.04001 6.57331 5.20001 6.47998 5.35334C6.39331 5.50668 6.26665 5.66668 6.10665 5.82668L5.59998 6.35334C5.52665 6.42668 5.49331 6.51334 5.49331 6.62001C5.49331 6.67334 5.49998 6.72001 5.51331 6.77334C5.53331 6.82668 5.55331 6.86668 5.56665 6.90668C5.68665 7.12668 5.89331 7.41334 6.18665 7.76001C6.48665 8.10668 6.80665 8.46001 7.15331 8.81334C7.21998 8.88001 7.29331 8.94668 7.35998 9.01334C7.62665 9.27334 7.63331 9.70001 7.36665 9.96668Z" fill="currentColor"></path>
            <path d="M14.6467 12.22C14.6467 12.4067 14.6134 12.6 14.5467 12.7867C14.5267 12.84 14.5067 12.8933 14.48 12.9467C14.3667 13.1867 14.22 13.4133 14.0267 13.6267C13.7 13.9867 13.34 14.2467 12.9334 14.4133C12.9267 14.4133 12.92 14.42 12.9134 14.42C12.52 14.58 12.0934 14.6667 11.6334 14.6667C10.9534 14.6667 10.2267 14.5067 9.46002 14.18C8.69336 13.8533 7.92669 13.4133 7.16669 12.86C6.90669 12.6667 6.64669 12.4733 6.40002 12.2667L8.58002 10.0867C8.76669 10.2267 8.93336 10.3333 9.07336 10.4067C9.10669 10.42 9.14669 10.44 9.19336 10.46C9.24669 10.48 9.30002 10.4867 9.36002 10.4867C9.47336 10.4867 9.56002 10.4467 9.63336 10.3733L10.14 9.87332C10.3067 9.70665 10.4667 9.57999 10.62 9.49999C10.7734 9.40665 10.9267 9.35999 11.0934 9.35999C11.22 9.35999 11.3534 9.38665 11.5 9.44665C11.6467 9.50665 11.8 9.59332 11.9667 9.70665L14.1734 11.2733C14.3467 11.3933 14.4667 11.5333 14.54 11.7C14.6067 11.8667 14.6467 12.0333 14.6467 12.22Z" fill="currentColor"></path>
          </svg>
          <span class="hidden lg:block ml-2 text-sm font-bold">+1-202-555-0147</span>
        </a>
      </div>
      <div class="w-auto">
        <div class="flex items-center">
          <div class="hidden lg:inline-flex mr-4 flex-wrap items-center">
            <button class="relative group inline-flex items-center text-left text-sm font-bold text-gray-900 hover:text-indigo-500">
              <span class="mr-2">English</span>
              <svg width="8" height="6" viewBox="0 0 8 6" fill="none" xmlns="http://www.w3.org/2000/svg">

Get the code for 13,400+ components

Create a free account to copy production-ready code from every component in the library.

Free account · No credit card · No password needed

Already have an account? Sign in

Shopal E-commerce Site Header with Top Utility Bar and Search

A site header for an online store featuring a lime-green top utility bar with contact email, phone number, language, currency, profile, wishlist, and basket links, followed by a white main bar with the Shopal logo, primary navigation menu items with dropdown indicators, and an outlined search input on the right.

Navigation (horizontal) from Nigodo

Tailwind CSS

Nigodo

<section x-data="{ mobileNavOpen: false }">
  <nav class="flex justify-between items-center bg-purple-200 py-6 px-10 relative">
    <a class="xl:hidden text-lg font-bold" href="#">
      <img class="h-8" src="nigodo-assets/logo-nigodo.svg" alt="" width="auto">
    </a>
    <ul class="hidden xl:flex">
      <li><a class="text-lg mr-10 2xl:mr-16 font-extrabold hover:text-indigo-800" href="#">Product</a></li>
      <li><a class="text-lg mr-10 2xl:mr-16 font-extrabold hover:text-indigo-800" href="#">Features</a></li>
      <li><a class="text-lg mr-10 2xl:mr-16 font-extrabold hover:text-indigo-800" href="#">Pricing</a></li>
      <li><a class="text-lg font-extrabold hover:text-indigo-800" href="#">Resources</a></li>
    </ul>
    <div class="xl:hidden">
      <button x-on:click="mobileNavOpen = !mobileNavOpen" class="focus:outline-none text-indigo-900 hover:text-indigo-800">
        <svg class="block 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 xl:block absolute top-1/2 left-1/2 transform -translate-x-1/2 -translate-y-1/2">
      <a class="text-lg font-bold" href="#">
        <img class="h-8" src="nigodo-assets/logo-nigodo.svg" alt="" width="auto">
      </a>
    </ul>

Get the code for 13,400+ components

Create a free account to copy production-ready code from every component in the library.

Free account · No credit card · No password needed

Already have an account? Sign in

Light lavender top navigation bar with centered Nigodo logo and Sign Up button

A horizontal site header with text navigation links (Product, Features, Pricing, Resources) on the left, a centered Nigodo logo and wordmark, and Log In and Sign Up actions on the right. The lavender background and dark navy text with a bordered, shadowed Sign Up button distinguish it.

Navigation (horizontal) from Atis

Tailwind CSS

Atis

<section x-data="{ mobileNavOpen: false }">
  <nav class="relative px-6 py-6 flex justify-between items-center bg-gray-900">
    <a class="text-white text-3xl font-bold leading-none" href="#">
      <img class="h-12" src="atis-assets/logo/atis/atis-mono-white.svg" alt="" width="auto">
    </a>
    <div class="lg:hidden">
      <button x-on:click="mobileNavOpen = !mobileNavOpen" class="flex items-center text-white p-3">
        <svg class="block h-4 w-4 fill-current" 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:mx-auto lg:flex lg:items-center lg:w-auto lg:space-x-6">
      <li><a class="text-sm text-gray-300 hover:text-white" href="#">Start</a></li>
      <li class="text-gray-800">
        <svg class="w-4 h-4 current-fill" 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="M12 5v.01M12 12v.01M12 19v.01M12 6a1 1 0 110-2 1 1 0 010 2zm0 7a1 1 0 110-2 1 1 0 010 2zm0 7a1 1 0 110-2 1 1 0 010 2z"></path>
        </svg>
      </li>
      <li><a class="text-sm text-white font-bold" href="#">About Us</a></li>
      <li class="text-gray-800">
        <svg class="w-4 h-4 current-fill" 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="M12 5v.01M12 12v.01M12 19v.01M12 6a1 1 0 110-2 1 1 0 010 2zm0 7a1 1 0 110-2 1 1 0 010 2zm0 7a1 1 0 110-2 1 1 0 010 2z"></path>

Get the code for 13,400+ components

Create a free account to copy production-ready code from every component in the library.

Free account · No credit card · No password needed

Already have an account? Sign in

Dark Top Navigation Bar with Atis Logo, Menu Links, and Sign In/Sign Up Buttons

A horizontal dark-themed site header with the Atis logo on the left, five centered text navigation links (Start, About Us, Services, Platform, Testimonials), and two action buttons on the right: an outlined Sign In button and a solid green Sign up button. The layout is a single horizontal row with separators between links.

Navigation (horizontal) from Pstls.

Tailwind CSS

Pstls.

<section x-data="{ mobileNavOpen: false }">
  <nav class="py-10"   data-config-="data-config-">
    <div class="container px-4 mx-auto">
      <div class="flex items-center justify-between relative"><a class="inline-block" href="#"  ><img src="pstls-assets/logos/pstls-logo-md.svg" alt="" width="116"></a>
        
        <button class="lg:hidden" 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 fill-rule="evenodd" clip-rule="evenodd" d="M3.5 7C3.22386 7 3 6.77614 3 6.5C3 6.22386 3.22386 6 3.5 6H20.5C20.7761 6 21 6.22386 21 6.5C21 6.77614 20.7761 7 20.5 7H3.5ZM3.5 12C3.22386 12 3 11.7761 3 11.5C3 11.2239 3.22386 11 3.5 11H20.5C20.7761 11 21 11.2239 21 11.5C21 11.7761 20.7761 12 20.5 12H3.5ZM3 16.5C3 16.7761 3.22386 17 3.5 17H20.5C20.7761 17 21 16.7761 21 16.5C21 16.2239 20.7761 16 20.5 16H3.5C3.22386 16 3 16.2239 3 16.5Z" fill="#000"></path>
          </svg>
        </button>
        
        <div class="hidden lg:block ml-14">
          <ul class="inline-flex">
            <li class="mr-8"><a class="inline-block font-bold hover:text-gray-900" aria-current="page" href="#" >Home</a></li>
            <li class="mr-8"><a class="inline-block font-bold hover:text-gray-900" href="#" >Products</a></li>
            <li class="mr-8"><a class="inline-block font-bold hover:text-gray-900" href="#" >Resources</a></li>
            <li><a class="inline-block font-bold hover:text-gray-900" href="#" >Pricing</a></li>
          </ul>
        </div>
        <div class="hidden lg:block ml-auto"><a class="inline-block mr-8 font-bold" href="#" >Log In</a><a class="inline-block px-8 py-3 text-white font-bold bg-black hover:bg-gray-900" href="#" >Sign Up</a></div>
      </div>
    </div>
  </nav>
  <div :class="{'block': mobileNavOpen, 'hidden': !mobileNavOpen}" class="hidden fixed top-0 left-0 bottom-0 w-3/4 max-w-xs z-50"   data-config-="data-config-">

Get the code for 13,400+ components

Create a free account to copy production-ready code from every component in the library.

Free account · No credit card · No password needed

Already have an account? Sign in

Light Top Navigation Bar with Pstls Logo, Menu Links, Log In and Sign Up

A horizontal site header with a purple circular logo and wordmark on the left, text navigation links (Home, Products, Resources, Pricing) in the center-left, and a text Log In link beside a solid black Sign Up button on the right. The white background and minimal styling make it a simple, unadorned navigation bar.

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 Saturn

Get the code for 13,400+ components

Saturn Top Navigation Bar with Sign In and Create Account

Saturn website top navigation bar with logo, menu links, sign in and create account

Navigation (horizontal) from DarkPro

Get the code for 13,400+ components

Dark Navigation Bar with Logo, Links, and Search

Dark Mobile Top Navigation Bar with Search, Logo, and Menu

Navigation (horizontal) from Flaro

Get the code for 13,400+ components

Flaro Top Navigation Bar with Free Trial CTA

Flaro Top Navigation Bar with Create Free Account Button

Navigation (horizontal) from Gradia

Get the code for 13,400+ components

Gradia logo navigation bar with Start Free Trial button

Gradia Top Navigation Bar with Start Free Trial CTA

Navigation (horizontal) from Solstice

Get the code for 13,400+ components

Solstice Top Navigation Bar with Login and Get Started

Solstice top navigation bar with logo, menu links, and Get Started button

Navigation (horizontal) from Basko

Get the code for 13,400+ components

Basko Website Top Navigation Bar with Logo, Links, and Trial CTA

Basko Top Navigation Bar with Login and Free Trial CTA

Navigation (horizontal) from Zanrly

Get the code for 13,400+ components

Zanrly Light Gray Top Navigation Bar with Blue CTA

Dark rounded navigation bar with Zanrly logo, centered links, and Get Started button

Navigation (horizontal) from Nightsable

Get the code for 13,400+ components

Dark top navigation bar with Nightsable logo, four text links, and outlined Get in touch button

Dark Top Navigation Bar with Logo and Four Links

Navigation (horizontal) from Zeus

Get the code for 13,400+ components

Zeus Logo Top Navigation Bar with Contact Us Button

Zeus Website Top Navigation Bar with Login and Sign Up

Navigation (horizontal) from Artemis Dashboard

Get the code for 13,400+ components

Artemis Dashboard Top Navigation Bar with Secondary Utility Row

Dark Top Navigation Bar with Logo, Menu Links, and User Profile

Navigation (horizontal) from Trizzle

Get the code for 13,400+ components

Dark App Top Navigation Bar with Logo, Links, and User Menu

Dark Dashboard Top Navigation Bar with Logo, Menu Items, and User Profile

Navigation (horizontal) from Wrexa

Get the code for 13,400+ components

Dark Minimal Top Navigation Bar with Centered Logo and Menu Button

Dark Minimal Top Navigation Bar with Logo and Menu Toggle

Navigation (horizontal) from Zospace

Get the code for 13,400+ components

Dark Minimal Header Bar with Zospace Logo and Hamburger Menu

Dark Top Navigation Bar with Logo, Links, and Outlined Sign Up Button

Navigation (horizontal) from Flex

Get the code for 13,400+ components

Flex App Top Navigation Bar with Dashboard, Projects, Tasks, and Profile

Dark Dashboard Sidebar Navigation with User Profile

Navigation (horizontal) from Uinel

Get the code for 13,400+ components

Ecommerce Top Navigation Bar with Promo Banner, Search, and User Menu

Uifive Top Navigation Bar with Dashboard, Users, Chat, Messages, Catalog, and User Profile

Navigation (horizontal) from Yofte

Get the code for 13,400+ components