#Breadcrumbs

The location trail for a page that sits deep in a hierarchy — each ancestor links up, and the last item is the page you are on. Skip it in a flat app of one or two levels, and never use it to move between peers at the same level: that is Tabs. It shows vertical hierarchy only, and complements the sidebar rather than replacing it.

Source · Storybook

#Usage

import { Breadcrumbs, BreadcrumbsItem } from '@wallarm-org/design-system/Breadcrumbs';
import { Home } from '@wallarm-org/design-system/icons';

#Examples

#Single item

One item is the current page and nothing more — which is the case where a breadcrumb has stopped earning its space.

#With icons

An icon inside an item, for a level whose type is worth showing as well as naming.

#With interactive items

Items that call a handler instead of following an href, for a trail wired to a router rather than to URLs.

#Icons only

Icons with no text. Each item needs its own aria-label, since the icon is then the only thing naming the level.

#With truncation

A long trail folded behind a BreadcrumbsEllipsis, which expands the middle on click. The first and current items always stay.

#Long breadcrumbs

What a trail of long labels actually does today: it runs on. Per-item truncation is drawn in Figma but not shipped, so keep labels short.

#Props

#BreadcrumbsEllipsis

#BreadcrumbsItem

#BreadcrumbsScopeSwitcher

#BreadcrumbsSeparator

#Explorer