Breadcrumb

Indicate the current page's location within a navigational hierarchy that automatically adds separators.

Basic Usage

The breadcrumb menu consists of two components: Breadcrumb and BreadcrumbItem. The Breadcrumb is the wrapper for the entire menu; the BreadcrumbItem should be used multiple times within it, and refers to each node in the menu. A BreadcrumbItem takes a to prop, which determines the href of that item. If that prop is left blank, the item will be rendered as a non-clickable element with aria-current="page" on it. All items in a breadcrumb menu should have the to prop, except for the last one, which represents the current page.

import React from 'react';

import { Breadcrumb, BreadcrumbItem } from 'react-magma-dom';

export function Example() {
  return (
    <Breadcrumb>
      <BreadcrumbItem to="#">Home</BreadcrumbItem>
      <BreadcrumbItem to="#">Library</BreadcrumbItem>
      <BreadcrumbItem>Data</BreadcrumbItem>
    </Breadcrumb>
  );
}

Inverse

IsInverse is an optional boolean prop, that may be used when the breadcrumb menu to be displayed on a dark background.

import React from 'react';

import { Breadcrumb, BreadcrumbItem, Card, CardBody } from 'react-magma-dom';

export function Example() {
  return (
    <Card isInverse>
      <CardBody>
        <Breadcrumb isInverse>
          <BreadcrumbItem to="#">Home</BreadcrumbItem>
          <BreadcrumbItem to="#">Library</BreadcrumbItem>
          <BreadcrumbItem>Data</BreadcrumbItem>
        </Breadcrumb>
      </CardBody>
    </Card>
  );
}

Aria-label

By default, the aria-label of the Breadcrumb component is Breadcrumb. This can be overridden by passing in the aria-label prop.

import React from 'react';

import { Breadcrumb, BreadcrumbItem } from 'react-magma-dom';

export function Example() {
  return (
    <Breadcrumb aria-label="Hello world">
      <BreadcrumbItem to="#">Home</BreadcrumbItem>
      <BreadcrumbItem to="#">Library</BreadcrumbItem>
      <BreadcrumbItem>Data</BreadcrumbItem>
    </Breadcrumb>
  );
}

Breadcrumb Props

This component uses forwardRef. The ref is applied to the Breadcrumb container nav element.

All of the global HTML attributes can be provided as props and will be applied to the wrapping nav element that gets rendered.

Breadcrumb Item Props

This component uses forwardRef. The ref is applied to the Breadcrumb Item container li element.

All of the standard li attributes can be provided as props and will be applied to the wrapping li element that gets rendered.