Footer — Directory rows with descriptions

Three full-width directory rows pair group titles with descriptions and link sets. Use it when a broad directory should read from top to bottom.

ReactHTML

1440 × 900

Open in new tab

Component.tsx61 lines

export default function FooterDirectoryRows() {
  return (
    <footer className="border-t border-neutral-200 bg-white text-neutral-900">
      <div className="mx-auto max-w-6xl px-6 py-16 sm:py-24 ">
        <a href="#" aria-label="Logo home" className="inline-flex items-center gap-2 font-semibold hover:text-neutral-600 focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-neutral-900"><svg aria-hidden="true" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="1.5" strokeLinecap="round" strokeLinejoin="round" className="size-6"><path d="M4 4h16v16H4zM4 12h16M12 4v16" /></svg>Logo</a>
        <nav aria-label="Footer directory rows" className="mt-10 border-t border-neutral-200">
          <div className="grid gap-4 border-b border-neutral-200 py-6 md:grid-cols-[160px_1fr_1fr]">
            <h2 className="text-lg font-semibold">Explore</h2>
            <p className="text-sm text-neutral-600">Destinations for learning about the offer</p>
            <ul role="list" className="flex flex-wrap gap-x-6 gap-y-3">
              <li>
                <a href="#" className="font-medium text-neutral-900 underline underline-offset-4 hover:text-neutral-600 focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-neutral-900 text-sm">Overview</a>
              </li>
              <li>
                <a href="#" className="font-medium text-neutral-900 underline underline-offset-4 hover:text-neutral-600 focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-neutral-900 text-sm">Features</a>
              </li>
              <li>
                <a href="#" className="font-medium text-neutral-900 underline underline-offset-4 hover:text-neutral-600 focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-neutral-900 text-sm">Pricing</a>
              </li>
            </ul>
          </div>
          <div className="grid gap-4 border-b border-neutral-200 py-6 md:grid-cols-[160px_1fr_1fr]">
            <h2 className="text-lg font-semibold">Learn</h2>
            <p className="text-sm text-neutral-600">Destinations for deeper information</p>
            <ul role="list" className="flex flex-wrap gap-x-6 gap-y-3">
              <li>
                <a href="#" className="font-medium text-neutral-900 underline underline-offset-4 hover:text-neutral-600 focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-neutral-900 text-sm">Documentation</a>
              </li>
              <li>
                <a href="#" className="font-medium text-neutral-900 underline underline-offset-4 hover:text-neutral-600 focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-neutral-900 text-sm">Guides</a>
              </li>
              <li>
                <a href="#" className="font-medium text-neutral-900 underline underline-offset-4 hover:text-neutral-600 focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-neutral-900 text-sm">Updates</a>
              </li>
            </ul>
          </div>
          <div className="grid gap-4 border-b border-neutral-200 py-6 md:grid-cols-[160px_1fr_1fr]">
            <h2 className="text-lg font-semibold">Connect</h2>
            <p className="text-sm text-neutral-600">Destinations for contacting the team</p>
            <ul role="list" className="flex flex-wrap gap-x-6 gap-y-3">
              <li>
                <a href="#" className="font-medium text-neutral-900 underline underline-offset-4 hover:text-neutral-600 focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-neutral-900 text-sm">Contact</a>
              </li>
              <li>
                <a href="#" className="font-medium text-neutral-900 underline underline-offset-4 hover:text-neutral-600 focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-neutral-900 text-sm">Community</a>
              </li>
              <li>
                <a href="#" className="font-medium text-neutral-900 underline underline-offset-4 hover:text-neutral-600 focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-neutral-900 text-sm">Support</a>
              </li>
            </ul>
          </div>
        </nav>
        <div className="mt-8 flex flex-wrap gap-4 text-xs text-neutral-500">
          <p className="mr-auto">© 2026 Site name</p>
          <a href="#" className="font-medium text-neutral-900 underline underline-offset-4 hover:text-neutral-600 focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-neutral-900 text-xs">Privacy</a>
          <a href="#" className="font-medium text-neutral-900 underline underline-offset-4 hover:text-neutral-600 focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-neutral-900 text-xs">Terms</a>
        </div>
      </div>
    </footer>
  )
}

Pattern notes

When to use: Use for directory groups that need an explanation. Choose link columns when terse headings are enough. Variations include four groups or removing descriptions for a denser footer.
Hierarchy: Scan 18px group titles then the explanatory copy and destination set. Keep group names below 2 words, descriptions below 10 and links below 2.
Responsive: Below 768px every directory row stacks heading, description and links. Link sets wrap rather than causing horizontal scroll.
Layout: The white section uses a 1152px max-w-6xl container, 24px px-6 sides and 64px py-16 vertical padding, increasing to 96px sm:py-24 at 640px. Identity precedes the directory by 40px. Each row has 24px vertical padding and a 1px bottom rule. Desktop columns use 160px for the heading and equal flexible description and link areas with 16px gaps. Links wrap with 24px horizontal gaps.
States: Links underline on hover and show a 2px neutral-900 keyboard outline offset by 2px.

Desktop wireframe

┌──────────────────────────────────────────────────────────────┐
│ Logo                                                         │
│ ──────────────────────────────────────────────────────────   │
│ Explore   Group description   [Overview] [Features] [Pricing]│
│ ──────────────────────────────────────────────────────────   │
│ Learn     Group description   [Docs] [Guides] [Updates]      │
│ ──────────────────────────────────────────────────────────   │
│ Connect   Group description   [Contact] [Community] [Support]│
│ ──────────────────────────────────────────────────────────   │
│ Copyright                                   [Privacy] [Terms]│
└──────────────────────────────────────────────────────────────┘

View all

Footer — Accordion sitemap
Layout tags: stacked,list,compact
Footer — Address beside a map
Layout tags: asymmetric,media,spacious
Footer — Brand and link columns
Layout tags: asymmetric,grid,compact

Footer — Directory rows with descriptions

Pattern notes

More in Footer

Footer — Accordion sitemap

Footer — Address beside a map

Footer — Brand and link columns