Breadcrumbs Component New

The Ignite UI for Angular Breadcrumbs component renders an ordered trail of navigation items separated by a configurable icon, communicating a user’s location within a site’s hierarchy and providing a way back to higher-level pages.

Live Demo

The Angular Breadcrumbs demo shows a three-item trail with the current page marked at the end.

Anatomy

The Angular Breadcrumbs component is a pair of elements - a container that manages shared state and renders as an ARIA list, and one or more item children that render arbitrary slotted content followed by a separator.

<igc-breadcrumbs role="list">
  <igc-breadcrumb role="listitem">
    ├── ::part(label)
    │   ├── slot="prefix"                 // optional prefix content
    │   ├── default slot                  // main content, typically <a>
    │   └── slot="suffix"                 // optional suffix content
    └── ::part(separator)                 // hidden on the last item
        └── slot="separator"              // per-item override
  </igc-breadcrumb>
  <!-- more <igc-breadcrumb> items ... -->
  <igc-breadcrumb current role="listitem" aria-current="page">
    <!-- last item, no trailing separator -->
  </igc-breadcrumb>
</igc-breadcrumbs>

Getting Started

To use the Angular Breadcrumbs, follow the Ignite UI for Angular Getting Started topic for the basic project setup, then register the components.

The Breadcrumbs component requires igniteui-webcomponents 7.4.0 or later.

Ignite UI for Angular renders the Breadcrumbs as a web component, so install igniteui-webcomponents in your Angular project:

npm install igniteui-webcomponents

Import IgcBreadcrumbsComponent, IgcBreadcrumbComponent, and a theme, then register both components:

import { defineComponents, IgcBreadcrumbsComponent, IgcBreadcrumbComponent } from 'igniteui-webcomponents';
import 'igniteui-webcomponents/themes/light/bootstrap.css';

defineComponents(IgcBreadcrumbsComponent, IgcBreadcrumbComponent);

Add CUSTOM_ELEMENTS_SCHEMA to the Angular component that renders igc-breadcrumbs:

import { CUSTOM_ELEMENTS_SCHEMA } from '@angular/core';

@Component({
    schemas: [CUSTOM_ELEMENTS_SCHEMA],
})

Compose a trail by placing one breadcrumb item per level inside the Breadcrumbs container. Each item accepts arbitrary content in its default slot, most commonly an anchor that handles the navigation:

<igc-breadcrumbs>
  <igc-breadcrumb><a href="/home">Home</a></igc-breadcrumb>
  <igc-breadcrumb><a href="/home/products">Products</a></igc-breadcrumb>
  <igc-breadcrumb current><a href="/home/products/laptop">Laptop</a></igc-breadcrumb>
</igc-breadcrumbs>

Usage

Current Page

Mark the item that represents the currently viewed page with the current property. The item reflects it as an attribute and sets aria-current="page", so screen readers announce the current page.

<igc-breadcrumbs>
  <igc-breadcrumb><a href="/home">Home</a></igc-breadcrumb>
  <igc-breadcrumb current><a href="/home/dashboard">Dashboard</a></igc-breadcrumb>
</igc-breadcrumbs>

Shared Separator

Use the separator property on the container to set a shared separator icon for every item in the trail. The value is an icon name from the registered icon collection, and the container propagates it to each item.

<igc-breadcrumbs separator="slash">
  <igc-breadcrumb><a href="/home">Home</a></igc-breadcrumb>
  <igc-breadcrumb><a href="/home/products">Products</a></igc-breadcrumb>
  <igc-breadcrumb><a href="/home/products/laptops">Laptops</a></igc-breadcrumb>
  <igc-breadcrumb current><a href="/home/products/laptops/gaming">Gaming Laptop</a></igc-breadcrumb>
</igc-breadcrumbs>

The trailing separator is automatically hidden on the last item in the trail, so you never need to omit it manually.

Per-Item Separator Override

