The Breadcrumb component provides a navigational aid that displays the user’s current location within the site hierarchy and allows them to easily navigate back to previous levels. It’s typically placed horizontally before the page title or main content.

Anatomy

Usage

Basic Example

Create a breadcrumb trail by nesting plus-breadcrumb-item components within the plus-breadcrumb. The last item is automatically considered the current page.

HomeCategoryCurrent Page

Show code

React

import { PlusBreadcrumb, PlusBreadcrumbItem } from '@plusui/react';

export default () => {
  return (
    <>
      <PlusBreadcrumb>
        <PlusBreadcrumbItem href="#">
          Home
        </PlusBreadcrumbItem>
        <PlusBreadcrumbItem href="#">
          Category
        </PlusBreadcrumbItem>
        <PlusBreadcrumbItem>
          Current Page
        </PlusBreadcrumbItem>
      </PlusBreadcrumb>
    </>
  );
};

Angular

import { Component } from '@angular/core';

@Component({
  selector: 'app-example',
  template: `
    <plus-breadcrumb>
      <plus-breadcrumb-item href="#">
        Home
      </plus-breadcrumb-item>
      <plus-breadcrumb-item href="#">
        Category
      </plus-breadcrumb-item>
      <plus-breadcrumb-item>
        Current Page
      </plus-breadcrumb-item>
    </plus-breadcrumb>
  `
})
export class ExampleComponent {}

Vue

<template>
  <plus-breadcrumb>
    <plus-breadcrumb-item href="#">
      Home
    </plus-breadcrumb-item>
    <plus-breadcrumb-item href="#">
      Category
    </plus-breadcrumb-item>
    <plus-breadcrumb-item>
      Current Page
    </plus-breadcrumb-item>
  </plus-breadcrumb>
</template>

Svelte

<plus-breadcrumb>
  <plus-breadcrumb-item href="#">
    Home
  </plus-breadcrumb-item>
  <plus-breadcrumb-item href="#">
    Category
  </plus-breadcrumb-item>
  <plus-breadcrumb-item>
    Current Page
  </plus-breadcrumb-item>
</plus-breadcrumb>

HTML

<plus-breadcrumb>
  <plus-breadcrumb-item href="#">
    Home
  </plus-breadcrumb-item>
  <plus-breadcrumb-item href="#">
    Category
  </plus-breadcrumb-item>
  <plus-breadcrumb-item>
    Current Page
  </plus-breadcrumb-item>
</plus-breadcrumb>

Separator Style

Use the separator property to change the visual separator between items. Allowed values are 'arrow' (default) and 'slash'.

HomeProductsGadgetsHomeProductsGadgets

Show code

React

import { PlusBreadcrumb, PlusBreadcrumbItem } from '@plusui/react';

export default () => {
  return (
    <>
      <PlusBreadcrumb separator="arrow">
        <PlusBreadcrumbItem href="#">
          Home
        </PlusBreadcrumbItem>
        <PlusBreadcrumbItem href="#">
          Products
        </PlusBreadcrumbItem>
        <PlusBreadcrumbItem>
          Gadgets
        </PlusBreadcrumbItem>
      </PlusBreadcrumb>
      <PlusBreadcrumb separator="slash">
        <PlusBreadcrumbItem href="#">
          Home
        </PlusBreadcrumbItem>
        <PlusBreadcrumbItem href="#">
          Products
        </PlusBreadcrumbItem>
        <PlusBreadcrumbItem>
          Gadgets
        </PlusBreadcrumbItem>
      </PlusBreadcrumb>
    </>
  );
};

Angular

import { Component } from '@angular/core';

@Component({
  selector: 'app-example',
  template: `
    <plus-breadcrumb separator="arrow">
      <plus-breadcrumb-item href="#">
        Home
      </plus-breadcrumb-item>
      <plus-breadcrumb-item href="#">
        Products
      </plus-breadcrumb-item>
      <plus-breadcrumb-item>
        Gadgets
      </plus-breadcrumb-item>
    </plus-breadcrumb>
    <plus-breadcrumb separator="slash">
      <plus-breadcrumb-item href="#">
        Home
      </plus-breadcrumb-item>
      <plus-breadcrumb-item href="#">
        Products
      </plus-breadcrumb-item>
      <plus-breadcrumb-item>
        Gadgets
      </plus-breadcrumb-item>
    </plus-breadcrumb>
  `
})
export class ExampleComponent {}

Vue

