Responsive navigation bar.

The component#

html
<header class="sticky top-0 z-40 border-b bg-white/80 backdrop-blur"><nav class="container mx-auto flex h-16 items-center justify-between px-6"><a class="font-bold">Brand</a><div class="hidden md:flex gap-6 text-sm">Links</div><button class="rounded-lg bg-blue-600 px-4 py-2 text-sm text-white md:hidden" aria-label="Menu">☰</button></nav></header>

Responsive & dark#

Add dark: twins to every surface and text color (bg-white dark:bg-slate-900, border-slate-200 dark:border-slate-800). Because this recipe is pure utilities, dark mode is a per-class decision — see concepts/dark-mode-strategies|dark mode strategies.

Customization#

  • Swap palette classes to re-theme instantly
  • Adjust radii (rounded-lg → rounded-2xl) for tone
  • Add transition + state variants for polish
  • Extract into a framework component when reused 3+ times

recipes/index|Recipe index · components/index|Design components