Breadcrumb

Ready

A navigation component that displays the current page's location in a hierarchical structure, allowing users to navigate back to parent pages.

Storybook docs

Preview

Open in Storybook

Code

Install

npm install @fbin-web/neighborhood-core

Import

import { NbhdBreadcrumb } from '@fbin-web/neighborhood-core';

Usage

<nbhd-breadcrumb separator="arrow"> </nbhd-breadcrumb>

<script>
  document.querySelector('nbhd-breadcrumb').items = [
    {
      label: 'Home',
      href: '/',
    },
    {
      label: 'Category',
      href: '/product',
    },
    {
      label: 'Subcategory',
      href: '/product/faucet',
    },
    {
      label: 'Product',
      href: '/product/faucet/0001',
    },
  ];
</script>

Install

npm install @fbin-web/neighborhood-react

Import

import { NbhdBreadcrumb } from '@fbin-web/neighborhood-react';

Usage

import { NbhdBreadcrumb } from '@fbin-web/neighborhood-react';

const items = [
  {
    label: 'Home',
    href: '/',
  },
  {
    label: 'Category',
    href: '/product',
  },
  {
    label: 'Subcategory',
    href: '/product/faucet',
  },
  {
    label: 'Product',
    href: '/product/faucet/0001',
  },
];

const App = () => (
  <>
    <NbhdBreadcrumb
      separator="arrow"
      items={items}
    />
  </>
);

Properties

Property	Attribute	Type	Default	Description
`items`	`items`	`BreadcrumbContent[]`	—	An array of objects with the following properties: label (for the text), href (for the link)
`label`	`label`	`string`	`Breadcrumb`	Accessible name of the breadcrumb navigation landmark.
`cssClass`	`css-class`	`string`	—	Additional CSS class to apply to the component
`separator`	`separator`	`slasharrownone`	`slash`	Type of separator to display between breadcrumb items
`marginTop`	`margin-top`	`nonesmallmediumlarge`	`none`	Top margin spacing
`marginBottom`	`margin-bottom`	`nonesmallmediumlarge`	`none`	Bottom margin spacing
`paddingTop`	`padding-top`	`defaultnonesmallmediumlarge`	`default`	Top padding spacing
`paddingBottom`	`padding-bottom`	`defaultnonesmallmediumlarge`	`default`	Bottom padding spacing
`surface`	`surface`	`noneprimarysecondaryinverseinverse-secondary`	`primary`	Surface to apply to the component

The BreadcrumbContent 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 link is clicked.	`{ from: "breadcrumb", label: string, href?: string, originalEvent: Event }`

CSS Parts

Name	Description
`base`	The root nav element containing the breadcrumb items.
`list`	The list of breadcrumb items.
`item`	Each , holding an item and its separator. The last item has aria-current="page".
`separator`	The separator slot element rendered between breadcrumb items when the separator is not set to none.
`link`	The nbhd-link elements rendered for breadcrumb items with an href.
`text`	The nbhd-text elements rendered for breadcrumb items without an href.

nbhd-breadcrumb::part(base) {
  /* your styles */
}

CSS Properties

Set these on nbhd-breadcrumb or an ancestor to override the defaults. Token is the design token a default comes from and Value is what it resolves to in core Neighborhood; brands may override them. Properties that adapt to surface follow the light or inverse surface they sit on until you set them.

Property	Token	Value
`--nbhd-breadcrumb-alignItems`	—	`center`
`--nbhd-breadcrumb-display`	—	`flex`
`--nbhd-breadcrumb-flexDirection`	—	`row`
`--nbhd-breadcrumb-flexWrap`	—	`wrap`
`--nbhd-breadcrumb-gap`	`--nbhd-space-3`	`12px`
`--nbhd-breadcrumb-host-display`	—	`block`
`--nbhd-breadcrumb-inlineSize`	—	`100%`
`--nbhd-breadcrumb-paddingBlock`	`--nbhd-space-0`	`0px`
`--nbhd-breadcrumb-paddingInline`	`--nbhd-space-0`	`0px`
`--nbhd-breadcrumb-separator-small-fontSize`	`--nbhd-typography-bodySmall-fontSize`	`0.875rem`

Dependencies

Child components <nbhd-breadcrumb> renders internally. Import them too when you tree-shake.

TextReady <nbhd-text> LinkReady <nbhd-link>

Used by

AutosuggestReady <nbhd-autosuggest>