Sectioned navigation.

The component#

html
<aside class="w-72 border-r pe-6 text-sm"><p class="px-3 pt-4 text-xs font-semibold uppercase text-slate-400">Guides</p><a class="mt-1 block rounded-lg bg-blue-50 px-3 py-1.5 font-medium text-blue-700">Intro</a><a class="block rounded-lg px-3 py-1.5 hover:bg-slate-50">Install</a></aside>

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