Breadcrumb

<bh-breadcrumb> | BharatBreadcrumb

Breadcrumb component provides a navigation aid that helps users understand their location within a website or application.

Open in

Basic Usage

Preview

Open in

HTML

<bh-breadcrumb>
  <bh-breadcrumb-item label="Home" path="/"></bh-breadcrumb-item>
  <bh-breadcrumb-item label="Products" path="/products"></bh-breadcrumb-item>
  <bh-breadcrumb-item label="Electronics" active></bh-breadcrumb-item>
</bh-breadcrumb>

React

import React from 'react';
import { BharatBreadcrumb, BharatBreadcrumbItem } from 'bharat-ui/react/components/breadcrumb';

function App() {
  return (
    <BharatBreadcrumb>
      <BharatBreadcrumbItem label="Home" path="/" />
      <BharatBreadcrumbItem label="Products" path="/products" />
      <BharatBreadcrumbItem label="Electronics" active />
    </BharatBreadcrumb>
  );
}

export default App;

Separators

Use the variant or separator attribute to change the separator style.

Preview

Open in

Default (Slash)

Chevron

Arrow

Dot

Custom

HTML

<!-- Default (Slash) -->
<bh-breadcrumb>
  <bh-breadcrumb-item label="Home" path="/"></bh-breadcrumb-item>
  <bh-breadcrumb-item label="Products" path="/products"></bh-breadcrumb-item>
  <bh-breadcrumb-item label="Electronics" active></bh-breadcrumb-item>
</bh-breadcrumb>

<!-- Chevron -->
<bh-breadcrumb variant="chevron">
  <bh-breadcrumb-item label="Home" path="/"></bh-breadcrumb-item>
  <bh-breadcrumb-item label="Products" path="/products"></bh-breadcrumb-item>
  <bh-breadcrumb-item label="Electronics" active></bh-breadcrumb-item>
</bh-breadcrumb>

<!-- Arrow -->
<bh-breadcrumb variant="arrow">
  <bh-breadcrumb-item label="Home" path="/"></bh-breadcrumb-item>
  <bh-breadcrumb-item label="Products" path="/products"></bh-breadcrumb-item>
  <bh-breadcrumb-item label="Electronics" active></bh-breadcrumb-item>
</bh-breadcrumb>

<!-- Dot -->
<bh-breadcrumb variant="dot">
  <bh-breadcrumb-item label="Home" path="/"></bh-breadcrumb-item>
  <bh-breadcrumb-item label="Products" path="/products"></bh-breadcrumb-item>
  <bh-breadcrumb-item label="Electronics" active></bh-breadcrumb-item>
</bh-breadcrumb>

<!-- Custom -->
<bh-breadcrumb separator="|">
  <bh-breadcrumb-item label="Home" path="/"></bh-breadcrumb-item>
  <bh-breadcrumb-item label="Products" path="/products"></bh-breadcrumb-item>
  <bh-breadcrumb-item label="Electronics" active></bh-breadcrumb-item>
</bh-breadcrumb>

React

import React from 'react';
import { BharatBreadcrumb, BharatBreadcrumbItem } from 'bharat-ui/react/components/breadcrumb';

function App() {
  return (
    <>
      {/* Default (Slash) */}
      <BharatBreadcrumb>
        <BharatBreadcrumbItem label="Home" path="/" />
        <BharatBreadcrumbItem label="Products" path="/products" />
        <BharatBreadcrumbItem label="Electronics" active />
      </BharatBreadcrumb>

      {/* Chevron */}
      <BharatBreadcrumb variant="chevron">
        <BharatBreadcrumbItem label="Home" path="/" />
        <BharatBreadcrumbItem label="Products" path="/products" />
        <BharatBreadcrumbItem label="Electronics" active />
      </BharatBreadcrumb>

      {/* Arrow */}
      <BharatBreadcrumb variant="arrow">
        <BharatBreadcrumbItem label="Home" path="/" />
        <BharatBreadcrumbItem label="Products" path="/products" />
        <BharatBreadcrumbItem label="Electronics" active />
      </BharatBreadcrumb>

      {/* Dot */}
      <BharatBreadcrumb variant="dot">
        <BharatBreadcrumbItem label="Home" path="/" />
        <BharatBreadcrumbItem label="Products" path="/products" />
        <BharatBreadcrumbItem label="Electronics" active />
      </BharatBreadcrumb>

      {/* Custom */}
      <BharatBreadcrumb separator="|">
        <BharatBreadcrumbItem label="Home" path="/" />
        <BharatBreadcrumbItem label="Products" path="/products" />
        <BharatBreadcrumbItem label="Electronics" active />
      </BharatBreadcrumb>
    </>
  );
}

export default App;

Auto-Generated Breadcrumbs

Use the autoGenerate property to automatically generate breadcrumbs from the current path.

Preview

Open in

HTML

<bh-breadcrumb
  autoGenerate
  currentPath="/Products/Electronics/Smartphones"
 >
</bh-breadcrumb>

React

import React from 'react';
import { BharatBreadcrumb } from 'bharat-ui/react/components/breadcrumb';

function App() {
  return (
    <BharatBreadcrumb
      autoGenerate
      currentPath="/Products/Electronics/Smartphones"
    />
  );
}

export default App;

Breadcrumb Properties

Property	Type	Description
separator	string	The separator character between breadcrumb items
variant	string	Predefined separator styles (chevron, arrow, dot, slash)
fontSize	string	Font size for breadcrumb items
fontWeight	string	Font weight for breadcrumb items
maxWidth	string	Maximum width of the breadcrumb container
theme	string	Theme variant for the breadcrumb
homeIcon	string	Icon to use for the home item
withBackground	boolean	Whether to show a background behind the breadcrumb
rtl	boolean	Right-to-left text direction
animated	boolean	Whether to animate breadcrumb items
collapsible	boolean	Whether the breadcrumb can be collapsed
responsive	boolean	Whether to show a responsive view for long breadcrumbs
maxItems	number	Maximum number of items to show when responsive
homePath	string	Path for the home item
autoGenerate	boolean	Whether to auto-generate breadcrumbs from the path
currentPath	string	Current path to use for auto-generation
hideHome	boolean	Whether to hide the home item
capitalize	boolean	Whether to capitalize labels
truncateLabels	boolean	Whether to truncate long labels
truncateLength	number	Maximum length of labels before truncation

Breadcrumb Item Properties

Property	Type	Description
label	string	Text label for the breadcrumb item
path	string	Navigation path for the breadcrumb item
icon	string	Icon to display with the breadcrumb item
active	boolean	Whether this is the active/current item
color	string	Text color for the breadcrumb item
truncate	boolean	Whether to truncate the label if too long
disabled	boolean	Whether the breadcrumb item is disabled
animated	boolean	Whether to animate the breadcrumb item
tooltip	string	Tooltip text for the breadcrumb item
iconPosition	string	Position of the icon (left or right)