Breadcrumbs — Atelier

Demo

Live PreviewReact

html

<atl-breadcrumbs>
  <atl-breadcrumb-item href="/">Home</atl-breadcrumb-item>
  <atl-breadcrumb-item href="/components">Components</atl-breadcrumb-item>
  <atl-breadcrumb-item>Breadcrumbs</atl-breadcrumb-item>
</atl-breadcrumbs>

API (Angular)

Prop	Type	Default	Description
`separator`	`string`	`'/'`	Separator character between items

Composition parts

Breadcrumbs is composed from the parts below. Each part is its own component — drop the ones you don't need.

`AtlBreadcrumbItem`

One crumb. Omit href (or set current) on the final item; it renders as text and carries aria-current="page".

Prop	Type	Default	Description
`href`	`string`	`—`	Link destination. Omit for the current page.
`current`	`boolean`	`false`	Marks the item as the current page. Auto-detected when href is missing.

Import

import { AtlBreadcrumbs, AtlBreadcrumbItem } from '@atelier-ui/angular';

Explore in Storybook

Edit this page on GitHub