Navigation (horizontal) Components

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) generator

Navigation (horizontal) from Saturn

Bootstrap

Saturn

<section>
  <nav class="navbar navbar-expand-lg navbar-light">
    <div class="container" type="button" data-bs-toggle="collapse" data-bs-target="#nav01" aria-controls="nav01" aria-expanded="false">
      <a class="navbar-brand" href="#">
        <img class="img-fluid" src="saturn-assets/logos/logo-saturn-dark.svg" alt="">
      </a>
      <button class="navbar-burger navbar-toggler p-2 rounded-1 border-0 bg-light">
        <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 class="collapse navbar-collapse" id="nav01">
        <ul class="navbar-nav">
          <li class="nav-item"><a class="nav-link" aria-current="page" href="#">Featured</a></li>
          <li class="nav-item"><a class="nav-link" aria-current="page" href="#">Solutions</a></li>
          <li class="nav-item"><a class="nav-link" aria-current="page" href="#">Products</a></li>
          <li class="nav-item"><a class="nav-link" aria-current="page" href="#">Articles</a></li>
        </ul>
        <div class="ms-auto"><a class="btn btn-sm btn-link fw-semibold" href="#">Sign In</a><a class="btn btn-sm btn-outline-light text-primary" href="#">Create an account</a></div>
      </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

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) generator

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) generator

Navigation (horizontal) from Flaro

Bulma

Flaro

<section x-data="{ mobileNavOpen: false }">
    <nav class="navbar py-5 is-white">
        <div class="container">
            <div class="navbar-brand">
                <a class="navbar-item" href="#">
                    <img src="flaro-assets/logos/flaro-logo-black.svg" alt="" style="height: 32px;">
                  </a>
                  <button class="navbar-menu-open navbar-burger" role="button" type="button" data-toggle="side-menu" x-on:click="mobileNavOpen = !mobileNavOpen">
                    <span aria-hidden="true"></span>
                    <span aria-hidden="true"></span>
                    <span aria-hidden="true"></span>
                  </button>
            </div>
            <div class="navbar-menu">
                <div class="navbar-end">
                    <ul class="navbar-item">
                        <li><a class="navbar-item" href="#">Features</a></li>
                        <li><a class="navbar-item" href="#">Solutions</a></li>
                        <li><a class="navbar-item" href="#">Resources</a></li>
                        <li><a class="navbar-item" href="#">Pricing</a></li>
                    </ul>
                    <div class="navbar-item is-hidden-mobile"><a class="button is-link" href="#">Try 14 Days Free Trial</a></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

Navigation (horizontal) from Flaro

Bootstrap

Flaro

<section>
  <nav class="navbar navbar-expand-lg navbar-light bg-light"  >
    <div class="container"><a class="navbar-brand" href="#"><img class="img-fluid" src="flaro-assets/logos/flaro-logo-black.svg" alt=""/></a>
      <div class="collapse navbar-collapse me-5 justify-content-end">
        <ul class="navbar-nav">
          <li class="nav-item"><a class="nav-link" href="#" >Features</a></li>
          <li class="nav-item"><a class="nav-link" href="#" >Solutions</a></li>
          <li class="nav-item"><a class="nav-link" href="#" >Resources</a></li>
          <li class="nav-item"><a class="nav-link" href="#" >Pricing</a></li>
        </ul>
      </div>
      <div class="d-none d-lg-block"><a class="btn btn-primary" href="#" >Try 14 Days Free Trial</a></div>
      <div class="d-lg-none">
        <button class="btn navbar-burger p-0">
          <svg class="text-primary" 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 class="d-none navbar-menu position-fixed top-0 start-0 bottom-0 w-75 mw-xs" style="z-index: 9999;"  >
    <div class="navbar-close navbar-backdrop position-fixed top-0 start-0 end-0 bottom-0 bg-dark" style="opacity: 75%;"></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

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) generator

Navigation (horizontal) from Gradia

Bootstrap

Gradia

