rc-breadcrumbs

Breadcrumb trail enhancer for a native <nav> and ordered list of links, following the WAI-ARIA Breadcrumb pattern.

Package

@rcarls/rc-breadcrumbs

Element

<rc-breadcrumbs>

Native dependency

Requires a native nav child holding an ordered list of links

State model

Optional current-href that moves aria-current

Main events

None

Related

Usage rulesrc-navigation-railrc-app-barTheme previews

Installation

npm

npm install @rcarls/rc-webcomponents@next

Yarn

yarn add @rcarls/rc-webcomponents@next

pnpm

pnpm add @rcarls/rc-webcomponents@next

import '@rcarls/rc-webcomponents/rc-breadcrumbs/define';

Usage

Author the whole trail. It is a complete, working breadcrumb before the element upgrades:

<rc-breadcrumbs>
  <nav>
    <ol>
      <li><a href="/">Home</a></li>
      <li><a href="/settings">Settings</a></li>
      <li><a href="/settings/members" aria-current="page">Members</a></li>
    </ol>
  </nav>
</rc-breadcrumbs>

The element lays the list out as a wrapping row and draws a separator before each item after the first. The separators are CSS generated content with empty alternative text, so screen readers read only the links.

Live demo

Accessibility

• The <nav> is a navigation landmark. When it has no aria-label or aria-labelledby, the element names it "Breadcrumb", in the element's language (see Localization). An authored name always wins; give each landmark a distinct name when a page has more than one.
• Mark the current page's link with aria-current="page". If the current page is plain text rather than a link, aria-current is optional.
• There is no keyboard behavior beyond the links' own: each link is one tab stop.

Current page after client navigation

In an app that changes pages without reloading, set current-href to the current URL instead of re-rendering the trail. The element moves aria-current="page" to the link whose resolved href matches, ignoring any fragment. Remove the attribute to give aria-current back to the markup.

Theming

--rc-breadcrumbs-separator sets the separator string, and the theme packages choose one that follows the reading direction. The default demo mode shows the component without a package theme; use the shared preview controls to compare themes.

API

Properties

Property	Markup	Type	Default	Description
currentHref	current-href	string | undefined	Not specified	URL of the current page; see the `current-href` attribute.
messages	JS property only	Partial<RCBreadcrumbsMessages> | undefined	Not specified	Built-in text overrides; unset keys fall back to registered text, then English.

CSS Custom Properties

Property	Default	Description
--rc-breadcrumbs-gap	0.5em	Space between an item and its separator.
--rc-breadcrumbs-separator	'/'	Separator drawn before every item after the first. It is CSS generated content with empty alternative text, so it is never announced.
--rc-breadcrumbs-separator-color	currentColor	Separator color.
--rc-breadcrumbs-current-color	Not specified	Color of the current-page item. Defers to the inherited color when unset.