20 Tailwind CSS Responsive Navbars
09 / 20

All 20 in 20 Tailwind CSS Responsive Navbars

  1. 01Tailwind Glassmorphism Frosted Navbar
  2. 02Tailwind Mega Menu Dropdown Navbar
  3. 03Tailwind Sidebar Drawer Navigation
  4. 04Tailwind Animated Underline Tabs Navbar
  5. 05Tailwind Pill Highlight Navigation Bar
  6. 06Tailwind Scroll-Aware Shrink Navbar
  7. 07Tailwind Neon Dark Navbar
  8. 08Tailwind Breadcrumb Reading Progress Navbar
  9. 09Tailwind Split Two-Tone Navbar
  10. 10Tailwind Bottom Tab Bar Navigation
  11. 11Tailwind Gradient Border Animated Navbar
  12. 12Tailwind Centered Logo Navbar
  13. 13Tailwind Icon Dot Indicator Navbar
  14. 14Tailwind Full-Screen Overlay Menu
  15. 15Tailwind Morphing Search Expand Navbar
  16. 16Tailwind Floating Island Multi-Segment Navbar
  17. 17Tailwind Step Progress Wizard Navbar
  18. 18Tailwind Vertical Rail Sidebar Navbar
  19. 19Tailwind Announcement Bar Dual Navbar
  20. 20Tailwind Scroll Spy Active Highlight Navbar
Pure TailwindMIT licensed

Tailwind Split Two-Tone Navbar

Editorial contrast: a dark brand-and-nav bar and a yellow action block meeting on a 24px diagonal. The cut is a single arbitrary [clip-path:polygon(…)] utility on the yellow panel, which overlaps the dark bar by 24px so the angle always has dark behind it.

Live Demo
Plain CSSTailwind v4
Try it

Complete Tailwind CSS landing page templates in HTML, React, Next.js and Vue · from $49

Cruip · Affiliate link

Browse Cruip templates

The code

