Breadcrumbs
This is a guideline for you on how to create you first product in your store
Default
Active
disabled
React js
import * as React from 'react';
import BreadCrumbs from 'vestarplus/BreadCrumbs';
export default function BreadCrumbs() {
const breadcrumbsPaths = [
{
icon: (
<svg
xmlns="http://www.w3.org/2000/svg"
width="20"
height="20"
viewBox="0 0 20 20"
fill="none"
>
<path
d="M1.875 9.99986L9.33709 2.53777C9.7032 2.17165 10.2968 2.17165 10.6629 2.53777L18.125 9.99986M3.75 8.12486V16.5624C3.75 17.0801 4.16973 17.4999 4.6875 17.4999H8.125V13.4374C8.125 12.9196 8.54473 12.4999 9.0625 12.4999H10.9375C11.4553 12.4999 11.875 12.9196 11.875 13.4374V17.4999H15.3125C15.8303 17.4999 16.25 17.0801 16.25 16.5624V8.12486M6.875 17.4999H13.75"
stroke-width="1.5"
stroke-linecap="round"
stroke-linejoin="round"
/>
</svg>
),
label: 'Home',
href: '/breadcrumbs',
},
{
icon: (
<svg
xmlns="http://www.w3.org/2000/svg"
width="24"
height="20"
viewBox="0 0 20 20"
fill="none"
>
<path
stroke-linecap="round"
stroke-linejoin="round"
d="M20.25 8.511c.884.284 1.5 1.128 1.5 2.097v4.286c0 1.136-.847 2.1-1.98 2.193-.34.027-.68.052-1.02.072v3.091l-3-3c-1.354 0-2.694-.055-4.02-.163a2.115 2.115 0 0 1-.825-.242m9.345-8.334a2.126 2.126 0 0 0-.476-.095 48.64 48.64 0 0 0-8.048 0c-1.131.094-1.976 1.057-1.976 2.192v4.286c0 .837.46 1.58 1.155 1.951m9.345-8.334V6.637c0-1.621-1.152-3.026-2.76-3.235A48.455 48.455 0 0 0 11.25 3c-2.115 0-4.198.137-6.24.402-1.608.209-2.76 1.614-2.76 3.235v6.226c0 1.621 1.152 3.026 2.76 3.235.577.075 1.157.14 1.74.194V21l4.155-4.155"
/>
</svg>
),
label: 'Category',
href: '/category',
},
{ label: 'Current Page', href: '/tables' },
];
return (
<BreadCrumbs paths={breadcrumbsPaths} />
<BreadCrumbs paths={breadcrumbsPaths} disabled />
);
}
HTMLCSSJS
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link rel="stylesheet" href="./index.css">
<title>Breadcrumbs Example</title>
</head>
<body>
<div id="breadcrumbs-container"></div>
</body>
</html>