The separator can also be overridden for a single item by slotting content into that item’s separator slot. This is useful for mixing text separators (such as / or ›) with icons, or for using an entirely different separator at each boundary.

<igc-breadcrumbs>
  <igc-breadcrumb>
    <a href="/home">Home</a>
    <span slot="separator">/</span>
  </igc-breadcrumb>
  <igc-breadcrumb current><a href="/home/settings">Settings</a></igc-breadcrumb>
</igc-breadcrumbs>

Prefix and Suffix Content

Each breadcrumb item exposes prefix and suffix slots for supplementary content such as icons, badges, or status indicators around the main content.

<igc-breadcrumbs>
  <igc-breadcrumb>
    <igc-icon slot="prefix" name="home"></igc-icon>
    <a href="/home">Home</a>
  </igc-breadcrumb>
  <igc-breadcrumb>
    <a href="/home/profile">Mail</a>
  </igc-breadcrumb>
  <igc-breadcrumb>
    <a href="/home/profile">Messages</a>
  </igc-breadcrumb>
  <igc-breadcrumb current>
    <a href="/home/inbox">Inbox</a>
    <igc-badge slot="suffix" outlined variant="danger">3</igc-badge>
  </igc-breadcrumb>
</igc-breadcrumbs>

Wrapping and Long Trails

The container renders its items on a single wrapping row using flex layout. When a trail is longer than the available width, the items wrap to the next line automatically - no additional configuration is required.

In Right-to-Left layouts, the separator icon is mirrored automatically without additional configuration, so a right-pointing chevron becomes left-pointing without changing the icon name.

Size

Control the Breadcrumbs size by setting the --ig-size variable to one of three options: --ig-size-small, --ig-size-medium, or --ig-size-large. This can be used to adjust the text and icon sizes within the breadcrumbs, along with their paddings.

States

Breadcrumbs support various visual states such as hover, focus, pressed, and disabled and also combinations like focus-hover and focus-pressed. These states help indicate the current interaction status of each breadcrumb item.

Do/Don’t

Use breadcrumbs to orient users in content-rich applications with three or more levels of hierarchy by providing a clear, low-friction path to navigate back to parent pages. Do not use breadcrumbs in flat, single-level site structures where they create unnecessary visual clutter, or in sequential step-by-step processes where progress indicators are required instead.

Do	Don’t
Use breadcrumbs for complex products where content is nested deeper than two levels.	Avoid using breadcrumbs as primary navigation and if your hierarchy contains only one level.

Properties

The container exposes the shared separator, and each item exposes its state.

IgcBreadcrumbsComponent

IgcBreadcrumbComponent

Styling

The Angular Breadcrumbs appearance is controlled through CSS variables, CSS parts, and the theming system.

Styling Variables

Style Parts

IgcBreadcrumbComponent

Sass Theming

Use the breadcrumb-theme function for customizing the appearance of the Breadcrumbs through Sass.

@use "igniteui-theming/sass/themes" as *;

$my-breadcrumb-theme: breadcrumb-theme(
    $text-color: #1E2125,
    $icon-color: #8B5BB1
);

:root {
  @include tokens($my-breadcrumb-theme);
}

CSS Variables

Set component CSS variables directly when you need local styling without a Sass build step.

igc-breadcrumbs {
  --ig-breadcrumb-text-color: var(--ig-primary-50);
  --ig-breadcrumb-icon-color: var(--ig-primary-200);
  --ig-breadcrumb-separator-color: var(--ig-gray-200);
}

igc-breadcrumb::part(label) {
  padding-inline: 0.25rem;
}

Styling with Tailwind

Combine Tailwind utility classes with the Breadcrumbs CSS variables for utility-first styling. Set up Tailwind with the Ignite UI theme first:

@import "tailwindcss/theme.css";
@import "tailwindcss/utilities.css";

