COMPONENTS · SECTIONS

Tailwind Navbar Components & Sections

Copy paste HTML navbars styled with Tailwind. No JavaScript included. Add your own JS for menus and keyboard support. Tailwind v4 ready.

9 sections2 freeTailwind CSS v4HTML · React · MCP

Pick sections Tailkits UI

FREE NAVBAR SECTIONS · COPY AND PASTE

All free sections

Navbar: Full Bar with Divider

Full‑width bar with links and a vertical divider separating login and free‑trial buttons

Free

Full-width previewnpx shadcn@latest add https://tailkits.com/r/free-navbar-2.json

View HTML code

<header class="py-3">
  <div class="max-w-7xl mx-auto px-4 xl:px-0">
    <div
      class="bg-background flex items-center justify-between gap-x-4 rounded-tk-2xl py-2.5 pl-5 pr-2.5 shadow-tk-md lg:grid lg:grid-cols-[1fr_auto_1fr] lg:justify-stretch lg:gap-x-12 lg:rounded-[1.375rem]"
    >
      <div class="flex items-center gap-x-10">
        <a href="/" title="Home">
          <svg
            class="h-8"
            role="img"
            aria-label="Saaslandings"
            viewBox="0 0 32 32"
            fill="none"
            xmlns="http://www.w3.org/2000/svg"
          >
            <path
              d="M19.9825 0C19.6374 4.78312 17.5074 9.07169 14.2553 12.203C17.9566 9.44226 22.5475 7.808 27.52 7.808C29.0547 7.808 30.553 7.96367 32 8.26007V19.8528C30.6297 19.2479 29.1141 18.912 27.52 18.912C21.3874 18.912 16.416 23.8834 16.416 30.016C16.416 30.6932 16.4766 31.3562 16.5927 32H5.39942C5.34155 31.3464 5.312 30.6846 5.312 30.016C5.312 23.6486 7.99172 17.9071 12.2849 13.8577C9.17118 16.1306 5.33424 17.472 1.184 17.472C0.786337 17.472 0.39155 17.4597 0 17.4354V7.97434C0.387831 8.02295 0.78299 8.048 1.184 8.048C5.92134 8.048 9.84226 4.5525 10.5083 0H19.9825Z"
              class="fill-tk-logo"
            />
          </svg>
        </a>
        <span class="hidden h-4 w-[1px] bg-tk-fill-strong lg:block"></span>
      </div>
      <nav
        class="hidden lg:block [--tk-underline-inset:0.75rem] [--tk-underline-offset:0.25rem]"
        data-tk-hover="links"
      >
        <ul class="flex items-center">
          <li>
            <a
              class="px-3 py-2 text-sm font-medium text-card-foreground transition hover:text-tk-text-soft"
              href="/features"
            >
              Features
            </a>
          </li>
          <li>
            <a
              class="px-3 py-2 text-sm font-medium text-card-foreground transition hover:text-tk-text-soft"
              href="/about"
            >
              About
            </a>
          </li>
          <li>
            <a
              class="flex items-center gap-x-1.5 px-3 py-2 text-sm font-medium text-card-foreground transition hover:text-tk-text-soft"
              href="/contact"
            >
              Contact
              <svg
                class="h-4 text-muted-foreground"
                xmlns="http://www.w3.org/2000/svg"
                viewBox="0 0 24 24"
                fill="currentColor"
                aria-hidden="true"
                data-slot="icon"
              >
                <path
                  fill-rule="evenodd"
                  d="M8.25 3.75H19.5a.75.75 0 0 1 .75.75v11.25a.75.75 0 0 1-1.5 0V6.31L5.03 20.03a.75.75 0 0 1-1.06-1.06L17.69 5.25H8.25a.75.75 0 0 1 0-1.5Z"
                  clip-rule="evenodd"
                />
              </svg>
            </a>
          </li>
          <li>
            <a
              class="px-3 py-2 text-sm font-medium text-card-foreground transition hover:text-tk-text-soft"
              href="/blog"
            >
              Blog
            </a>
          </li>
          <li>
            <a
              class="px-3 py-2 text-sm font-medium text-card-foreground transition hover:text-tk-text-soft"
              href="/services"
            >
              Services
            </a>
          </li>
          <li>
            <a
              class="px-3 py-2 text-sm font-medium text-card-foreground transition hover:text-tk-text-soft"
              href="/pricing"
            >
              Pricing
            </a>
          </li>
        </ul>
      </nav>
      <div class="flex items-center gap-x-10 justify-self-end">
        <span class="hidden h-4 w-[1px] bg-tk-fill-strong lg:block"></span>
        <div class="flex items-center gap-x-3 lg:gap-x-2">
          <a
            href="/log-in"
            title="Log in"
            class="items-center justify-center whitespace-nowrap text-sm font-medium transition focus:shadow-tk-focus shadow-tk-sm border border-tk-border-soft bg-background text-secondary-foreground hover:border-border hover:bg-accent disabled:border-foreground/5 disabled:bg-tk-surface/30 disabled:text-foreground/20 px-3 py-2 rounded-tk hidden lg:flex"
            data-tk-hover="press"
          >
            Log in
          </a>
          <a
            href="/sign-up"
            title="Try free"
            class="items-center justify-center whitespace-nowrap text-sm font-medium transition focus:shadow-tk-focus shadow-tk-sm bg-primary text-primary-foreground hover:bg-tk-primary-hover disabled:bg-primary/30 disabled:text-tk-primary-foreground-muted/70 px-3 py-2 rounded-tk flex"
            data-tk-hover="press"
          >
            Try free
            <span class="ml-1 text-tk-primary-foreground-faint">
              - 14 days</span
            >
          </a>
          <button
            type="button"
            aria-label="Open menu"
            class="lg:hidden"
            title="Open menu"
          >
            <svg
              class="h-6 text-tk-ink-muted"
              xmlns="http://www.w3.org/2000/svg"
              viewBox="0 0 24 24"
              fill="currentColor"
              aria-hidden="true"
              data-slot="icon"
            >
              <path
                fill-rule="evenodd"
                d="M3 9a.75.75 0 0 1 .75-.75h16.5a.75.75 0 0 1 0 1.5H3.75A.75.75 0 0 1 3 9Zm0 6.75a.75.75 0 0 1 .75-.75h16.5a.75.75 0 0 1 0 1.5H3.75a.75.75 0 0 1-.75-.75Z"
                clip-rule="evenodd"
              />
            </svg>
          </button>
        </div>
      </div>
    </div>
  </div>
