Fylgja Breadcrumbs

Breadcrumbs are a trail of links showing where the current page sits in the site hierarchy, giving the reader a quick way back up. It is an ordered list of links in a labeled <nav>, and Fylgja adds the separators for you.

Preview

<nav aria-label="Breadcrumb">
	<ol class="breadcrumbs">
		<li><a href="/">Home</a></li>
		<li><a href="/ui/">UI Components</a></li>
		<li><a href="/ui/navigation/breadcrumbs/" aria-current="page">Breadcrumbs</a></li>
	</ol>
</nav>

Usage

• Wrap the trail in a <nav aria-label="Breadcrumb"> so it is announced as a distinct navigation landmark.
• Use an <ol class="breadcrumbs"> (ordered, since the sequence matters), with one <li> per level, each holding an <a>.
• Mark the last link aria-current="page"; it is the current page.
• The separators are drawn by the component, so do not add your own.

Accessibility

• The aria-label names the landmark, and aria-current="page" marks the reader’s location in the trail.
• Keep the labels the same as the page titles they link to, so the trail is predictable.