For localization purposes, you can use the provided translations.

expanderText

The expander button is displayed when the number of the items reached the maximum limit. The offset property specifies the position of the expander button.

offset

Specifies Maximum items that is allowed to be displayed.

You can use HTML elements, Custom separator, or SVG icon.

separator

# Breadcrumb

Breadcrumb component is a navigation pattern that shows the actual path of the current page.
It represents the route using links, which enables the user to easily navigate upwards through
the hierarchy.

<Playground />

<Usage />

<Api />

<GlobalConfig />

<Examples />

### Default

<Example value={example["default"]} />

### Separator

<Example value={example["separator"]} />

### Custom Separator

<Example value={example["custom-separator"]} />

### Limitation

<Example value={example["limitation"]} />

### Custom Expander

<Example value={example["custom-expander"]} />

### Customized

<Example value={example["customized"]} />

<Checklist 
    accessibility={false}
    bidirectionality={false}
    cssParts={false}
    cssVariables={false}
    documentation={false}
    examples={false}
    events={false}
    keyboard={false}
    methods={false}
    playground={false}
    properties={false}
    skeleton={false}
    slots={false}
/>

<LastModified value="2022-11-20T14:23:23.363Z" />


Breadcrumb

Download

Github

CodeSandbox

import '@htmlplus/core/breadcrumb.js';
const BreadcrumbCustomExpander = () => {
  return (
    <div className="center">
      <plus-breadcrumb separator="-" max={2} expander-text="Show more">
        <svg slot="expander" viewBox="0 0 16 16">
          <path d="M6.776 1.553a.5.5 0 0 1 .671.223l3 6a.5.5 0 0 1 0 .448l-3 6a.5.5 0 1 1-.894-.448L9.44 8 6.553 2.224a.5.5 0 0 1 .223-.671z" />
        </svg>
        <a href="#">HTMLPLUS</a>
        <a href="#">Core</a>
        <a href="#">UI Components</a>
        <a href="#">Breadcrumb</a>
      </plus-breadcrumb>
    </div>
  );
};
export default BreadcrumbCustomExpander;


Script

.center {
  text-align: center;
}
plus-breadcrumb {
  display: inline-block;
  color: #707070;
}
plus-breadcrumb a {
  color: inherit;
  text-decoration: none;
}
plus-breadcrumb a:hover {
  text-decoration: underline;
}


Style

Custom Expander

import '@htmlplus/core/breadcrumb.js';
const BreadcrumbCustomSeparator = () => {
  return (
    <div className="center">
      <plus-breadcrumb>
        <svg slot="separator" viewBox="0 0 16 16">
          <path d="m12.14 8.753-5.482 4.796c-.646.566-1.658.106-1.658-.753V3.204a1 1 0 0 1 1.659-.753l5.48 4.796a1 1 0 0 1 0 1.506z" />
        </svg>
        <a href="#">First</a>
        <a href="#">Second</a>
        <a href="#">Third</a>
        <a href="#">Fourth</a>
        <a href="#">Fifth</a>
      </plus-breadcrumb>
    </div>
  );
};
export default BreadcrumbCustomSeparator;


Custom Separator

import '@htmlplus/core/breadcrumb.js';
const BreadcrumbCustomized = () => {
  return (
    <plus-breadcrumb max={2}>
      <svg slot="separator" viewBox="0 0 16 16">
        <path d="M6.776 1.553a.5.5 0 0 1 .671.223l3 6a.5.5 0 0 1 0 .448l-3 6a.5.5 0 1 1-.894-.448L9.44 8 6.553 2.224a.5.5 0 0 1 .223-.671z" />
      </svg>
      <a href="#">HTMLPLUS</a>
      <a href="#">Core</a>
      <a href="#">UI Components</a>
      <a href="#">Breadcrumb</a>
    </plus-breadcrumb>
  );
};
export default BreadcrumbCustomized;


plus-breadcrumb {
  --plus-breadcrumb-gutter-x: 0.75em;
  --plus-breadcrumb-gutter-y: 0.75em;
  background-color: #dcdcdc;
  border-radius: 0.25em;
  display: block;
  padding: 0.75em;
}
plus-breadcrumb a {
  text-decoration: none;
  color: black;
}
plus-breadcrumb::part(expander) {
  background-color: transparent;
  color: black;
  height: 1em;
  width: 1em;
}
plus-breadcrumb::part(separator) {
  color: black;
  height: 0.75em;
  width: 0.75em;
}


Customized

import '@htmlplus/core/breadcrumb.js';
const BreadcrumbDefault = () => {
  return (
    <div className="center">
      <plus-breadcrumb separator="/">
        <a href="#">HTMLPLUS</a>
        <a href="#">Core</a>
        <a href="#">UI Components</a>
        <span>Breadcrumb</span>
      </plus-breadcrumb>
    </div>
  );
};
export default BreadcrumbDefault;


Default

import '@htmlplus/core/breadcrumb.js';
const BreadcrumbLimitation = () => {
  return (
    <>
      <div className="container">
        <plus-breadcrumb separator="/" max={4} offset={0}>
          <a href="#">Item 1</a>
          <a href="#">Item 2</a>
          <a href="#">Item 3</a>
          <a href="#">Item 4</a>
          <a href="#">Item 5</a>
          <a href="#">Item 6</a>
          <a href="#">Item 7</a>
          <a href="#">Item 8</a>
        </plus-breadcrumb>
      </div>
      <div className="container">
        <plus-breadcrumb separator="/" max={4} offset={2}>
          <a href="#">Item 1</a>
          <a href="#">Item 2</a>
          <a href="#">Item 3</a>
          <a href="#">Item 4</a>
          <a href="#">Item 5</a>
          <a href="#">Item 6</a>
          <a href="#">Item 7</a>
          <a href="#">Item 8</a>
        </plus-breadcrumb>
      </div>
      <div className="container">
        <plus-breadcrumb separator="/" max={4} offset={-1}>
          <a href="#">Item 1</a>
          <a href="#">Item 2</a>
          <a href="#">Item 3</a>
          <a href="#">Item 4</a>
          <a href="#">Item 5</a>
          <a href="#">Item 6</a>
          <a href="#">Item 7</a>
          <a href="#">Item 8</a>
        </plus-breadcrumb>
      </div>
    </>
  );
};
export default BreadcrumbLimitation;


.container {
  text-align: center;
  margin: 0.75em;
}
plus-breadcrumb {
  display: inline-block;
  color: #707070;
}
plus-breadcrumb a {
  color: inherit;
  text-decoration: none;
}
plus-breadcrumb a:hover {
  text-decoration: underline;
}


Limitation

import '@htmlplus/core/breadcrumb.js';
const BreadcrumbSeparator = () => {
  return (
    <div className="center">
      <plus-breadcrumb separator="-">
        <a href="#">First</a>
        <a href="#">Second</a>
        <a href="#">Third</a>
        <a href="#">Fourth</a>
        <a href="#">Fifth</a>
      </plus-breadcrumb>
    </div>
  );
};
export default BreadcrumbSeparator;
