Follow the tutorials here to use the HTMLPLUS
library on React-based
projects.
Select your desired component from below and see the available properties, slots, events, styles and methods.
Below is a collection of simple to complex examples.
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;
}
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;
}
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;
}
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;
}
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;
}
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;
}