Are you ready for Cyber ~~Monday~~ Week Deals?

Extra 25% off for all sale items + Free CoreUI Icons PRO with every order! Limited offer for the first 100 people, use code 2024BWCW25 during checkout.

On this page

Angular Breadcrumb Component

Angular Breadcrumb navigation component indicates the current location within a navigational hierarchy that automatically adds separators.

## 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). --- ## API ### Breadcrumb Module ```typescript import { BreadcrumbModule } from '@coreui/angular'; @NgModule({ imports: [BreadcrumbModule,] }) export class AppModule(){} ``` --- ### c-breadcrumb _component_ #### Inputs

| 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)[] | |

--- ### BreadcrumbRouter Service You can override `BreadcrumbRouterService` in a module providers section. ```typescript @NgModule({ ... providers: [ { provide: BreadcrumbRouterService, useClass: yourBreadcrumbRouterService } ] ```