* 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 component is a navigation pattern that shows the actual path of the current page.

Breadcrumb

Download

Github

CodeSandbox

import { Breadcrumb } from "@htmlplus/react";

const BreadcrumbCustomExpander = () => {
  return <>    
    <div className="center">      
      <Breadcrumb separator="-" max={2} expanderText="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>        
      </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 { Breadcrumb } from "@htmlplus/react";

const BreadcrumbCustomSeparator = () => {
  return <>    
    <div className="center">      
      <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>        
      </Breadcrumb>      
    </div>    
  </>;
};

export default BreadcrumbCustomSeparator;

Custom-Separator

import { Breadcrumb } from "@htmlplus/react";

const BreadcrumbCustomized = () => {
  return <>    
    <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>      
    </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 { Breadcrumb } from "@htmlplus/react";

const BreadcrumbDefault = () => {
  return <>    
    <div className="center">      
      <Breadcrumb separator="/">        
        <a href="#">          HTMLPLUS</a>        
        <a href="#">          Core</a>        
        <a href="#">          UI Components</a>        
        <span>          Breadcrumb</span>        
      </Breadcrumb>      
    </div>    
  </>;
};

export default BreadcrumbDefault;

Default

import { Breadcrumb } from "@htmlplus/react";

const BreadcrumbLimitation = () => {
  return <>    
    <div className="container">      
      <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>        
      </Breadcrumb>      
    </div>    
    <div className="container">      
      <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>        
      </Breadcrumb>      
    </div>    
    <div className="container">      
      <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>        
      </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 { Breadcrumb } from "@htmlplus/react";

const BreadcrumbSeparator = () => {
  return <>    
    <div className="center">      
      <Breadcrumb separator="-">        
        <a href="#">          First</a>        
        <a href="#">          Second</a>        
        <a href="#">          Third</a>        
        <a href="#">          Fourth</a>        
        <a href="#">          Fifth</a>        
      </Breadcrumb>      
    </div>    
  </>;
};

export default BreadcrumbSeparator;