</header>

Navbar: Links with Login & CTA

Horizontal navbar with logo, text links, plus login and “Open an account” buttons

Free

Full-width previewnpx shadcn@latest add https://tailkits.com/r/free-navbar-1.json

View HTML code

<header class="py-4">
  <div
    class="max-w-7xl mx-auto px-4 xl:px-0 flex items-center justify-between gap-x-4 lg:grid lg:grid-cols-[1fr_auto_1fr] lg:justify-stretch lg:gap-x-12"
  >
    <a href="/" title="Home">
      <svg
        class="h-8"
        role="img"
        aria-label="Saaslandings"
        viewBox="0 0 32 32"
        fill="none"
        xmlns="http://www.w3.org/2000/svg"
      >
        <path
          d="M19.9825 0C19.6374 4.78312 17.5074 9.07169 14.2553 12.203C17.9566 9.44226 22.5475 7.808 27.52 7.808C29.0547 7.808 30.553 7.96367 32 8.26007V19.8528C30.6297 19.2479 29.1141 18.912 27.52 18.912C21.3874 18.912 16.416 23.8834 16.416 30.016C16.416 30.6932 16.4766 31.3562 16.5927 32H5.39942C5.34155 31.3464 5.312 30.6846 5.312 30.016C5.312 23.6486 7.99172 17.9071 12.2849 13.8577C9.17118 16.1306 5.33424 17.472 1.184 17.472C0.786337 17.472 0.39155 17.4597 0 17.4354V7.97434C0.387831 8.02295 0.78299 8.048 1.184 8.048C5.92134 8.048 9.84226 4.5525 10.5083 0H19.9825Z"
          class="fill-tk-logo"
        />
      </svg>
    </a>
    <nav
      class="hidden lg:block [--tk-underline-inset:0.75rem] [--tk-underline-offset:0.25rem]"
      data-tk-hover="links"
    >
      <ul class="flex items-center">
        <li>
          <a
            class="px-3 py-2 text-sm font-medium text-card-foreground transition hover:text-tk-text-soft"
            href="/features"
          >
            Features
          </a>
        </li>
        <li>
          <a
            class="px-3 py-2 text-sm font-medium text-card-foreground transition hover:text-tk-text-soft"
            href="/about"
          >
            About
          </a>
        </li>
        <li>
          <a
            class="flex items-center gap-x-1.5 px-3 py-2 text-sm font-medium text-card-foreground transition hover:text-tk-text-soft"
            href="/contact"
          >
            Contact
            <svg
              class="h-4 text-muted-foreground"
              xmlns="http://www.w3.org/2000/svg"
              viewBox="0 0 24 24"
              fill="currentColor"
              aria-hidden="true"
              data-slot="icon"
            >
              <path
                fill-rule="evenodd"
                d="M8.25 3.75H19.5a.75.75 0 0 1 .75.75v11.25a.75.75 0 0 1-1.5 0V6.31L5.03 20.03a.75.75 0 0 1-1.06-1.06L17.69 5.25H8.25a.75.75 0 0 1 0-1.5Z"
                clip-rule="evenodd"
              />
            </svg>
          </a>
        </li>
        <li>
          <a
            class="px-3 py-2 text-sm font-medium text-card-foreground transition hover:text-tk-text-soft"
            href="/blog"
          >
            Blog
          </a>
        </li>
        <li>
          <a
            class="px-3 py-2 text-sm font-medium text-card-foreground transition hover:text-tk-text-soft"
            href="/services"
          >
            Services
          </a>
        </li>
        <li>
          <a
            class="px-3 py-2 text-sm font-medium text-card-foreground transition hover:text-tk-text-soft"
            href="/pricing"
          >
            Pricing
          </a>
        </li>
      </ul>
    </nav>
    <div
      class="flex flex-wrap items-center justify-center gap-3 justify-self-end lg:flex-nowrap lg:gap-x-2"
    >
      <a
        href="/log-in"
        title="Log in"
        class="items-center justify-center whitespace-nowrap text-sm font-medium transition focus:shadow-tk-focus shadow-tk-sm border border-tk-border-soft bg-background text-secondary-foreground hover:border-border hover:bg-accent disabled:border-foreground/5 disabled:bg-tk-surface/30 disabled:text-foreground/20 px-3 py-2 rounded-tk hidden lg:flex"
        data-tk-hover="press"
      >
        Log in
      </a>
      <a
        href="/sign-up"
        title="Open an account"
        class="items-center justify-center whitespace-nowrap text-sm font-medium transition focus:shadow-tk-focus shadow-tk-sm bg-primary text-primary-foreground hover:bg-tk-primary-hover disabled:bg-primary/30 disabled:text-tk-primary-foreground-muted/70 px-3 py-2 rounded-tk flex"
        data-tk-hover="press"
      >
        Open an account
      </a>
      <button
        type="button"
        aria-label="Open menu"
        class="lg:hidden"
        title="Open menu"
      >
        <svg
          class="h-6 text-tk-ink-muted"
          xmlns="http://www.w3.org/2000/svg"
          viewBox="0 0 24 24"
          fill="currentColor"
          aria-hidden="true"
          data-slot="icon"
        >
          <path
            fill-rule="evenodd"
            d="M3 9a.75.75 0 0 1 .75-.75h16.5a.75.75 0 0 1 0 1.5H3.75A.75.75 0 0 1 3 9Zm0 6.75a.75.75 0 0 1 .75-.75h16.5a.75.75 0 0 1 0 1.5H3.75a.75.75 0 0 1-.75-.75Z"
            clip-rule="evenodd"
          />
        </svg>
      </button>
    </div>
  </div>