<div class="tnb-09 group w-full min-h-svh bg-tnb09-page font-tnb09-sans text-tnb09-ink" aria-label="Split two-tone navbar demo">
  <input type="checkbox" id="tnb09-menu" class="sr-only peer" aria-label="Toggle navigation menu">
  <header class="sticky top-0 z-100 md:grid md:h-17 md:grid-cols-[auto_1fr_auto]">
    <div class="flex h-15 items-center bg-tnb09-dark px-5 md:h-full md:px-10">
      <a href="#studio" class="text-xl font-bold tracking-[-0.02em] whitespace-nowrap text-tnb09-paper no-underline">Geo<span class="text-tnb09-yellow">metric</span></a>
      <label for="tnb09-menu" class="ml-auto flex size-11 cursor-pointer flex-col items-center justify-center gap-1.5 md:hidden" aria-hidden="true">
        <span class="block h-0.5 w-5.5 rounded-sm bg-tnb09-paper transition-transform duration-300 group-has-checked:translate-y-2 group-has-checked:rotate-45 motion-reduce:transition-none"></span>
        <span class="block h-0.5 w-5.5 rounded-sm bg-tnb09-paper transition-opacity duration-300 group-has-checked:opacity-0 motion-reduce:transition-none"></span>
        <span class="block h-0.5 w-5.5 rounded-sm bg-tnb09-paper transition-transform duration-300 group-has-checked:-translate-y-2 group-has-checked:-rotate-45 motion-reduce:transition-none"></span>
      </label>
    </div>
    <nav class="hidden items-center justify-center bg-tnb09-dark md:flex" aria-label="Primary">
      <ul class="flex list-none items-center gap-0">
        <li><a href="#studio" aria-current="page" class="block rounded-md px-4.5 py-2 text-sm font-semibold text-tnb09-yellow no-underline">Studio</a></li>
        <li><a href="#work" class="block rounded-md px-4.5 py-2 text-sm font-medium text-tnb09-paper/60 no-underline transition-colors duration-200 hover:bg-white/8 hover:text-tnb09-paper focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-tnb09-yellow">Work</a></li>
        <li><a href="#process" class="block rounded-md px-4.5 py-2 text-sm font-medium text-tnb09-paper/60 no-underline transition-colors duration-200 hover:bg-white/8 hover:text-tnb09-paper focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-tnb09-yellow">Process</a></li>
        <li><a href="#journal" class="block rounded-md px-4.5 py-2 text-sm font-medium text-tnb09-paper/60 no-underline transition-colors duration-200 hover:bg-white/8 hover:text-tnb09-paper focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-tnb09-yellow">Journal</a></li>
      </ul>
    </nav>
    <div class="hidden items-center gap-3 bg-tnb09-yellow pr-8 pl-10 md:flex md:-ml-6 md:[clip-path:polygon(24px_0,100%_0,100%_100%,0_100%)]">
      <a href="#login" class="rounded-md border-[1.5px] border-tnb09-dark/20 bg-tnb09-dark/10 px-4.5 py-2 text-sm font-bold whitespace-nowrap text-tnb09-dark no-underline transition-colors duration-200 hover:bg-tnb09-dark/18">Log in</a>
      <a href="#start" class="rounded-md bg-tnb09-dark px-4.5 py-2 text-sm font-bold whitespace-nowrap text-tnb09-paper no-underline transition-[background,translate] duration-200 hover:-translate-y-px hover:bg-tnb09-dark2 motion-reduce:transition-none motion-reduce:hover:translate-y-0">Start project</a>
    </div>
    <div class="hidden border-b-[3px] border-tnb09-yellow bg-tnb09-dark px-5 pt-2 pb-4 max-md:group-has-checked:grid">
      <a href="#studio" class="flex min-h-11 items-center rounded-md px-2 text-[15px] font-semibold text-tnb09-yellow no-underline">Studio</a>
      <a href="#work" class="flex min-h-11 items-center rounded-md px-2 text-[15px] font-medium text-tnb09-paper/70 no-underline transition-colors hover:bg-tnb09-yellow/10 hover:text-tnb09-yellow">Work</a>
      <a href="#process" class="flex min-h-11 items-center rounded-md px-2 text-[15px] font-medium text-tnb09-paper/70 no-underline transition-colors hover:bg-tnb09-yellow/10 hover:text-tnb09-yellow">Process</a>
      <a href="#journal" class="flex min-h-11 items-center rounded-md px-2 text-[15px] font-medium text-tnb09-paper/70 no-underline transition-colors hover:bg-tnb09-yellow/10 hover:text-tnb09-yellow">Journal</a>
      <a href="#start" class="mt-2 flex min-h-11 items-center justify-center rounded-md bg-tnb09-yellow text-sm font-bold text-tnb09-dark no-underline">Start project</a>
    </div>
  </header>
  <main class="mx-auto max-w-3xl px-5 py-16 md:px-8">
    <h1 class="mb-4 text-4xl font-bold tracking-[-0.03em] text-tnb09-ink">Split Two-Tone Navbar</h1>
    <p class="text-lg leading-relaxed text-tnb09-mut">The diagonal is two complementary <code class="rounded bg-tnb09-yellow/25 px-1.5 py-0.5 text-[0.9em]">clip-path</code> polygons, each stated on the panel it cuts. Below <code class="rounded bg-tnb09-yellow/25 px-1.5 py-0.5 text-[0.9em]">md</code> both are dropped and the yellow survives as a 3px rule.</p>
  </main>
</div>
@import "tailwindcss";

@theme {
  --color-tnb09-page: #ffffff;
  --color-tnb09-page: oklch(1 0 0);
  --color-tnb09-dark: #1a1a2e;
  --color-tnb09-dark: oklch(0.24 0.04 280);
  --color-tnb09-dark2: #2a2a4e;
  --color-tnb09-dark2: oklch(0.32 0.06 280);
  --color-tnb09-yellow: #f7c948;
  --color-tnb09-yellow: oklch(0.85 0.15 90);
  --color-tnb09-paper: #f0eeff;
  --color-tnb09-paper: oklch(0.95 0.02 290);
  --color-tnb09-ink: #1a1a2e;
  --color-tnb09-ink: oklch(0.24 0.04 280);
  --color-tnb09-mut: #6b7280;
  --color-tnb09-mut: oklch(0.55 0.02 265);
  --font-tnb09-sans: 'Space Grotesk', system-ui, sans-serif;
}

