Angular Breadcrumb

On this page

## 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`](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 `--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, 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.

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

```scss $breadcrumb-divider: none; ``` ## Accessibility Since 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 Angular automatically add all of this labels to breadcrumb's components.** For more information, see the [WAI-ARIA Authoring Practices for the breadcrumb pattern](https://www.w3.org/TR/wai-aria-practices/#breadcrumb).

| name | description | type | default | | ---- | ----------- | ---- | ------- | | `ariaLabel` | Default aria-label for breadcrumb. **`default`** 'breadcrumb' | `string` | `'breadcrumb'` | | `role` | Default role for breadcrumb. **`default`** 'navigation' | `string` | `'navigation'` |

--- ### c-breadcrumb-item _component_ #### Inputs

| name | description | type | default | | ---- | ----------- | ---- | ------- | | `active` | Toggle the active state for the component. | `boolean` | | | `attributes` | Additional html attributes for link. | [`INavAttributes`](../interfaces/coreui_types.INavAttributes.md) | | | `linkProps` | Some `NavigationExtras` props for the inner `[routerLink]` directive and `routerLinkActiveOptions`. | [`INavLinkProps`](../interfaces/coreui_types.INavLinkProps.md) | | | `url` | The `url` prop for the inner `[routerLink]` directive. | `string` \| `any`[] | |

--- ### c-breadcrumb-router _component_ #### Inputs

| name | description | type | default | | ---- | ----------- | ---- | ------- | | `items` | Optional array of IBreadcrumbItem to override default BreadcrumbRouter behavior. | [`IBreadcrumbItem`](../interfaces/breadcrumb_breadcrumb_item_breadcrumb_item.IBreadcrumbItem.md)[] | |