Components

Navigation

Give people a stable sense of place with breadcrumbs, explicit current states, and concise link labels.

Usage & approach

Use labelled nav landmarks when more than one navigation group appears. Mark the current page with aria-current="page". This reference uses wrapping navigation on small screens so no menu script is needed. Links here point only to sections within the example.

Specifications

Current link: aria-current="page"; bg-[#f1f2f0] text-[#006838]
Navigation: flex flex-wrap items-center gap-2
Targets: inline-flex min-h-11 items-center px-4
Breadcrumb: ol with visible separators and current page

Application navigation

A responsive navigation bar with breadcrumbs. The overview remains the static current state.

<div class="space-y-6">
  <nav aria-label="Policy navigation" class="flex flex-wrap gap-2 border-b border-[#dfe7df] pb-3 dark:border-[#3d4140]">
    <a href="#overview" aria-current="page" class="inline-flex min-h-11 items-center rounded-md bg-[#f1f2f0] px-4 text-sm font-semibold text-[#006838] focus-visible:outline-2 dark:bg-[#303232] dark:text-[#f4f5f2]">Overview</a>
    <a href="#coverage" class="inline-flex min-h-11 items-center rounded-md px-4 text-sm focus-visible:outline-2">Coverage</a><a href="#documents" class="inline-flex min-h-11 items-center rounded-md px-4 text-sm focus-visible:outline-2">Documents</a>
  </nav>
  <nav aria-label="Breadcrumb"><ol class="flex flex-wrap gap-2 text-sm"><li><a href="#overview" class="text-[#006838] underline underline-offset-4 dark:text-[#f4f5f2]">Policies</a></li><li aria-hidden="true">/</li><li aria-current="page">Policy overview</li></ol></nav>
  <section id="overview"><h3 class="font-semibold">Policy overview</h3></section><section id="coverage"><h3 class="font-semibold">Coverage</h3></section><section id="documents"><h3 class="font-semibold">Documents</h3></section>
</div>

HTML + Tailwind CSS · fit to panel

Bring this into your project

Copy the HTML from the code panel. Keep complete utility names in files scanned by Tailwind, retain accessible labels and focus styles, and connect actions to your own application. Preview controls belong to this documentation and are not part of the copied example.