.tnb-09 {
  width: 100%;
  min-height: 100svh;
}

.tnb-09 ::selection {
  background: var(--color-tnb09-yellow);
  color: #1a1a2e;
}

Setup — do this once per project

Skip this if your project already runs Tailwind v4.

1Load Tailwind
<script src="https://cdn.jsdelivr.net/npm/@tailwindcss/browser@4"></script>

Compiles in the browser — perfect for a CodePen or a quick test, not for production.

2Add the stylesheetRequiredthe @theme block is what makes the custom utilities exist
@import "tailwindcss";

@theme {
  --color-tnb09-page: #ffffff;
  --color-tnb09-page: oklch(1 0 0);
  --color-tnb09-dark: #1a1a2e;
  --color-tnb09-dark: oklch(0.24 0.04 280);
  --color-tnb09-dark2: #2a2a4e;
  --color-tnb09-dark2: oklch(0.32 0.06 280);
  --color-tnb09-yellow: #f7c948;
  --color-tnb09-yellow: oklch(0.85 0.15 90);
  --color-tnb09-paper: #f0eeff;
  --color-tnb09-paper: oklch(0.95 0.02 290);
  --color-tnb09-ink: #1a1a2e;
  --color-tnb09-ink: oklch(0.24 0.04 280);
  --color-tnb09-mut: #6b7280;
  --color-tnb09-mut: oklch(0.55 0.02 265);
  --font-tnb09-sans: 'Space Grotesk', system-ui, sans-serif;
}

.tnb-09 {
  width: 100%;
  min-height: 100svh;
}

.tnb-09 ::selection {
  background: var(--color-tnb09-yellow);
  color: #1a1a2e;
}
3Fonts used by this demooptional — skip if you have your own type stack
<link rel="preconnect" href="https://fonts.googleapis.com">
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
<link rel="stylesheet" href="https://fonts.googleapis.com/css2?family=Space+Grotesk:wght@400;500;600;700&display=swap">

What changed in the port

Which parts became utilities, which stayed CSS, and why.

  • The clip-path moved out of the stylesheet and onto the panel it shapes, next to the -ml-6 it has to agree with — the classic bug in this pattern is a cut with nothing behind it.
  • The CSS original hid the whole desktop bar and drew a separate .nav-09__mobile-bar; here the brand panel simply becomes the mobile bar, and the clip never applies because it is md:-prefixed.
  • The three-panel split is md:grid-cols-[auto_1fr_auto] — one utility replacing a grid-template rule plus two flex alignment rules.
  • Buttons became links with real hrefs, since every one of them navigates.
Paste this into ChatGPT, Claude, Cursor, or any coding assistant. The block below is pre-framed with everything the AI needs to integrate this demo into your project — markup, styles, scoping notes, and the source URL. Hit Copy and paste straight into your chat.
Here's a working CSS demo from CodeFronts. Use it as-is or adapt to your framework. All classes are scoped under a unique prefix so the code won't collide with your existing styles. MIT licensed.
Demo: Tailwind Split Two-Tone Navbar
Source: https://codefronts.com/navigation/tailwind-css-responsive-navbars/tailwind-split-two-tone-navbar/

