Breadcrumb

The Breadcrumb component displays the current page location within a hierarchical navigation structure. It helps users understand where they are and provides quick navigation back to previous sections.

The component is composed of Breadcrumb and Breadcrumb.Item.

Import

import { Breadcrumb } from "@promethey/bsui";

Note

Badge inherits all utility props supported by the Prime component, including layout, spacing, typography, colors, borders, sizing, positioning, and other Bootstrap utility APIs.

Basic usage

Custom divider

Use the divider prop to replace the default separator.

Different divider

Any string may be used as a divider.

Active item

Mark the current page using the active prop.

Utility props

All utility props inherited from Prime are fully supported.

API

Breadcrumb

Prop	Type	Default	Description
children	ReactNode	—	Breadcrumb items rendered inside the component.
className	string | object	—	Additional CSS classes applied to the root element.
style	object	—	Inline styles applied to the root element.
divider	string	"/"	Custom separator displayed between breadcrumb items.

Breadcrumb.Item

Prop	Type	Default	Description
children	ReactNode	—	Content rendered inside the breadcrumb item.
className	string | object	—	Additional CSS classes applied to the item.
style	object	—	Inline styles applied to the item.
to	string	"#"	Navigation target used for non-active items.
active	boolean	false	Marks the item as the current page and disables navigation.