Breadcrumb
ready
A navigation component that displays the current page's location in a hierarchical structure, allowing users to navigate back to parent pages.
Loading
Code
HTML
import { NbhdBreadcrumb } from '@fbin-web/neighborhood-core';<nbhd-breadcrumb separator="arrow">
</nbhd-breadcrumb>React
import { NbhdBreadcrumb } from '@fbin-web/neighborhood-react';
const App = () => (
<>
<NbhdBreadcrumb separator="arrow"></NbhdBreadcrumb>
</>
);Properties
| Property | Attribute | Type | Default | Description |
|---|---|---|---|---|
items
|
items
|
BreadcrumbData[]
|
An array of objects with the following properties: label (for the text), href (for the link) | |
label
|
label
|
string
|
Accessible label for the navigation element | |
cssClass
|
css-class
|
string
|
Additional CSS class to apply to the component | |
separator
|
separator
|
slash | arrow | none
|
slash
|
Type of separator to display between breadcrumb items |
marginTop
|
margin-top
|
none | small | medium | large
|
none
|
Top margin spacing |
marginBottom
|
margin-bottom
|
none | small | medium | large
|
none
|
Bottom margin spacing |
paddingTop
|
padding-top
|
default | none | small | medium | large
|
default
|
Top padding spacing |
paddingBottom
|
padding-bottom
|
default | none | small | medium | large
|
default
|
Bottom padding spacing |
background
|
background
|
none | primary-light | secondary-light | primary-dark | secondary-dark
|
none
|
Background to apply to the component |
Breadcrumb Data Structure
The BreadcrumbData interface defines the structure for individual breadcrumb items.
| Property | Type | Required | Description |
|---|---|---|---|
label
|
string
|
Yes | The display text for the breadcrumb item. |
href
|
string
|
No | The URL the breadcrumb item should link to. If omitted, the item will be rendered as plain text. |
Events
Events emitted by the breadcrumb component.
| Name | Description | Event Detail |
|---|---|---|
nbhd-breadcrumb-click
|
Fired when a breadcrumb item with an href is clicked. | { from: string, label: string, href?: string, originalEvent: Event } |
CSS Parts
| Name | Description |
|---|---|
base
|
The component's base wrapper. |
separator
|
The separator slot element between breadcrumb items. |
link
|
The link elements for breadcrumb items with href. |
text
|
The text elements for breadcrumb items without href. |
CSS Properties
| Property | Default Value |
|---|---|
--nbhd-breadcrumb-alignItems
|
center |
--nbhd-breadcrumb-display
|
flex |
--nbhd-breadcrumb-flexDirection
|
row |
--nbhd-breadcrumb-flexWrap
|
wrap |
--nbhd-breadcrumb-inlineSize
|
100% |
--nbhd-breadcrumb-paddingBlock
|
var(--nbhd-space-0) |
--nbhd-breadcrumb-paddingInline
|
var(--nbhd-space-0) |
--nbhd-breadcrumb-gap
|
var(--nbhd-space-3) |
--nbhd-breadcrumbSeparator-color
|
inherit |
--nbhd-breadcrumbSeparator-arrow-fontSize
|
var(--nbhd-fontSize-xs) |
--nbhd-breadcrumbItem-color
|
inherit |
--nbhd-breadcrumbItem-fontSize
|
inherit |
--nbhd-breadcrumbItem-color-dark
|
var(--nbhd-color-white) |