Hudoro breadcrumb

Hudoro breadcrumb is a strict and customizable breadcrumb component for web development projects, designed for simplicity and adherence to strict design guidelines.

Screenshots

Package instalation

Instal package using pnpm

  pnpm add @hudoro/breadcrumb

Instal package using yarn

  yarn add @hudoro/breadcrumb

Instal package using npm

  npm i @hudoro/breadcrumb

Usage/Examples (you can combine using icon package hudoro)

import React from "react";
import {Breadcrumb, BreadcrumbItem, BreadcrumbLink} from "@hudoro/breadcrumb";
import ReactDOM from "react-dom/client";

const App = () => (
  <div>
    <h1>Breadcrumb Component</h1>
    <Breadcrumb separator=">" size="sm">
      <BreadcrumbItem>
        <BreadcrumbLink href="/">
          <svg
            xmlns="http://www.w3.org/2000/svg"
            width="18"
            height="20"
            viewBox="0 0 18 20"
            fill="none"
          >
            <path
              d="M6.63102 17.3095V14.7539C6.63101 14.1039 7.16094 13.5757 7.81752 13.5713H10.2226C10.8823 13.5713 11.4171 14.1008 11.4171 14.7539V14.7539V17.3174C11.4169 17.8693 11.8619 18.3204 12.4192 18.3333H14.0226C15.6209 18.3333 16.9167 17.0506 16.9167 15.4682V15.4682V8.19819C16.9081 7.57568 16.6129 6.99111 16.115 6.61085L10.6314 2.23774C9.67079 1.4763 8.30518 1.4763 7.34452 2.23774L1.88503 6.61879C1.38523 6.99751 1.0895 7.58305 1.08334 8.20612V15.4682C1.08334 17.0506 2.37907 18.3333 3.97744 18.3333H5.58081C6.15197 18.3333 6.61499 17.8749 6.61499 17.3095V17.3095"
              stroke="currentColor"
              stroke-width="1.5"
              stroke-linecap="round"
              stroke-linejoin="round"
            />
          </svg>
        </BreadcrumbLink>
      </BreadcrumbItem>
      <BreadcrumbItem>
        <BreadcrumbLink href="/dani-ganteng">Library</BreadcrumbLink>
      </BreadcrumbItem>
      <BreadcrumbItem currentPage>
        <BreadcrumbLink href="/">Home</BreadcrumbLink>
      </BreadcrumbItem>
    </Breadcrumb>
  </div>
);

ReactDOM.createRoot(document.getElementById("app")!).render(<App />);

Props @hudoro/accordion

Props that you can pass to <Breadcrumb {...props}>

| Prop Name | Value | required | | :-------- | :--------------------------------------------- | :------- | | size | "sm" / "md" | false | | separator | "*" / "/" / ">" / "/" / "#" / "~" / "%" / "@" | false | | children | ReactNode | true |

Props that you can pass to <BreadcrumbItem {...props}>

| Prop Name | Value | required | | :---------- | :-------- | :------- | | currentPage | boolean | false | | children | ReactNode | true |

Props that you can pass to <BreadcrumbLink {...props}> ( you can add any props anchor element)

| Prop Name | Value | required | | :-------- | :-------- | :------- | | children | ReactNode | true |