Navigation
Breadcrumb
A trail of links that shows where the current page sits in a hierarchy.
| Class name | Type | Description |
|---|---|---|
breadcrumbsplf:breadcrumbs | Component | A trail on a native list |
Default
Keep role="list", since WebKit drops list semantics without markers, and mark exactly one current page with aria-current="page" and no href.
<nav class="breadcrumbs" aria-label="Breadcrumb">
<ol role="list">
<li><a href="#">Home</a></li>
<li><a href="#">Library</a></li>
<li><span aria-current="page">Data</span></li>
</ol>
</nav><nav class="plf:breadcrumbs" aria-label="Breadcrumb">
<ol role="list">
<li><a href="#">Home</a></li>
<li><a href="#">Library</a></li>
<li><span aria-current="page">Data</span></li>
</ol>
</nav>import { Breadcrumb, BreadcrumbItem, BreadcrumbPage } from '@pelatform/react';
export function Example() {
return (
<Breadcrumb>
<BreadcrumbItem><a href="#">Home</a></BreadcrumbItem>
<BreadcrumbItem><a href="#">Library</a></BreadcrumbItem>
<BreadcrumbItem><BreadcrumbPage>Data</BreadcrumbPage></BreadcrumbItem>
</Breadcrumb>
);
}import { Breadcrumb, BreadcrumbItem, BreadcrumbPage } from '@pelatform/react/prefixed';
export function Example() {
return (
<Breadcrumb>
<BreadcrumbItem><a href="#">Home</a></BreadcrumbItem>
<BreadcrumbItem><a href="#">Library</a></BreadcrumbItem>
<BreadcrumbItem><BreadcrumbPage>Data</BreadcrumbPage></BreadcrumbItem>
</Breadcrumb>
);
}<nav class="breadcrumbs" aria-label="Breadcrumb with icons">
<ol role="list">
<li><a href="#"><span class="icon icon-home"></span>Home</a></li>
<li><a href="#"><span class="icon icon-folder"></span>Library</a></li>
<li><span aria-current="page">Data</span></li>
</ol>
</nav><nav class="plf:breadcrumbs" aria-label="Breadcrumb with icons">
<ol role="list">
<li><a href="#"><span class="plf:icon plf:icon-home"></span>Home</a></li>
<li><a href="#"><span class="plf:icon plf:icon-folder"></span>Library</a></li>
<li><span aria-current="page">Data</span></li>
</ol>
</nav>import { Breadcrumb, BreadcrumbItem, BreadcrumbPage, Icon } from '@pelatform/react';
export function Example() {
return (
<Breadcrumb aria-label="Breadcrumb with icons">
<BreadcrumbItem>
<a href="#">
<Icon name="home" />
Home
</a>
</BreadcrumbItem>
<BreadcrumbItem>
<a href="#">
<Icon name="folder" />
Library
</a>
</BreadcrumbItem>
<BreadcrumbItem><BreadcrumbPage>Data</BreadcrumbPage></BreadcrumbItem>
</Breadcrumb>
);
}import { Breadcrumb, BreadcrumbItem, BreadcrumbPage, Icon } from '@pelatform/react/prefixed';
export function Example() {
return (
<Breadcrumb aria-label="Breadcrumb with icons">
<BreadcrumbItem>
<a href="#">
<Icon name="home" />
Home
</a>
</BreadcrumbItem>
<BreadcrumbItem>
<a href="#">
<Icon name="folder" />
Library
</a>
</BreadcrumbItem>
<BreadcrumbItem><BreadcrumbPage>Data</BreadcrumbPage></BreadcrumbItem>
</Breadcrumb>
);
}React
Breadcrumb from @pelatform/react renders the nav and its list around its items, each holding your link, any router’s, or the current page.
| Prop | Values | Default |
|---|---|---|
aria-label |
The trail’s name | Breadcrumb |
The parts:
| Part | Element |
|---|---|
BreadcrumbItem |
An li |
BreadcrumbPage |
A span with aria-current="page", the current page |
Other props are the element’s own, className and ref included.
CSS variables
Override on a root or on a single breadcrumb.
| Variable | Default |
|---|---|
--plf-breadcrumb-color |
Muted text, for links and chevrons |
--plf-breadcrumb-hover-color |
Text color |
--plf-breadcrumb-current-color |
Text color |
--plf-breadcrumb-separator-color |
--plf-breadcrumb-color, for chevrons |
--plf-breadcrumb-font-size |
Control font size (14px) |
--plf-breadcrumb-gap |
Space 2 (8px), between items and around chevrons |
--plf-breadcrumb-icon-size |
Control icon size (16px) |
--plf-breadcrumb-separator-size |
0. (14px), for chevrons |