React Bootstrap Breadcrumb Component

Breadcrumb with Bootstrap Styling

Bootstrap 5 components designed for React.js

This component is part of the CoreUI for React.js UI components library, which offers all Bootstrap components designed to work seamlessly with React.js.

If you want to use Bootstrap 5 in a React.js environment while also needing advanced components that Bootstrap does not offer and dedicated developer support, then this library is the best solution for you.

Learn how to use CoreUI’s React Breadcrumb component styled with Bootstrap to indicate navigation hierarchy and enhance user orientation within your app or website.

On this page

The React Bootstrap Breadcrumb navigation component shows users where they are in the application hierarchy. It automatically inserts visual separators via CSS, so you don’t have to manually include them.

Custom dividers#

Separators between breadcrumb items are automatically inserted using CSS via ::before and the content property.

You can customize the divider using the CSS variable --cui-breadcrumb-divider or the Sass variable $breadcrumb-divider. For RTL support, there’s also $breadcrumb-divider-flipped.

To change the divider in Sass, use the quote function. For example, to use a > character:

$breadcrumb-divider: quote('>');

It’s also possible to use an embedded SVG icon as a divider by assigning it to the custom property or Sass variable:

$breadcrumb-divider: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' 
width='8' height='8'%3E%3Cpath d='M2.5 0L1 1.5 3.5 4 1 6.5 2.5 8l4-4-4-4z' fill='currentColor'/%3E%3C/svg%3E");

To remove dividers entirely, set the CSS custom property to an empty string or the Sass variable to none.

$breadcrumb-divider: none;

Accessibility#

React Bootstrap Breadcrumbs are accessible by default. CoreUI adds aria-label="breadcrumb" to the navigation container and aria-current="page" to the active item to ensure proper screen reader behavior.

For best practices, refer to the WAI-ARIA Authoring Practices: Breadcrumb Pattern.

API reference#

Check the API reference below for full details on all available props for the Bootstrap-styled React Breadcrumb component.