<template>
  <plus-breadcrumb separator="arrow">
    <plus-breadcrumb-item href="#">
      Home
    </plus-breadcrumb-item>
    <plus-breadcrumb-item href="#">
      Products
    </plus-breadcrumb-item>
    <plus-breadcrumb-item>
      Gadgets
    </plus-breadcrumb-item>
  </plus-breadcrumb>
  <plus-breadcrumb separator="slash">
    <plus-breadcrumb-item href="#">
      Home
    </plus-breadcrumb-item>
    <plus-breadcrumb-item href="#">
      Products
    </plus-breadcrumb-item>
    <plus-breadcrumb-item>
      Gadgets
    </plus-breadcrumb-item>
  </plus-breadcrumb>
</template>

Svelte

<plus-breadcrumb separator="arrow">
  <plus-breadcrumb-item href="#">
    Home
  </plus-breadcrumb-item>
  <plus-breadcrumb-item href="#">
    Products
  </plus-breadcrumb-item>
  <plus-breadcrumb-item>
    Gadgets
  </plus-breadcrumb-item>
</plus-breadcrumb>
<plus-breadcrumb separator="slash">
  <plus-breadcrumb-item href="#">
    Home
  </plus-breadcrumb-item>
  <plus-breadcrumb-item href="#">
    Products
  </plus-breadcrumb-item>
  <plus-breadcrumb-item>
    Gadgets
  </plus-breadcrumb-item>
</plus-breadcrumb>

HTML

<plus-breadcrumb separator="arrow">
  <plus-breadcrumb-item href="#">
    Home
  </plus-breadcrumb-item>
  <plus-breadcrumb-item href="#">
    Products
  </plus-breadcrumb-item>
  <plus-breadcrumb-item>
    Gadgets
  </plus-breadcrumb-item>
</plus-breadcrumb>
<plus-breadcrumb separator="slash">
  <plus-breadcrumb-item href="#">
    Home
  </plus-breadcrumb-item>
  <plus-breadcrumb-item href="#">
    Products
  </plus-breadcrumb-item>
  <plus-breadcrumb-item>
    Gadgets
  </plus-breadcrumb-item>
</plus-breadcrumb>

Visual Sections

Layout & Spacing

Light & Dark Mode

Accessibility (a11y)

• Keyboard Behavior:
  • Users can navigate through the breadcrumb links using the Tab key.
  • Each link can be activated using Enter or Space.
• Screen Reader:
  • The component is wrapped in a <nav> element with aria-label="breadcrumb" to identify it as a navigation landmark.
  • The current page item (the last item without an href) includes aria-current="page" to indicate its status.
  • Separators are hidden from screen readers using aria-hidden="true".
• Required Developer Actions:
  • Ensure that href attributes are provided for all navigable plus-breadcrumb-item elements.
  • Provide meaningful text content for each plus-breadcrumb-item.

API Reference

<plus-breadcrumb> Properties

Name	Type	Default	Description	Required
label	string	'breadcrumb'	The aria-label for the underlying <nav> element. Override for internationalization or specific context.	No
separator	'arrow' | 'slash'	'arrow'	Defines the visual separator between items.	No

<plus-breadcrumb> Slots

Name	Description
(default)	Container for plus-breadcrumb-item elements.

<plus-breadcrumb-item> Properties

Name	Type	Default	Description	Required
href	string	undefined	The URL to navigate to when the item is clicked. If omitted, the item is treated as the current page (non-interactive).	No (Required for links)

<plus-breadcrumb-item> Slots

Name	Description
(default)	The text content of the breadcrumb item.

<plus-breadcrumb> CSS Shadow Parts

Part	Description
base	The main container (<nav>) element.
list	The list (<ol>) wrapping the items.
separator	The separator element displayed between items.

<plus-breadcrumb-item> CSS Shadow Parts

Part	Description
base	The list item (<li>) element.
link	The anchor (<a>) element (if href exists).
text	The non-interactive text span (if no href).

<plus-breadcrumb> CSS Custom Properties

Name	Description
--separator-color	Color of the default separator.
--gap	Space between items and separators.

<plus-breadcrumb-item> CSS Custom Properties

Name	Description
--color	Text color of the item.
--color-hover	Text color on hover (links only).
--text-decoration	Text decoration (links only).
--text-decoration-hover	Text decoration on hover (links only).
--color-current	Text color of the current item (last item without href).
--text-decoration-current	Text decoration of the current item.

Join the Community

Plus UI is built by the community. Join us on our platforms to contribute, get help, and stay up to date.

Figma GitHub Discord Twitter Open Collective