<igc-breadcrumbs class="!light-breadcrumb ![--ig-breadcrumb-text-color:var(--ig-primary-50)]">
  <igc-breadcrumb><a href="/">Root</a></igc-breadcrumb>
  <igc-breadcrumb current><a href="/current">Current</a></igc-breadcrumb>
</igc-breadcrumbs>

The exclamation mark (!) gives the Tailwind utility precedence over the component’s default styles.

Accessibility

The Angular Breadcrumbs follows the ARIA breadcrumb navigation pattern. The container exposes the ARIA list role, each item exposes the listitem role, and the current item is announced with aria-current="page".

Accessible Navigation Landmark

Wrap the trail in a <nav> element with an aria-label so assistive technology exposes it as a navigation landmark. The label belongs on the <nav>, not on the list, per the ARIA breadcrumb pattern.

<nav aria-label="Breadcrumb">
  <igc-breadcrumbs>
    <igc-breadcrumb><a href="/">Root</a></igc-breadcrumb>
    <igc-breadcrumb current><a href="/products">Products</a></igc-breadcrumb>
  </igc-breadcrumbs>
</nav>

Keyboard Interaction

The Breadcrumbs components do not implement custom keyboard handling — navigation relies on the native behavior of the slotted interactive content:

Screen Readers / ARIA

• The Breadcrumbs host has role="list".
• Each Breadcrumb host has role="listitem".
• Setting current to true applies aria-current="page" to the host; setting it back to false removes the attribute.
• Setting disabled to true applies aria-disabled="true" to the host.
• The separator icons are decorative and are not announced by screen readers.

Accessibility Compliance

Infragistics documents Ignite UI for Angular accessibility support for Section 508 and WCAG 2.1 guideline areas in the Accessibility Compliance topic.

Your responsibilities:

• Wrap the Breadcrumbs container in a <nav> element and set a descriptive aria-label, such as "Breadcrumb" or "Product category".
• Mark exactly one item as current per trail so screen readers announce a single current page.
• Provide a meaningful text label inside each slotted anchor; do not rely on prefix icons alone to communicate the destination.

Troubleshooting

The Angular Breadcrumbs troubleshooting guidance follows a problem → cause → fix format for common integration and rendering issues.

Why is my separator not visible on some items?

The separator is automatically hidden on the last item in the trail — this is the intended behavior for the ARIA breadcrumb pattern. If it is missing from an unexpected item, check whether that item is the last visible child of the container.

Why is the custom icon name I set on ‘separator’ not rendering?

The separator icon must be registered with the icon registry. Register the icon before rendering the trail, or fall back to the default tree_expand icon that ships with the theme.

Why does the trail not wrap in RTL?

Wrapping is not RTL-specific — it happens whenever the total content width exceeds the container width. In RTL contexts, the visual order is reversed and the separator icon is mirrored automatically; if the trail still overflows, check whether a parent element is preventing the container from taking up its natural width.

Known Limitations

The Angular Breadcrumbs has the following platform-independent limitations.

• The Breadcrumbs components do not implement custom keyboard handling — activation depends on the interactive element slotted into each item (usually an anchor).
• The Breadcrumbs do not render a <nav> landmark of their own; the consuming application must provide the <nav aria-label="..."> wrapper.
• The container does not truncate long trails automatically. Combine the natural flex wrapping with your own overflow strategy (e.g. collapsing intermediate items into a menu) when a single-line trail is required at narrow widths.

API References

Dependencies

The Angular Breadcrumbs requires a theme stylesheet to apply its visual styling. See the framework-specific setup in Getting Started.

Additional Resources

Use these resources for support and related Ignite UI documentation.

• Ignite UI for Angular Forums
• Ignite UI for Angular GitHub

Related Components

Use these related components when the navigation surface is broader than a single hierarchy trail.

• Navbar — For the primary application header with actions and identity.
• Navigation Drawer — For a persistent or collapsible side navigation with grouped links.

FAQ