# React Breadcrumb Component > React breadcrumb navigation component which indicates the current location within a navigational hierarchy that automatically adds separators. ## Examples 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. Separators are added for you, so the markup is a list of steps and nothing else. `` gives each step a padded, hoverable target. It works on the link a `href` renders, and on the active step, so every step keeps the same height. ```html import React from 'react' import { CBreadcrumb, CBreadcrumbItem } from '@coreui/react' export const BreadcrumbExample = () => { return ( <> Home Home Library Home Library Data ) } ``` ### Plain links Render your own link as a child instead of passing `href`, and the step is plain text with no target of its own. Mixing the two works. ```html import React from 'react' import { CBreadcrumb, CBreadcrumbItem, CLink } from '@coreui/react' export const BreadcrumbPlainLinksExample = () => { return ( Home Library Data ) } ``` ## Dividers A breadcrumb writes its separators for you. Put a `` in the markup when one separator needs its own content, or change them all at once with a variable. The component marks itself `aria-hidden`, since a screen reader would otherwise count the separators as steps in the trail. ### Default divider _Added in 6.0.0._ Leave `` empty to render the default separator. The automatic divider steps aside wherever you place an element, so the two never double up, and the spacing is the same either way. ```html import React from 'react' import { CBreadcrumb, CBreadcrumbDivider, CBreadcrumbItem } from '@coreui/react' export const BreadcrumbDefaultDividerExample = () => { return ( Home Library ) } ``` ### Text dividers _Added in 6.0.0._ Put the character straight into the component — no quoting, no variable. ```html import React from 'react' import { CBreadcrumb, CBreadcrumbDivider, CBreadcrumbItem } from '@coreui/react' export const BreadcrumbTextDividersExample = () => { return ( Home › Library → Data ) } ``` ### SVG dividers _Added in 6.0.0._ Put an inline SVG inside the component. Nothing has to be URL escaped, and `currentColor` makes it follow the divider color, dark mode included. ```html import React from 'react' import { CBreadcrumb, CBreadcrumbDivider, CBreadcrumbItem } from '@coreui/react' export const BreadcrumbSvgDividersExample = () => { return ( Home Library ) } ``` ### Changing every divider The separators a breadcrumb writes for itself are added in CSS through [`::before`](https://developer.mozilla.org/en-US/docs/Web/CSS/::before) and [`content`](https://developer.mozilla.org/en-US/docs/Web/CSS/content). They can be changed by modifying a local CSS custom property `--cui-breadcrumb-divider`, or through the `$breadcrumb-divider` Sass variable — and `$breadcrumb-divider-flipped` for its RTL counterpart, if needed. The Sass variable sets the token's default, so a global divider can still be overridden on a single breadcrumb without recompiling. Set the property on `` itself — the token is declared there, so a value put on a wrapping element is overridden rather than inherited. ```html import React from 'react' import { CBreadcrumb, CBreadcrumbItem } from '@coreui/react' export const BreadcrumbDividersExample = () => { return ( "' } as React.CSSProperties}> Home Library ) } ``` When modifying via Sass, the [quote](https://sass-lang.com/documentation/modules/string#quote) function is required to generate the quotes around a string. For example, using `>` as the divider, you can use this: ```scss $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. ```html import React from 'react' import { CBreadcrumb, CBreadcrumbItem } from '@coreui/react' export const BreadcrumbDividers2Example = () => { return ( Home Library ) } ``` ```scss $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"); ``` 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;`. ```html import React from 'react' import { CBreadcrumb, CBreadcrumbItem } from '@coreui/react' export const BreadcrumbDividers3Example = () => { return ( Home Library ) } ``` ```scss $breadcrumb-divider: none; ``` ## Collapsed items _Added in 6.0.0._ A long trail can keep its middle steps behind one item. Make that item a menu whose toggle is your own `.breadcrumb-link` button — pass `custom` to `` and it wires the single child instead of rendering a button of its own, so the step keeps the breadcrumb's look. Give the button an accessible name: `…` on its own tells a screen reader nothing. ```html import React from 'react' import { CBreadcrumb, CBreadcrumbItem, CMenu, CMenuContent, CMenuItem, CMenuToggle, } from '@coreui/react' export const BreadcrumbCollapsedItemsExample = () => { return ( Home Library Reports 2026 Data ) } ``` > ##### Keep it a disclosure, not a menu > > The hidden steps are navigation links, so leave them as links inside a plain list. Do not add `role="menu"` and `role="menuitem"`: those describe an application menu of commands, and applying them makes a screen reader announce a menu, expect arrow-key navigation, and stop presenting the steps as links. `` deliberately adds no `role` of its own, so the markup above is already a disclosure — the toggle carries `aria-expanded`, and that is what a user needs to hear. ## 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 `