Breadcrumb

Breadcrumb components are used to display the navigation hierarchy of a website, allowing users to navigate back to previous pages. The Breadcrumb component is the container for the BreadcrumbItem components, which represent individual navigation items in the hierarchy.

Importing

Import the components as follows:

import { Breadcrumb, BreadcrumbItem } from '@ef-global/backpack/Breadcrumb';

Usage

To create a breadcrumb navigation, use the Breadcrumb component as a container and add multiple BreadcrumbItem components as children.

<Breadcrumb>
  <BreadcrumbItem link="/">Home</BreadcrumbItem>
  <BreadcrumbItem link="/section">Section</BreadcrumbItem>
  <BreadcrumbItem link="/section/page">Page</BreadcrumbItem>
</Breadcrumb>

Props

BreadcrumbProps

Name	Type	Default	Description
children	ReactNode \| ReactNode[]		The breadcrumb items to be rendered.
className	string		Additional CSS classes to apply to the Breadcrumb component.
inverse	boolean	false	Set to `true` to use an inverse color scheme for the breadcrumb.

BreadcrumbItemProps

Name	Type	Default	Description
children	ReactNode		The content of the breadcrumb item.
asChild	boolean	false	Set to `true` to render the item as a child component.
className	string		Additional CSS classes to apply to the BreadcrumbItem component.
link	string		The URL to navigate to when the breadcrumb item is clicked.
inverse	boolean	false	Set to `true` to use an inverse color scheme for the breadcrumb item.

Examples

Basic Breadcrumb Example

<Breadcrumb>
  <BreadcrumbItem link="/">Home</BreadcrumbItem>
  <BreadcrumbItem link="/section">Section</BreadcrumbItem>
  <BreadcrumbItem link="/section/page">Page</BreadcrumbItem>
</Breadcrumb>

Breadcrumb with Inverse Color Scheme

<Breadcrumb inverse>
  <BreadcrumbItem link="/" inverse>Home</BreadcrumbItem>
  <BreadcrumbItem link="/section" inverse>Section</BreadcrumbItem>
  <BreadcrumbItem link="/section/page" inverse>Page</BreadcrumbItem>
</Breadcrumb>

Blockquote Button