Breadcrumbs
Examples
Basic breadcrumbs
With longer hierarchies
Importing
Slots
Properties
Custom Properties
Parts

Breadcrumbs

<terra-breadcrumbs> | TerraBreadcrumbs

Since 1.0

stable

A collection of breadcrumb items that shows the current page’s location in the site hierarchy.

Home

Section

Current page

<terra-breadcrumbs>
    <terra-breadcrumb href="/">Home</terra-breadcrumb>
    <terra-breadcrumb href="/section">Section</terra-breadcrumb>
    <terra-breadcrumb current>Current page</terra-breadcrumb>
</terra-breadcrumbs>

Examples

Basic breadcrumbs

Use terra-breadcrumbs with one or more terra-breadcrumb items to show the path to the current page.

Home

Missions

Artemis

<terra-breadcrumbs>
    <terra-breadcrumb href="/">Home</terra-breadcrumb>
    <terra-breadcrumb href="/missions">Missions</terra-breadcrumb>
    <terra-breadcrumb current>Artemis</terra-breadcrumb>
</terra-breadcrumbs>

Always mark the last breadcrumb as current in your app:

This ensures the current page is styled correctly.
It also applies aria-current="page" to the active breadcrumb for screen readers. Omitting current means assistive technologies can’t reliably identify the current location.

With longer hierarchies

Breadcrumbs should not display more than three levels of hierarchy. For deeper pages, replace the earlier levels with an ellipsis breadcrumb that you manage in your application.

…

Missions

Artemis

<terra-breadcrumbs style="--terra-breadcrumbs-separator: '/';">
    <terra-breadcrumb>...</terra-breadcrumb>
    <terra-breadcrumb href="/missions">Missions</terra-breadcrumb>
    <terra-breadcrumb current>Artemis</terra-breadcrumb>
</terra-breadcrumbs>

In this example, your application is responsible for:

Truncation logic: choosing when to show the ... breadcrumb and which levels to omit.
Current page: setting current on the last breadcrumb, which applies aria-current="page" for accessibility.

[component-metadata:terra-breadcrumbs]

Importing

If you’re using the autoloader or the traditional loader, you can ignore this section. Otherwise, feel free to use any of the following snippets to cherry pick this component.

Script

Import

Bundler

React

To import this component from the CDN using a script tag:

<script type="module" src="https://cdn.jsdelivr.net/npm/@nasa-terra/components@0.0.138/cdn/components/breadcrumbs/breadcrumbs.js"></script>

To import this component from the CDN using a JavaScript import:

import 'https://cdn.jsdelivr.net/npm/@nasa-terra/components@0.0.138/cdn/components/breadcrumbs/breadcrumbs.js';

To import this component using a bundler:

import '@nasa-terra/components/dist/components/breadcrumbs/breadcrumbs.js';

To import this component as a React component:

import TerraBreadcrumbs from '@nasa-terra/components/dist/react/breadcrumbs';

Slots

Name	Description
(default)	The breadcrumb items. Typically `<terra-breadcrumb>` elements.

Learn more about using slots.

Properties

Name	Description	Type	Default
`ariaLabel` `aria-label`	Accessible label for the breadcrumb navigation.	`string`	`'Breadcrumb'`
`theme`	Color theme of the breadcrumbs, matching the Horizon Design System.	`'light' \| 'dark'`	`'light'`
`updateComplete`	A read-only promise that resolves when the component has finished updating.

Learn more about attributes and properties.

Custom Properties

Name	Description	Default
`--terra-breadcrumbs-gap`	The space between breadcrumbs.

Learn more about customizing CSS custom properties.

Parts

Name	Description
`base`	The component’s base wrapper.
`nav`	The navigation container.

Learn more about customizing CSS parts.