<section>
  <nav class="navbar navbar-dark navbar-expand-lg bg-white py-5 py-lg-3 px-5"  >
    <div class="container-fluid"><a class="navbar-brand" href="#"><img class="img-fluid" src="gradia-assets/logos/gradia-name-black.svg" alt=""/></a>
      <div class="collapse navbar-collapse me-5 justify-content-end">
        <ul class="navbar-nav">
          <li class="nav-item p-5"><a class="nav-link d-inline-block p-0" href="#">
              <h3 class="fs-17 fw-medium text-secondary mb-0" >Features</h3></a></li>
          <li class="nav-item p-5"><a class="nav-link d-inline-block p-0" href="#">
              <h3 class="fs-17 fw-medium text-secondary mb-0" >Solutions</h3></a></li>
          <li class="nav-item p-5"><a class="nav-link d-inline-block p-0" href="#">
              <h3 class="fs-17 fw-medium text-secondary mb-0" >Features</h3></a></li>
          <li class="nav-item p-5"><a class="nav-link d-inline-block p-0" href="#">
              <h3 class="fs-17 fw-medium text-secondary mb-0" >Pricing</h3></a></li>
        </ul>
      </div>
      <div class="d-none d-lg-block">
        <div class="rounded-3" style="padding:2px; background: linear-gradient(90deg, rgba(108,213,246,1 ) 0%, rgba(248,157,92,1) 50%, rgba(91,106,240,1) 100%)">
          <button class="btn btn-light px-4 py-3 rounded-1" type="button">
            <h4 class="fs-17 fw-medium text-secondary mb-0" >Start Free Trial</h4>
          </button>
        </div>
      </div>
      <div class="d-lg-none">
        <button class="btn navbar-burger p-0">

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

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) generator

Navigation (horizontal) from Solstice

Bootstrap

Solstice

<section>
  <nav class="navbar navbar-expand-lg navbar-light">
    <div class="container">
      <a class="navbar-brand" href="#">
        <img class="img-fluid" src="solstice-assets/images/logos/solstice-logo-dark.svg" alt="">
      </a>
      <button class="d-lg-none navbar-burger btn p-0 rounded-pill" style="border: none;" type="button" data-bs-toggle="collapse" data-bs-target="#nav01" aria-controls="nav01" aria-expanded="false">
        <svg class="text-primary" 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 class="collapse navbar-collapse ms-6" id="nav01">
        <ul class="navbar-nav me-auto">
          <li class="nav-item dropdown">
            <a class="nav-link dropdown-toggle" id="nav-1-1" href="#" role="button" data-bs-toggle="dropdown" aria-expanded="false">Platform</a>
            <ul class="dropdown-menu">
              <li><a class="dropdown-item" href="#">Option 1</a></li>
              <li><a class="dropdown-item" href="#">Option 2</a></li>
              <li><a class="dropdown-item" href="#">Option 3</a></li>
            </ul>
          </li>
          <li class="nav-item"><a class="nav-link" href="#">Features</a></li>
          <li class="nav-item"><a class="nav-link" href="#">Community</a></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

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) generator

Navigation (horizontal) from Basko

Bootstrap

Basko

<div>
  <nav class="navbar navbar-expand-lg navbar-light">
    <div class="container">
      <a class="navbar-brand" href="#">
        <img class="img-fluid" src="basko-assets/logos/basko-logo-dark.png" alt="">
      </a>
      <button class="d-lg-none navbar-burger btn px-0 rounded-pill" style="border: none;" type="button">
        <svg class="text-primary" 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 class="collapse navbar-collapse">
        <ul class="navbar-nav ms-lg-auto me-4">
          <li class="nav-item me-4"><a class="nav-link py-0" href="#">Features</a></li>
          <li class="nav-item me-4"><a class="nav-link py-0" href="#">Pricing</a></li>
          <li class="nav-item me-4"><a class="nav-link py-0" href="#">Automation</a></li>
          <li class="nav-item"><a class="nav-link py-0 border-start" href="#">Customer Login</a></li>
        </ul>
        <div><a class="btn btn-primary py-3" href="#">Try 14 Days Free Trial</a></div>
      </div>
    </div>
  </nav>
  <div class="d-none navbar-menu position-fixed top-0 start-0 bottom-0 w-75 mw-xs" style="z-index: 9999;">

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

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) generator

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) generator

Navigation (horizontal) from Nightsable

Bootstrap

Nightsable