</header>

7 MORE NAVBAR SECTIONS IN TAILKITS UI

See plans

NAVBAR SECTIONS FROM OTHER LIBRARIES

All component libraries

Third-party libraries in the Tailkits directory that include navbar sections. Reviewed by the editors; sponsored listings are marked.

David UI

Free

300+ copy-paste Tailwind CSS UI components

Preline UI

Free

Preline: 740+ Tailwind pages & components

HyperUI

Free

226 Free & Open Source Tailwind CSS Components

Mantine UI

Free

120+ responsive UI blocks for React.

Admin One

Paid

Tailwind CSS Vue 3 dashboard template with dark mode

Flowrift

Free

80+ ready-made Tailwind CSS components

GOOD TO KNOW

Frequently asked questions

Answers to common questions about Tailwind navbar components.

Are these Tailwind navbar sections free?

2 of the 9 navbar sections on this page are free (Full Bar with Divider, Links with Login & CTA): copy the HTML above, no account needed. The other 7 are part of Tailkits UI, the paid library; each shows a preview here and unlocks its code with a Tailkits UI plan.

Which Tailwind CSS version do the navbar components use?

Tailwind CSS v4. The code is plain HTML with utility classes; colours, radii and shadows read CSS variables named like shadcn/ui's (bg-primary, text-muted-foreground), so a shadcn theme or a DESIGN.md export reskins every section. Add tailkits-theme.css next to the code for the default look.

Can I use these navbar sections in React or Next.js?

Yes. Every section is also a React component in the @tailkits shadcn registry. Free sections install without an account, for example: npx shadcn@latest add https://tailkits.com/r/free-<name>.json. Paid sections install with the token from your Tailkits UI account.

Can an AI coding assistant add a navbar section for me?

Yes. The Tailkits MCP at tailkits.com/mcp is free and open, with no account: Claude Code, Cursor and other MCP clients can search the navbar sections and insert the code into your project. A Tailkits UI token unlocks the Pro section code.

Which other libraries have Tailwind navbar components?

The directory lists 8 third-party libraries with navbar sections, including , , . They are shown below our own sections, with their pricing and stack.

Tailwind Navbar Components & Sections

FREE NAVBAR SECTIONS · COPY AND PASTE

Navbar: Full Bar with Divider

Navbar: Links with Login & CTA

7 MORE NAVBAR SECTIONS IN TAILKITS UI

Navbar 2

Navbar 3

Navbar 5

Navbar 6

Navbar 7

Navbar 8

Navbar 9

NAVBAR SECTIONS FROM OTHER LIBRARIES

David UI

Preline UI

HyperUI

Mantine UI

Tailwind Plus

Float UI

Admin One

Flowrift

MORE TAILWIND SECTIONS

Frequently asked questions

Are these Tailwind navbar sections free?

Which Tailwind CSS version do the navbar components use?

Can I use these navbar sections in React or Next.js?

Can an AI coding assistant add a navbar section for me?

Which other libraries have Tailwind navbar components?