Skip to content
shadcn.io

shadcn.io is not affiliated with official shadcn/ui

Footer blocks

Pro

Breadcrumb Footer Block for Svelte

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 Svelte with Ark 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.

All 100 footer blocks