A small navigation bar can wrap instead of disappearing on narrow screens. Start with real links in a named nav landmark, then use flex layout to share the space.

Version and setup

These examples are compiled with Tailwind CSS 3.3.2. Copy document includes the required CSS, so that document runs without a Tailwind installation. To use the utility classes in a project, follow the versioned setup guide.

This site customizes its spacing scale: p-10 is 10px here, while standard Tailwind 3 uses 2.5rem. The examples below use unaffected spacing keys or explicit arbitrary values. Check your project configuration before assuming a utility’s size. Tailwind 4 has a different setup; use its official installation guide for a new version-4 project.

Follow links in a wrapping navigation barLink

Tailwind CSS 3.3.2; the CSS tab includes the compiled styles.

HTML

<nav
  aria-label="Example sections"
  class="flex flex-wrap items-center gap-4 p-4 bg-blue-50"
>
  <a
    href="#overview"
    aria-current="location"
    class="p-3 font-bold underline text-blue-800"
    >Overview</a
  >
  <a href="#examples" class="p-3 underline text-blue-800">Examples</a>
  <a href="#notes" class="p-3 underline text-blue-800">Notes</a>
</nav>
<main class="p-4">
  <section id="overview">
    <h2 class="font-bold">Overview</h2>
    <p>Plan the structure.</p>
  </section>
  <section id="examples" class="mt-4">
    <h2 class="font-bold">Examples</h2>
    <p>Try a small working example.</p>
  </section>
  <section id="notes" class="mt-4">
    <h2 class="font-bold">Notes</h2>
    <p>Test keyboard navigation.</p>
  </section>
</main>

CSS

*,
::before,
::after {
  box-sizing: border-box;
  border: 0 solid #e5e7eb;
}
h1,
h2,
h3,
h4,
h5,
h6,
p,
figure,
blockquote,
dl,
dd {
  margin: 0;
}
h1,
h2,
h3,
h4,
h5,
h6 {
  font-size: inherit;
  font-weight: inherit;
}
button,
input,
select,
textarea {
  font: inherit;
  color: inherit;
}
button {
  background: none;
}
img,
svg,
video {
  display: block;
  max-width: 100%;
}
img,
video {
  height: auto;
}
a {
  color: inherit;
  text-decoration: inherit;
}
ol,
ul,
menu {
  list-style: none;
  margin: 0;
  padding: 0;
}
.mt-4 {
  margin-top: 1rem;
}
.flex {
  display: flex;
}
.flex-wrap {
  flex-wrap: wrap;
}
.items-center {
  align-items: center;
}
.gap-4 {
  gap: 1rem;
}
.bg-blue-50 {
  --tw-bg-opacity: 1;
  background-color: rgb(239 246 255 / var(--tw-bg-opacity));
}
.p-3 {
  padding: 0.75rem;
}
.p-4 {
  padding: 1rem;
}
.font-bold {
  font-weight: 700;
}
.text-blue-800 {
  --tw-text-opacity: 1;
  color: rgb(30 64 175 / var(--tw-text-opacity));
}
.underline {
  text-decoration-line: underline;
}

Edit HTML or CSS to update the preview as you type. Copy code snippet copies the selected tab. Preview spacing and font defaults are not included.

flex-wrap lets the links move to another line. No breakpoint hides them, so there is no missing mobile menu. Tab through all three and press Enter to reach their sections. The current marker is a static demonstration; an application must update it when the active location changes.

Add a collapsed menu only when needed

A disclosure needs a real button, aria-expanded, aria-controls, a matching panel, and keyboard testing. Hiding links with hidden lg:block alone makes them unavailable at small widths.

Ordinary site navigation is not an application menu: avoid adding role="menu" unless implementing that interaction pattern. Review nav, links and flex wrapping.

Sources

Reference 1 Reference 2 Reference 3 provide the technical details and current compatibility information.