What's HTMLPLUS?Why HTMLPLUS?UI Components
HTMLPLUS

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.

Usage

Follow the tutorials here  to use the HTMLPLUS library on React-based  projects.

API

PlusBreadcrumb

Select your desired component from below and see the available properties, slots, events, styles and methods.

Properties
Slots
Events
CSS Variables
CSS Parts
Methods
Name
expanderText
Type
stringstring
Default
'Show path'
For localization purposes, you can use the provided translations.
Name
max
Type
numbernumber
Default
undefined
Specifies Maximum items that is allowed to be displayed.
Name
offset
Type
numbernumber
Default
1
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.
Name
separator
Type
stringstring
Default
undefined
You can use HTML elements, Custom separator, or SVG icon.
Name
default
The default slot.
Name
expander
The expander slot.
Name
separator
The separator slot.
Name
--plus-breadcrumb-gutter-x
Used to adjust the Horizontal gap.
Name
expander
Expander element.
Name
item
Item element.
Name
separator
Separator element.

Examples

Below is a collection of simple to complex examples.

Default

PreviewScriptStylesandboxEdit on CodeSandbox
import React from "react";
import { Breadcrumb } from "@htmlplus/react";

const App = () => {
  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 App;
.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;
}

Separator

PreviewScriptStylesandboxEdit on CodeSandbox
import React from "react";
import { Breadcrumb } from "@htmlplus/react";

const App = () => {
  return <>    
    <div className="container">      
      <Breadcrumb separator="\">        
        <a href="#">          First</a>        
        <a href="#">          Second</a>        
        <a href="#">          Third</a>        
        <a href="#">          Fourth</a>        
        <a href="#">          Fifth</a>        
      </Breadcrumb>      
    </div>    
    <div className="container">      
      <Breadcrumb separator="-">        
        <a href="#">          First</a>        
        <a href="#">          Second</a>        
        <a href="#">          Third</a>        
        <a href="#">          Fourth</a>        
        <a href="#">          Fifth</a>        
      </Breadcrumb>      
    </div>    
    <div className="container">      
      <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 App;
.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;
}

Custom Separator

PreviewScriptStylesandboxEdit on CodeSandbox
import React from "react";
import { Breadcrumb } from "@htmlplus/react";

const App = () => {
  return <>    
    <div className="container">      
      <Breadcrumb>        
        <svg slot="separator" viewBox="0 0 16 16"><path d="M4 8a.5.5 0 0 1 .5-.5h7a.5.5 0 0 1 0 1h-7A.5.5 0 0 1 4 8z" /></svg>        
        <a href="#">          First</a>        
        <a href="#">          Second</a>        
        <a href="#">          Third</a>        
        <a href="#">          Fourth</a>        
        <a href="#">          Fifth</a>        
      </Breadcrumb>      
    </div>    
    <div className="container">      
      <Breadcrumb>        
        <svg slot="separator" viewBox="0 0 16 16"><path fillRule="evenodd" 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="#">          First</a>        
        <a href="#">          Second</a>        
        <a href="#">          Third</a>        
        <a href="#">          Fourth</a>        
        <a href="#">          Fifth</a>        
      </Breadcrumb>      
    </div>    
    <div className="container">      
      <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 App;
.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

PreviewScriptStylesandboxEdit on CodeSandbox
import React from "react";
import { Breadcrumb } from "@htmlplus/react";

const App = () => {
  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 App;
.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;
}

Custom Expander

PreviewScriptStylesandboxEdit on CodeSandbox
import React from "react";
import { Breadcrumb } from "@htmlplus/react";

const App = () => {
  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 App;
.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;
}

Customized

PreviewScriptStylesandboxEdit on CodeSandbox
import React from "react";
import { Breadcrumb } from "@htmlplus/react";

const App = () => {
  return <>    
    <Breadcrumb className="first" 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>    
    <br />    
    <Breadcrumb className="second" 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 App;
/* first breadcrumb */
plus-breadcrumb {
  padding: 0.75em;
  border-radius: 0.25em;
}
plus-breadcrumb.first a {
  text-decoration: none;
  color: white;
}
plus-breadcrumb.first {
  --plus-breadcrumb-gutter-x: 0.75em;
  --plus-breadcrumb-gutter-y: 0.75em;
  background-color: #2B78AC;
}
plus-breadcrumb.first::part(expander) {
  background-color: transparent;
  color: white;
  height: 1em;
  width: 1em;
}
plus-breadcrumb.first::part(separator) {
  color: white;
  height: 0.75em;
  width: 0.75em;
}

/* second breadcrumb */
plus-breadcrumb.second {
  --plus-breadcrumb-gutter-x: 0.75em;
  --plus-breadcrumb-gutter-y: 0.75em;
  background-color: #DCDCDC;
}
plus-breadcrumb.second a {
  text-decoration: none;
  color: black;
}
plus-breadcrumb.second::part(expander) {
  background-color: transparent;
  color: black;
  height: 1em;
  width: 1em;
}
plus-breadcrumb.second::part(separator) {
  color: black;
  height: 0.75em;
  width: 0.75em;
}
Contributors
Prev
Aspect Ratio
Next
Card
SELECT YOUR FRAMEWORK
React logo
React
© 2020 HTMLPLUS. Released under MIT License.