Skip to content
shadcn.io

shadcn.io is not affiliated with official shadcn/ui

Footer blocks

Pro

Breadcrumb Footer Block for React

A breadcrumb footer for a CI service's docs: a trail band ending on the current page, three link groups in hairline columns and a foot band with the wordmark and policies.

Framework
UI library

Preview

Preview width

Installation

Part of Pro
Pro unlocks the code and one-line install of every Pro button and text effect, plus the MCP for your AI editor.
Get ProSign in
Have Pro already? Sign in to open it.Opens here as soon as you're Pro.

Overview

A breadcrumb footer for React with Base UI. Under the page's top rule a trail band shows where you are: Home, Docs, Guides and Webhooks, with the current page in medium weight and not a link. Below it three groups of links ("In this guide", "Related", "Help") sit in the nav labelled Footer, in columns that share hairlines from md, and a foot band carries the wordmark, one sentence, the policies and the copyright. It's built from the catalog's Breadcrumb, Guides, plain links and your theme's tokens, and it is a static component with no state.

FAQ

How does the trail work for assistive technology?

The trail is its own navigation landmark labelled Breadcrumb, with an ordered list inside, and the last item carries aria-current="page" so it is announced as the current page. The chevrons between the items are decorative and hidden from screen readers.

How do I change the trail?

Edit the TRAIL array (the links, from Home to the parent page) and the CURRENT string (the page you are on). The current page is never a link: it names where the reader already is.

Why two navigation landmarks?

They do different jobs. The breadcrumb says where this page sits in the docs; the nav labelled Footer lists the links to read next. Each has its own label, so a screen reader's landmark list shows both as separate stops.

How do the hairline columns work?

The nav is a grid with md:divide-x, so a one-pixel rule runs between the three columns from md and runs the full height of the band. Its top rule comes from Guides, with a + where it meets each rail. On a phone the groups sit two by two with no dividers.

What happens to a long trail on a phone?

The list wraps onto a second line instead of scrolling, and each crumb stays a full-size link. Nothing scrolls sideways at 320 pixels.

  • Pro

    Documentation Footer

    Sitemaps and trails

    A documentation footer for a router library's docs: previous and next page cells, an Edit this page link with a pencil, four link groups and a legal band.

  • Pro

    Developer Hub Footer

    Products and catalogs

    A developer-hub footer for a secrets manager: SDK tabs (TypeScript, Python, Go) with an install command, a copy button and the version, beside three link groups.

  • Pro

    FAQ Links Footer

    Content and updates

    An FAQ-links footer for a tax-prep app: five common questions as ruled link rows with a chevron and an All answers link, beside two link groups.

  • Pro

    Sitemap Tree Footer

    Sitemaps and trails

    A sitemap footer drawn as three trees: nested lists with hairline connectors, a root link for each section, pages indented under it and some with their own children.

  • Pro

    Hairline Cells Link Directory Footer

    Link grids

    A brandless link directory: six groups of five links as cells on shared hairlines, three across by two down, with a legal band under the grid.

  • Pro

    Link Columns Footer

    Link grids

    The classic link-column footer for an email API: a brand column with the wordmark, one sentence and four social links, four groups of links behind a split divider, and a legal band with the copyright and the policy links.

All 100 footer blocks