Tailwind CSS cookbook · Beginner
Build a responsive navbar with a mobile menu
Show links in a row on desktop and collapse them into a menu button on phones, without writing JavaScript.
Approach
Use flex justify-between for the bar. On phones, a native <details> element works as a menu button with no
JavaScript; hide it from md: up and show the inline links instead with hidden md:flex.
Solution
<nav class="bg-slate-900 text-white">
<div class="flex items-center justify-between px-4 py-3">
<a href="#" class="text-lg font-bold">Camel<span class="text-amber-400">.</span></a>
<div class="hidden gap-6 text-sm md:flex">
<a href="#" class="hover:text-amber-400">Products</a>
<a href="#" class="hover:text-amber-400">Pricing</a>
<a href="#" class="hover:text-amber-400">Docs</a>
</div>
<details class="group relative md:hidden">
<summary class="cursor-pointer list-none rounded-md px-3 py-1.5 ring-1 ring-white/30">Menu</summary>
<div class="absolute right-0 z-10 mt-2 w-40 rounded-lg bg-white p-2 text-slate-900 shadow-lg">
<a href="#" class="block rounded px-3 py-2 hover:bg-slate-100">Products</a>
<a href="#" class="block rounded px-3 py-2 hover:bg-slate-100">Pricing</a>
<a href="#" class="block rounded px-3 py-2 hover:bg-slate-100">Docs</a>
</div>
</details>
</div>
</nav>
Pitfalls
- Hiding the menu with
md:hiddenbut forgettinghidden md:flexon the desktop links, so both show. - Removing the
<summary>marker without keeping the button recognisable; give it a clear label.
Variations
- Use a
<button aria-expanded>and a little JavaScript (or Headless UI's Disclosure) for animated menus. - Make the bar sticky with
sticky top-0 z-20 backdrop-blur.
Further reading: Tailwind CSS docs
Reference: https://tailwindcss.com/docs/responsive-design