Editorial contrast: a dark brand-and-nav bar and a yellow action block meeting on a 24px diagonal. The cut is a single arbitrary [clip-path:polygon(…)] utility on the yellow panel, which overlaps the dark bar by 24px so the angle always has dark behind it.
## HTML
```html
<div class="tnb-09 group w-full min-h-svh bg-tnb09-page font-tnb09-sans text-tnb09-ink" aria-label="Split two-tone navbar demo">
  <input type="checkbox" id="tnb09-menu" class="sr-only peer" aria-label="Toggle navigation menu">
  <header class="sticky top-0 z-100 md:grid md:h-17 md:grid-cols-[auto_1fr_auto]">
    <div class="flex h-15 items-center bg-tnb09-dark px-5 md:h-full md:px-10">
      <a href="#studio" class="text-xl font-bold tracking-[-0.02em] whitespace-nowrap text-tnb09-paper no-underline">Geo<span class="text-tnb09-yellow">metric</span></a>
      <label for="tnb09-menu" class="ml-auto flex size-11 cursor-pointer flex-col items-center justify-center gap-1.5 md:hidden" aria-hidden="true">
        <span class="block h-0.5 w-5.5 rounded-sm bg-tnb09-paper transition-transform duration-300 group-has-checked:translate-y-2 group-has-checked:rotate-45 motion-reduce:transition-none"></span>
        <span class="block h-0.5 w-5.5 rounded-sm bg-tnb09-paper transition-opacity duration-300 group-has-checked:opacity-0 motion-reduce:transition-none"></span>
        <span class="block h-0.5 w-5.5 rounded-sm bg-tnb09-paper transition-transform duration-300 group-has-checked:-translate-y-2 group-has-checked:-rotate-45 motion-reduce:transition-none"></span>
      </label>
    </div>
    <nav class="hidden items-center justify-center bg-tnb09-dark md:flex" aria-label="Primary">
      <ul class="flex list-none items-center gap-0">
        <li><a href="#studio" aria-current="page" class="block rounded-md px-4.5 py-2 text-sm font-semibold text-tnb09-yellow no-underline">Studio</a></li>
        <li><a href="#work" class="block rounded-md px-4.5 py-2 text-sm font-medium text-tnb09-paper/60 no-underline transition-colors duration-200 hover:bg-white/8 hover:text-tnb09-paper focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-tnb09-yellow">Work</a></li>
        <li><a href="#process" class="block rounded-md px-4.5 py-2 text-sm font-medium text-tnb09-paper/60 no-underline transition-colors duration-200 hover:bg-white/8 hover:text-tnb09-paper focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-tnb09-yellow">Process</a></li>
        <li><a href="#journal" class="block rounded-md px-4.5 py-2 text-sm font-medium text-tnb09-paper/60 no-underline transition-colors duration-200 hover:bg-white/8 hover:text-tnb09-paper focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-tnb09-yellow">Journal</a></li>
      </ul>
    </nav>
    <div class="hidden items-center gap-3 bg-tnb09-yellow pr-8 pl-10 md:flex md:-ml-6 md:[clip-path:polygon(24px_0,100%_0,100%_100%,0_100%)]">
      <a href="#login" class="rounded-md border-[1.5px] border-tnb09-dark/20 bg-tnb09-dark/10 px-4.5 py-2 text-sm font-bold whitespace-nowrap text-tnb09-dark no-underline transition-colors duration-200 hover:bg-tnb09-dark/18">Log in</a>
      <a href="#start" class="rounded-md bg-tnb09-dark px-4.5 py-2 text-sm font-bold whitespace-nowrap text-tnb09-paper no-underline transition-[background,translate] duration-200 hover:-translate-y-px hover:bg-tnb09-dark2 motion-reduce:transition-none motion-reduce:hover:translate-y-0">Start project</a>
    </div>
    <div class="hidden border-b-[3px] border-tnb09-yellow bg-tnb09-dark px-5 pt-2 pb-4 max-md:group-has-checked:grid">
      <a href="#studio" class="flex min-h-11 items-center rounded-md px-2 text-[15px] font-semibold text-tnb09-yellow no-underline">Studio</a>
      <a href="#work" class="flex min-h-11 items-center rounded-md px-2 text-[15px] font-medium text-tnb09-paper/70 no-underline transition-colors hover:bg-tnb09-yellow/10 hover:text-tnb09-yellow">Work</a>
      <a href="#process" class="flex min-h-11 items-center rounded-md px-2 text-[15px] font-medium text-tnb09-paper/70 no-underline transition-colors hover:bg-tnb09-yellow/10 hover:text-tnb09-yellow">Process</a>
      <a href="#journal" class="flex min-h-11 items-center rounded-md px-2 text-[15px] font-medium text-tnb09-paper/70 no-underline transition-colors hover:bg-tnb09-yellow/10 hover:text-tnb09-yellow">Journal</a>
      <a href="#start" class="mt-2 flex min-h-11 items-center justify-center rounded-md bg-tnb09-yellow text-sm font-bold text-tnb09-dark no-underline">Start project</a>
    </div>
  </header>
  <main class="mx-auto max-w-3xl px-5 py-16 md:px-8">
    <h1 class="mb-4 text-4xl font-bold tracking-[-0.03em] text-tnb09-ink">Split Two-Tone Navbar</h1>
    <p class="text-lg leading-relaxed text-tnb09-mut">The diagonal is two complementary <code class="rounded bg-tnb09-yellow/25 px-1.5 py-0.5 text-[0.9em]">clip-path</code> polygons, each stated on the panel it cuts. Below <code class="rounded bg-tnb09-yellow/25 px-1.5 py-0.5 text-[0.9em]">md</code> both are dropped and the yellow survives as a 3px rule.</p>
  </main>
</div>
```
## CSS
```css
@import "tailwindcss";

@theme {
  --color-tnb09-page: #ffffff;
  --color-tnb09-page: oklch(1 0 0);
  --color-tnb09-dark: #1a1a2e;
  --color-tnb09-dark: oklch(0.24 0.04 280);
  --color-tnb09-dark2: #2a2a4e;
  --color-tnb09-dark2: oklch(0.32 0.06 280);
  --color-tnb09-yellow: #f7c948;
  --color-tnb09-yellow: oklch(0.85 0.15 90);
  --color-tnb09-paper: #f0eeff;
  --color-tnb09-paper: oklch(0.95 0.02 290);
  --color-tnb09-ink: #1a1a2e;
  --color-tnb09-ink: oklch(0.24 0.04 280);
  --color-tnb09-mut: #6b7280;
  --color-tnb09-mut: oklch(0.55 0.02 265);
  --font-tnb09-sans: 'Space Grotesk', system-ui, sans-serif;
}

.tnb-09 {
  width: 100%;
  min-height: 100svh;
}

.tnb-09 ::selection {
  background: var(--color-tnb09-yellow);
  color: #1a1a2e;
}
```

