Footer — Utility rail beside directory

A narrow utility panel contains identity, service status and language selection beside three directory columns. Use it when site-wide utilities belong in the footer.

ReactHTML

1440 × 900

Open in new tab

Component.tsx76 lines

export default function FooterUtilityRail() {
  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-10 lg:grid-cols-[240px_1fr]">
          <aside className="rounded-lg border border-neutral-200 bg-neutral-50 p-6">
            <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-5 text-sm text-neutral-600">Short statement about the site purpose</p>
            <a href="#" className="mt-6 inline-flex items-center gap-2 text-sm 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"><span aria-hidden="true" className="size-2 rounded-full border border-neutral-300 bg-neutral-900"></span>All systems operational</a>
            <label htmlFor="footer-utility-rail-language" className="mt-6 block text-sm font-medium">Language</label>
            <select id="footer-utility-rail-language" name="language" className="mt-2 h-10 w-full rounded-md border border-neutral-300 bg-white px-3 text-sm focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-neutral-900">
              <option>English</option>
              <option>Español</option>
              <option>Français</option>
            </select>
          </aside>
          <nav aria-label="Footer directory" className="grid gap-8 sm:grid-cols-3">
            <div>
              <h2 className="text-base font-semibold">Product</h2>
              <div className="mt-5">
                <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">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">Pricing</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>
            <div>
              <h2 className="text-base font-semibold">Resources</h2>
              <div className="mt-5">
                <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">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">Community</a>
                  </li>
                </ul>
              </div>
            </div>
            <div>
              <h2 className="text-base font-semibold">Company</h2>
              <div className="mt-5">
                <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">About</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">Careers</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>
            </div>
          </nav>
        </div>
        <div className="mt-10 flex flex-wrap items-center gap-x-6 gap-y-3 border-t border-neutral-200 pt-6">
          <p className="mr-auto text-xs text-neutral-500">© 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 when status and language choices should be available at the page end. Choose fixed columns for a purely navigational footer. Variations include a region selector or an availability label.
Hierarchy: Identity and three 16px directory headings orient the footer. Use purpose copy below 12 words, status below 4 and links below 2. The language control has a visible label.
Responsive: Below 1024px utilities sit above the directory. Directory columns stack below 640px. Legal items wrap into a new row at narrow widths.
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. A 240px utility rail and flexible directory form a lg:grid with 40px gaps. The rail is a p-6 neutral-50 panel with status and a labelled 40px select. Directory groups use three sm:grid-cols-3 columns and 32px gaps. The legal bar follows after 40px.
States: Links underline on hover and show a 2px neutral-900 keyboard outline offset by 2px. The native select opens its option list and shows the chosen language label. The status link includes both a border-backed dot and text. The select has a visible 2px focus outline.

Desktop wireframe

┌──────────────────────────────────────────────────────────────┐
│ ┌───────────────────┐  Product     Resources     Company     │
│ │ Logo              │  [Overview] [Docs]         [About]     │
│ │ Site purpose      │  [Pricing]  [Guides]       [Careers]   │
│ │ [Service status]  │  [Updates]  [Community]    [Contact]   │
│ │ Language          │                                        │
│ │ [English       v] │                                        │
│ └───────────────────┘                                        │
│ ──────────────────────────────────────────────────────────   │
│ 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 — Utility rail beside directory

Pattern notes

More in Footer

Footer — Accordion sitemap

Footer — Address beside a map

Footer — Brand and link columns