<section>
  <nav class="navbar navbar-expand-lg navbar-dark bg-black">
    <div class="container" type="button" data-bs-toggle="collapse" data-bs-target="#nav01" aria-controls="nav01" aria-expanded="false"><a class="navbar-brand" href="#"><img class="img-fluid" src="nightsable-assets/logos/logo.svg" alt=""></a>
      <button class="navbar-burger navbar-toggler py-1 px-2 border-0 rounded-1 text-primary">
        <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="2" stroke-linecap="round" stroke-linejoin="round"></path>
          <path d="M3 6H21" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"></path>
          <path d="M3 18H21" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"></path>
        </svg>
      </button>
      <div class="collapse navbar-collapse" id="nav01">
        <ul class="navbar-nav ms-auto">
          <li class="nav-item"><a class="nav-link" aria-current="page" href="#">Home</a></li>
          <li class="nav-item"><a class="nav-link" aria-current="page" href="#">About us</a></li>
          <li class="nav-item"><a class="nav-link" aria-current="page" href="#">Wallet</a></li>
          <li class="nav-item"><a class="nav-link" aria-current="page" href="#">Blog</a></li>
        </ul>
        <div class="ms-14"><a class="btn btn-outline-light" href="#">Get in touch</a></div>
      </div>
    </div>
  </nav>
  <div class="d-none navbar-menu position-fixed top-0 start-0 bottom-0 w-100 mw-sm" style="z-index: 9999;">
    <div class="navbar-close navbar-backdrop position-fixed top-0 start-0 end-0 bottom-0 bg-primary-dark bg-opacity-25"></div>
    <nav class="position-relative h-100 w-100 d-flex flex-column pt-8 pb-10 px-8 bg-black overflow-auto">

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

Navigation (horizontal) from Zeus

Bulma

Zeus

<section>
  <nav class="navbar py-5">
    <div class="container px-8-mobile">
      <div class="navbar-brand">
        <a class="navbar-item pl-3-desktop" href="#">
          <span class="navbar-item px-0 title is-5 has-text-dark">
            <img src="zeus-assets/logo/logo-zeus-red.svg" alt="" style="height: 28px;" width="auto">
          </span>
        </a>
        <a class="navbar-menu-open navbar-burger" role="button" type="button" data-toggle="side-menu">
          <span aria-hidden="true"></span>
          <span aria-hidden="true"></span>
          <span aria-hidden="true"></span>
        </a>
      </div>
      <div class="navbar-menu">
        <div class="navbar-end">
          <ul class="navbar-item">
            <li><a class="navbar-item" href="#">About</a></li>
            <li><a class="navbar-item" href="#">Company</a></li>
            <li><a class="navbar-item" href="#">Services</a></li>
            <li><a class="navbar-item" href="#">Testimonials</a></li>
          </ul>
          <div class="navbar-item is-hidden-mobile pr-3-desktop"><a class="button is-primary" href="#">Contact Us</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

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) generator

Navigation (horizontal) from Zeus

Bootstrap

Zeus

<section>
  <nav class="navbar navbar-light navbar-expand-lg"  >
    <div class="container"><a class="navbar-brand h4 text-decoration-none" href="#"><img src="zeus-assets/logo/logo-zeus-red.svg" alt="" style="height: 28px;" width="auto"/></a>
      <div class="d-lg-none">
        <button class="btn btn-sm navbar-burger">
          <svg class="d-block" width="16" height="16" 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>
      <div class="collapse navbar-collapse">
        <ul class="navbar-nav ms-auto me-4">
          <li class="nav-item"><a class="nav-link" href="#">About</a></li>
          <li class="nav-item"><a class="nav-link" href="#">Company</a></li>
          <li class="nav-item"><a class="nav-link" href="#">Services</a></li>
          <li class="nav-item"><a class="nav-link" href="#">Testimonials</a></li>
        </ul>
        <div class="d-none d-lg-block"><a class="btn btn-danger" href="#">Contact Us</a></div>
      </div>
    </div>
  </nav>
  <div class="d-none navbar-menu position-fixed top-0 start-0 bottom-0 w-75 mw-sm" style="z-index: 9999;"  >
    <div class="navbar-close navbar-backdrop position-fixed top-0 start-0 end-0 bottom-0 bg-dark" style="opacity: 75%;"></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

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) generator

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) generator