Support CoreUI Development

CoreUI is an MIT-licensed open source project and is completely free to use. However, the amount of effort needed to maintain and develop new features for the project is not sustainable without proper financial backing.

You can support our Open Source software development in the following ways:

  • Buy the CoreUI PRO, and get access to PRO components, and dedicated support.
  • Became a sponsor, and get your logo on BACKERS.md/README.md files or each site of this documentation
  • Give us a star ⭐️ on Github.

React Breadcrumb Component

React breadcrumb navigation component which indicates the current location within a navigational hierarchy that automatically adds separators.

How to use React Breadcrumb Component.#

The react breadcrumb navigation provides links back to each previous page the user navigated through and shows the current location in a website or an application. You don’t have to add separators, because they automatically added in CSS through ::before and content.

1<CBreadcrumb>
2 <CBreadcrumbItem active>Home</CBreadcrumbItem>
3</CBreadcrumb>
4
5<CBreadcrumb>
6 <CBreadcrumbItem href="#">Home</CBreadcrumbItem>
7 <CBreadcrumbItem active>Library</CBreadcrumbItem>
8</CBreadcrumb>
9
10<CBreadcrumb>
11 <CBreadcrumbItem href="#">Home</CBreadcrumbItem>
12 <CBreadcrumbItem href="#">Library</CBreadcrumbItem>
13 <CBreadcrumbItem active>Data</CBreadcrumbItem>
14</CBreadcrumb>

Dividers#

Dividers are automatically added in CSS through ::before and content. They can be changed by modifying a local CSS custom property --coreui-breadcrumb-divider, or through the $breadcrumb-divider Sass variable — and $breadcrumb-divider-flipped for its RTL counterpart, if needed. We default to our Sass variable, which is set as a fallback to the custom property. This way, you get a global divider that you can override without recompiling CSS at any time.

1<CBreadcrumb style={{"--cui-breadcrumb-divider": "'>'"}}>
2 <CBreadcrumbItem href="#">Home</CBreadcrumbItem>
3 <CBreadcrumbItem active>Library</CBreadcrumbItem>
4</CBreadcrumb>

When modifying via Sass, the quote function is required to generate the quotes around a string. For example, using > as the divider, you can use this:

1$breadcrumb-divider: quote(">");

It's also possible to use an embedded SVG icon. Apply it via our CSS custom property, or use the Sass variable.

1<CBreadcrumb style={{"--cui-breadcrumb-divider": "url(&#34;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&#34;);"}}>
2 <CBreadcrumbItem href="#">Home</CBreadcrumbItem>
3 <CBreadcrumbItem active>Library</CBreadcrumbItem>
4</CBreadcrumb>
1$breadcrumb-divider: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg'
2width='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");

You can also remove the divider setting --cui-breadcrumb-divider: ''; (empty strings in CSS custom properties counts as a value), or setting the Sass variable to $breadcrumb-divider: none;.

1<CBreadcrumb style={{"--cui-breadcrumb-divider": "'';"}}>
2 <CBreadcrumbItem href="#">Home</CBreadcrumbItem>
3 <CBreadcrumbItem active>Library</CBreadcrumbItem>
4</CBreadcrumb>
1$breadcrumb-divider: none;

Accessibility#

Since react breadcrumbs provide navigation, it's useful to add a significant label such as aria-label="breadcrumb" to explain the type of navigation implemented in the <nav> element. You should also add an aria-current="page" to the last item of the set to show that it represents the current page. CoreUI for React.js automatically add all of this labels to breadcrumb's components.

For more information, see the WAI-ARIA Authoring Practices for the breadcrumb pattern.

Customizing#

CSS variables#

React breadcrumbs use local CSS variables on .breadcrumb for enhanced real-time customization. Values for the CSS variables are set via Sass, so Sass customization is still supported, too.

1--cui-breadcrumb-padding-x: #{$breadcrumb-padding-x};
2--cui-breadcrumb-padding-y: #{$breadcrumb-padding-y};
3--cui-breadcrumb-margin-bottom: #{$breadcrumb-margin-bottom};
4--cui-breadcrumb-font-size: #{$breadcrumb-font-size};
5--cui-breadcrumb-bg: #{$breadcrumb-bg};
6--cui-breadcrumb-border-radius: #{$breadcrumb-border-radius};
7--cui-breadcrumb-divider-color: #{$breadcrumb-divider-color};
8--cui-breadcrumb-item-padding-x: #{$breadcrumb-item-padding-x};
9--cui-breadcrumb-item-active-color: #{$breadcrumb-active-color};

How to use CSS variables#

1const vars = {
2 '--my-css-var': 10,
3 '--my-another-css-var': "red"
4}
5return <CBreadcrumb style={vars}>...</CBreadcrumb>

SASS variables#

1$breadcrumb-font-size: null;
2$breadcrumb-padding-y: 0;
3$breadcrumb-padding-x: 0;
4$breadcrumb-item-padding-x: .5rem;
5$breadcrumb-margin-bottom: 1rem;
6$breadcrumb-bg: unset;
7$breadcrumb-divider-color: $gray-600;
8$breadcrumb-active-color: $gray-600;
9$breadcrumb-divider: quote("/");
10$breadcrumb-divider-flipped: $breadcrumb-divider;
11$breadcrumb-border-radius: null;

API#

CBreadcrumb#

1import { CBreadcrumb } from '@coreui/react'
2// or
3import CBreadcrumb from '@coreui/react-pro/src/components/breadcrumb/CBreadcrumb'
PropertyDescriptionTypeDefault
classNameA string of all className you want applied to the component.string-

CBreadcrumbItem#

1import { CBreadcrumbItem } from '@coreui/react'
2// or
3import CBreadcrumbItem from '@coreui/react-pro/src/components/breadcrumb/CBreadcrumbItem'
PropertyDescriptionTypeDefault
activeToggle the active state for the component.boolean-
classNameA string of all className you want applied to the base component.string-
hrefThe href attribute for the inner <CLink> component.string-