BreadcrumbA navigation component for displaying a route trail.

The Breadcrumb component is used to display a trail of links representing the current page's location within a navigational hierarchy. It supports dropdowns for subcategories and can be customized with different sizes and separators.

Installation

Install the Apsara library from the terminal.

npm install @raystack/apsara

Import and usage.

<Breadcrumb
    size="small"
    items={[
      { label: 'Home', href: '/' },
      { label: 'Category', href: '/category' },
      { label: 'Subcategory', href: '/category/subcategory' },
      { label: 'Current Page', href: '/category/subcategory/current' }
    ]}
  />

Props

The Breadcrumb component accepts the following props:

items: Array of breadcrumb items with the following structure:
- label: Text to display for the item (string)
- href: URL for the item link (string)
- icon: Optional icon element to display (ReactNode)
- dropdownItems: Optional array of dropdown items, each with label and href
size: Size variant of the breadcrumb ("small" | "medium", default: "medium")
maxVisibleItems: Maximum number of items to display before showing ellipsis (number)
separator: Custom separator between items (ReactNode, default: "/")
onItemClick: Callback function when an item is clicked (Function)
className: Custom CSS class names

Size

The Breadcrumb component supports different sizes to fit various design requirements. You can specify the size using the size prop.

Separator

You can customize the separator between breadcrumb items using the separator prop.

Dropdowns

Breadcrumb items can include dropdowns for additional navigation options.

Icons

Breadcrumb items can include icons either alongside text or as standalone elements.

Ellipsis

Control the visibility of breadcrumb items using the maxVisibleItems prop. By default, all items are visible when maxVisibleItems is not specified.