Example

The 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.

Dividers

Dividers are automatically added in CSS through::before andcontent. 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.

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

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

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;.

Accessibility

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

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

API

Breadcrumb Module

c-breadcrumb

component

Inputs

c-breadcrumb-item

component

Inputs

c-breadcrumb-router

component

Inputs

BreadcrumbRouter Service

You can overrideBreadcrumbRouterService in a module providers section.