How this works

The angle lives on the panel that owns it. Only the yellow block is clipped; a negative margin pulls it 24px over the dark bar so the slice it gives up is filled by dark, not by page:

class="md:-ml-6 md:[clip-path:polygon(24px_0,100%_0,100%_100%,0_100%)]"

Spaces are the enemy. An arbitrary value cannot contain a literal space, so every gap inside the polygon is an underscore; Tailwind converts them back when it emits the declaration.

Mobile drops the geometry, not the identity. The clips are md:-prefixed, so below the breakpoint neither panel is cut at all, and the yellow survives as a 3px rule under the menu — the palette survives, the diagonal does not need to.

Make it yours

  • Split ratio: the middle track is 1fr; give the brand panel a md:min-w-55 for longer wordmarks.
  • Steeper cut: raise 24px in the polygon and the matching -ml-6 together, or a wedge of page background reappears.
  • Invert: swap the two panel background tokens for a light-left, dark-right personality.
  • Straight split: remove the clip and the negative margin — the three-panel layout is already correct without them.

Gotchas — read before shipping

  • The clip and the overlap must agree; a 24px cut against a 16px pull leaves a visible wedge of page background.
  • A clipped panel clips its children, including any shadow you put on them — keep elevation off the panels' contents.
  • Arbitrary values are matched statically: a clip-path assembled at runtime from a variable emits no CSS at all.
  • Below the breakpoint the diagonal reads as a rendering bug on a 360px-wide bar — dropping it is the correct call, not a shortcut.

Browser support

ChromeSafariFirefoxEdge
111+16.4+128+111+

clip-path with polygon() is Baseline 2021; the floor quoted is Tailwind v4's generated sheet.

Techniques used in this demo

Utilitiesfirst-class utility or variant

gridtw ↗transitionstw ↗

Theme tokensset in @theme, used by a utility

oklch()tw ↗

Arbitraryneeds bracket syntax

clip-pathtw ↗

Search CodeFronts

Loading…

↑↓ navigate↵ selectesc closeOpen full search page →