Breadcrumb
ready

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

Example

icon-storybook-default View Storybook
Loading

Code

HTML 

import { NbhdBreadcrumb } from '@fbin-web/neighborhood-core';
<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>

React 

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 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
surface surface none | primary | secondary | inverse | inverse-secondary primary Surface to apply to the component

Breadcrumb Content Structure

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.
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.

CSS Properties

Property Default Value
--nbhd-breadcrumb-host-display block
--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-base-space-0)
--nbhd-breadcrumb-paddingInline var(--nbhd-base-space-0)
--nbhd-breadcrumb-gap var(--nbhd-base-space-3)
--nbhd-breadcrumb-separator-small-fontSize 0.875rem

Dependencies

This component contains the following components as dependencies.