Footer — Two audience directories

Two equally sized directory panels lead into a shared identity and legal bar. Use it when different audiences need separate final navigation.

ReactHTML

1440 × 900

Open in new tab

Component.tsx55 lines

export default function FooterAudienceDirectories() {
  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 ">
        <div className="grid gap-6 md:grid-cols-2">
          <nav aria-label="For individual readers" className="rounded-lg border border-neutral-200 bg-white p-6 sm:p-8">
            <h2 className="text-lg font-semibold">For individual readers</h2>
            <p className="mt-3 text-sm text-neutral-600">A short introduction to destinations for personal use</p>
            <div className="mt-6">
              <ul role="list" className="grid gap-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">Getting started</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">Support</a>
                </li>
              </ul>
            </div>
          </nav>
          <nav aria-label="For teams" className="rounded-lg border border-neutral-200 bg-white p-6 sm:p-8">
            <h2 className="text-lg font-semibold">For teams</h2>
            <p className="mt-3 text-sm text-neutral-600">A short introduction to shared-work destinations</p>
            <div className="mt-6">
              <ul role="list" className="grid gap-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">Team 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">Access management</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">Contact</a>
                </li>
              </ul>
            </div>
          </nav>
        </div>
        <div className="mt-10 flex flex-col gap-6 border-t border-neutral-200 pt-6 sm:flex-row sm:items-center sm:justify-between">
          <div>
            <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>
            <p className="mt-2 text-xs text-neutral-500">© 2026 Site name</p>
          </div>
          <nav aria-label="Footer legal links" className="flex flex-wrap gap-6">
            <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">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-sm">Terms</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-sm">Accessibility</a>
          </nav>
        </div>
      </div>
    </footer>
  )
}

Pattern notes

When to use: Use for two clear audience groups with separate destinations. Choose a conventional sitemap for one common directory. Variations include new and returning readers or members and administrators.
Hierarchy: Readers choose an audience before scanning its links. Keep audience names below 4 words, introductions below 12 and destinations below 3. Identity and copyright close the footer.
Responsive: Below 768px directories stack. The legal bar becomes a horizontal flex row at 640px; below that identity and legal links stack.
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. Two equal md:grid-cols-2 directory panels have 24px gaps and 24px padding, 32px from 640px. Each has an 18px audience title, paragraph and a three-link list. Identity and legal destinations share a divided row 40px below.
States: Links underline on hover and show a 2px neutral-900 keyboard outline offset by 2px.

Desktop wireframe

┌──────────────────────────────────────────────────────────────┐
│ ┌─────────────────────────┐  ┌─────────────────────────┐     │
│ │ For individual readers  │  │ For teams               │     │
│ │ Audience introduction   │  │ Audience introduction   │     │
│ │ [Getting started]       │  │ [Team overview]         │     │
│ │ [Guides]                │  │ [Access management]     │     │
│ │ [Support]               │  │ [Contact]               │     │
│ └─────────────────────────┘  └─────────────────────────┘     │
│ ──────────────────────────────────────────────────────────   │
│ Logo / Copyright                   [Privacy] [Terms] [Access]│
└──────────────────────────────────────────────────────────────┘

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 — Two audience directories

Pattern notes

More in Footer

Footer — Accordion sitemap

Footer — Address beside a map

Footer — Brand and link columns