diff --git a/docs/angular/src/content/en/components/toc.json b/docs/angular/src/content/en/components/toc.json index 84919a5ff9..3acfee6962 100644 --- a/docs/angular/src/content/en/components/toc.json +++ b/docs/angular/src/content/en/components/toc.json @@ -2234,6 +2234,11 @@ "name": "Avatar", "href": "layouts/avatar.mdx" }, + { + "name": "Breadcrumbs", + "href": "layouts/breadcrumbs.mdx", + "new": true + }, { "name": "Expansion Panel", "href": "expansion-panel.mdx", diff --git a/docs/angular/src/content/en/images/anatomy-content-light/breadcrumbs-lt-a.png b/docs/angular/src/content/en/images/anatomy-content-light/breadcrumbs-lt-a.png new file mode 100644 index 0000000000..c0eeb9b269 Binary files /dev/null and b/docs/angular/src/content/en/images/anatomy-content-light/breadcrumbs-lt-a.png differ diff --git a/docs/angular/src/content/en/images/breadcrumbs/breadcrumbs-do-not.png b/docs/angular/src/content/en/images/breadcrumbs/breadcrumbs-do-not.png new file mode 100644 index 0000000000..ad4c05a900 Binary files /dev/null and b/docs/angular/src/content/en/images/breadcrumbs/breadcrumbs-do-not.png differ diff --git a/docs/angular/src/content/en/images/breadcrumbs/breadcrumbs-do-not@2x.png b/docs/angular/src/content/en/images/breadcrumbs/breadcrumbs-do-not@2x.png new file mode 100644 index 0000000000..387edc939f Binary files /dev/null and b/docs/angular/src/content/en/images/breadcrumbs/breadcrumbs-do-not@2x.png differ diff --git a/docs/angular/src/content/en/images/breadcrumbs/breadcrumbs-do.png b/docs/angular/src/content/en/images/breadcrumbs/breadcrumbs-do.png new file mode 100644 index 0000000000..53070276a1 Binary files /dev/null and b/docs/angular/src/content/en/images/breadcrumbs/breadcrumbs-do.png differ diff --git a/docs/angular/src/content/en/images/breadcrumbs/breadcrumbs-do@2x.png b/docs/angular/src/content/en/images/breadcrumbs/breadcrumbs-do@2x.png new file mode 100644 index 0000000000..0d2f4b616e Binary files /dev/null and b/docs/angular/src/content/en/images/breadcrumbs/breadcrumbs-do@2x.png differ diff --git a/docs/xplat/src/assets/images/anatomy-content-light/breadcrumbs-lt-a.png b/docs/xplat/src/assets/images/anatomy-content-light/breadcrumbs-lt-a.png new file mode 100644 index 0000000000..c0eeb9b269 Binary files /dev/null and b/docs/xplat/src/assets/images/anatomy-content-light/breadcrumbs-lt-a.png differ diff --git a/docs/xplat/src/assets/images/breadcrumbs/breadcrumbs-do-not.png b/docs/xplat/src/assets/images/breadcrumbs/breadcrumbs-do-not.png new file mode 100644 index 0000000000..ad4c05a900 Binary files /dev/null and b/docs/xplat/src/assets/images/breadcrumbs/breadcrumbs-do-not.png differ diff --git a/docs/xplat/src/assets/images/breadcrumbs/breadcrumbs-do-not@2x.png b/docs/xplat/src/assets/images/breadcrumbs/breadcrumbs-do-not@2x.png new file mode 100644 index 0000000000..387edc939f Binary files /dev/null and b/docs/xplat/src/assets/images/breadcrumbs/breadcrumbs-do-not@2x.png differ diff --git a/docs/xplat/src/assets/images/breadcrumbs/breadcrumbs-do.png b/docs/xplat/src/assets/images/breadcrumbs/breadcrumbs-do.png new file mode 100644 index 0000000000..53070276a1 Binary files /dev/null and b/docs/xplat/src/assets/images/breadcrumbs/breadcrumbs-do.png differ diff --git a/docs/xplat/src/assets/images/breadcrumbs/breadcrumbs-do@2x.png b/docs/xplat/src/assets/images/breadcrumbs/breadcrumbs-do@2x.png new file mode 100644 index 0000000000..0d2f4b616e Binary files /dev/null and b/docs/xplat/src/assets/images/breadcrumbs/breadcrumbs-do@2x.png differ diff --git a/docs/xplat/src/content/en/components/inputs/color-picker.mdx b/docs/xplat/src/content/en/components/inputs/color-picker.mdx index 022b1cb920..f9a70668b9 100644 --- a/docs/xplat/src/content/en/components/inputs/color-picker.mdx +++ b/docs/xplat/src/content/en/components/inputs/color-picker.mdx @@ -25,7 +25,7 @@ import colorPickerDoNot from '@xplat-images/color-picker/color-picker-do-not.png import colorPickerDoNot2x from '@xplat-images/color-picker/color-picker-do-not@2x.png'; {/* -React and Blazor are excluded in toc.json until a released igniteui-react / IgniteUI.Blazor version wraps the component; their blocks below are staged and must be verified against the released wrapper APIs before removing the exclusion. +Blazor is excluded in toc.json until a released IgniteUI.Blazor version wraps the component; its blocks below are staged and must be verified against the released wrapper API before removing the exclusion. */} # Color Picker Component @@ -38,13 +38,13 @@ The {Platform} Color Picker demo shows the anchor in `input` mode that previews - + - + @@ -151,9 +151,7 @@ The {Platform} Color Picker is composed of an anchor that opens a popover dropdo ## Getting Started -To use the {Platform} Color Picker, complete the [{ProductName} Getting Started]({environment:infragisticsBaseUrl}/products/ignite-ui-angular/angular/components/general/getting-started)[{ProductName} Getting Started](../general-getting-started.mdx) topic for the basic project setup, then register the component. - -### Prerequisites and Version Compatibility +To use the {Platform} Color Picker, complete the [{ProductName} Getting Started](../general/getting-started.mdx)[{ProductName} Getting Started](../general-getting-started.mdx) topic for the basic project setup, then register the component. @@ -171,6 +169,12 @@ npm install igniteui-webcomponents + + +The Color Picker requires `igniteui-react` 19.9.0 or later. + + + Import [`IgcColorPickerComponent`]({environment:infragisticsBaseUrl}/api/webcomponents/igniteui-webcomponents/latest/classes/IgcColorPickerComponent) and a theme, then register the component: @@ -596,7 +600,7 @@ Control the Color Picker size by setting the `--ig-size` variable to one of thre **When not to use:** When users only choose from a small fixed set of colors, render that set as regular buttons or a select instead. For a lighter-weight color editor, consider the [Color Editor](./color-editor.mdx). - +
Color Picker used to choose a drawing brush color @@ -812,6 +816,10 @@ igc-color-picker { --ig-color-picker-picker-border-radius: 1rem; --ig-color-picker-picker-elevation: none; } + +igc-color-picker::part(picker-canvas) { + border-radius: 1rem; +} ``` ### Styling with Tailwind diff --git a/docs/xplat/src/content/en/components/inputs/qr-code.mdx b/docs/xplat/src/content/en/components/inputs/qr-code.mdx index e689e64709..3b61f71f00 100644 --- a/docs/xplat/src/content/en/components/inputs/qr-code.mdx +++ b/docs/xplat/src/content/en/components/inputs/qr-code.mdx @@ -27,7 +27,7 @@ import qrCodeDoNot2 from '@xplat-images/qr-code/qr-code-do-not2.png'; import qrCodeDoNot2_2x from '@xplat-images/qr-code/qr-code-do-not2@2x.png'; {/* -React and Blazor are excluded in toc.json until their QR Code wrappers ship. Their blocks below are staged; verify them against the released wrapper APIs before removing the exclusion. +Blazor is excluded in toc.json until its QR Code wrappers ship. Its blocks below are staged and must be verified against the released wrapper APIs before removing the exclusion. */} # QR Code Component @@ -46,7 +46,7 @@ The {Platform} QR Code demo renders a code from a URL string and lets you switch - + @@ -72,7 +72,6 @@ The {Platform} QR Code is a square SVG graphic made of three finder-pattern corn } `} - 1. QR Code container: the host element that renders the SVG.
2. QR Matrix: the encoded matrix that stores the destination or data payload.
3. Quiet Zone: the empty space around the code that ensures scanners can read it reliably.
@@ -94,9 +93,7 @@ The {Platform} QR Code is a square SVG graphic made of three finder-pattern corn ## Getting Started -To use the {Platform} QR Code, complete the [{ProductName} Getting Started]({environment:infragisticsBaseUrl}/products/ignite-ui-angular/angular/components/general/getting-started)[{ProductName} Getting Started](../general-getting-started.mdx) topic for the basic project setup, then register the component. - -### Prerequisites and Version Compatibility +To use the {Platform} QR Code, complete the [{ProductName} Getting Started](../general/getting-started.mdx)[{ProductName} Getting Started](../general-getting-started.mdx) topic for the basic project setup, then register the component. @@ -114,9 +111,11 @@ npm install igniteui-webcomponents -{/* -TODO: add the React and Blazor wrapper versions when they are released. -*/} + + +The QR Code requires `igniteui-react` 19.9.0 or later. + + @@ -447,7 +446,7 @@ await qrCode.toImage({ format: 'png', scale: 2, fileName: 'my-qr-code', download **When not to use:** Avoid QR codes for information that must be readable without a scanner, or when a direct button, link, or short URL serves the destination better. - +
QR Code with a heading, a call to action, and a fallback short URL @@ -587,6 +586,10 @@ igc-qr-code { --ig-qr-code-dark-color: var(--ig-primary-800); --ig-qr-code-corner-square-color: var(--ig-secondary-800); } + +igc-qr-code::part(corner-dot) { + fill: var(--ig-success-500); +} ``` ### Styling with Tailwind diff --git a/docs/xplat/src/content/en/components/layouts/breadcrumbs.mdx b/docs/xplat/src/content/en/components/layouts/breadcrumbs.mdx new file mode 100644 index 0000000000..a699eac242 --- /dev/null +++ b/docs/xplat/src/content/en/components/layouts/breadcrumbs.mdx @@ -0,0 +1,853 @@ +--- +title: "Breadcrumbs" +description: "The {ProductName} 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." +keywords: "{Platform} Breadcrumbs, {ProductName}, breadcrumb, navigation trail, current page, aria-current, separator, prefix, suffix" +license: MIT +mentionedTypes: ["Breadcrumbs", "Breadcrumb"] +relatedComponents: ["Navbar", "NavigationDrawer"] +last_updated: "2026-09-08" +llms: + description: "The {ProductName} 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." +--- +import PlatformBlock from 'igniteui-astro-components/components/mdx/PlatformBlock.astro'; +import Sample from 'igniteui-astro-components/components/mdx/Sample.astro'; +import ApiLink from 'igniteui-astro-components/components/mdx/ApiLink.astro'; +import Anatomy from 'igniteui-astro-components/components/mdx/Anatomy.astro'; +import Badge from 'igniteui-astro-components/components/mdx/Badge.astro'; +import Faq from 'igniteui-astro-components/components/mdx/Faq.astro'; +import FaqItem from 'igniteui-astro-components/components/mdx/FaqItem.astro'; +import { Image } from 'astro:assets'; +import breadcrumbsAnatomy from '@xplat-images/anatomy-content-light/breadcrumbs-lt-a.png'; +import breadcrumbsDo from '@xplat-images/breadcrumbs/breadcrumbs-do.png'; +import breadcrumbsDo2x from '@xplat-images/breadcrumbs/breadcrumbs-do@2x.png'; +import breadcrumbsDoNot from '@xplat-images/breadcrumbs/breadcrumbs-do-not.png'; +import breadcrumbsDoNot2x from '@xplat-images/breadcrumbs/breadcrumbs-do-not@2x.png'; + +{/* +Blazor is excluded in toc.json until a released IgniteUI.Blazor version wraps the component. Its blocks below are staged and must be verified against the released wrapper API before removing the exclusion. +*/} + +# Breadcrumbs Component + +The {ProductName} 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 {Platform} Breadcrumbs demo shows a three-item trail with the current page marked at the end. + + + + + + + + + + + + + +## Anatomy + +The {Platform} 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. + + + + + +1. Breadcrumbs Item: represents a single level within the breadcrumb trail
+2. Breadcrumbs Item Icon (optional): could be displayed on the right or on the left side of the label
+3. Separator: a visual element that divides individual items and indicates directionality within the hierarchy
+4. Current Item: represents the active level within the breadcrumb trail,typically non-clickable + +```text + + + ├── ::part(label) + │ ├── slot="prefix" // optional prefix content + │ ├── default slot // main content, typically + │ └── slot="suffix" // optional suffix content + └── ::part(separator) // hidden on the last item + └── slot="separator" // per-item override + + + + + + +``` + +## Getting Started + +To use the {Platform} Breadcrumbs, follow the [{ProductName} Getting Started](../general/getting-started.mdx)[{ProductName} Getting Started](../general-getting-started.mdx) topic for the basic project setup, then register the components. + + + +The Breadcrumbs component requires `igniteui-webcomponents` 7.4.0 or later. + + + + + +{ProductName} renders the Breadcrumbs as a web component, so install `igniteui-webcomponents` in your Angular project: + +```cmd +npm install igniteui-webcomponents +``` + + + + + +The Breadcrumbs component requires `igniteui-react` 19.9.0 or later. + + + + + +Import [`IgcBreadcrumbsComponent`]({environment:infragisticsBaseUrl}/api/webcomponents/igniteui-webcomponents/latest/classes/IgcBreadcrumbsComponent), [`IgcBreadcrumbComponent`]({environment:infragisticsBaseUrl}/api/webcomponents/igniteui-webcomponents/latest/classes/IgcBreadcrumbComponent), and a theme, then register both components: + +```ts +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`: + +```ts +import { CUSTOM_ELEMENTS_SCHEMA } from '@angular/core'; + +@Component({ + schemas: [CUSTOM_ELEMENTS_SCHEMA], +}) +``` + + + + + +Import the and wrappers and a theme: + +```tsx +import { IgrBreadcrumbs, IgrBreadcrumb } from 'igniteui-react'; +import 'igniteui-webcomponents/themes/light/bootstrap.css'; +``` + + + + + +Register the and modules in **Program.cs**: + +```csharp +builder.Services.AddIgniteUIBlazor(typeof(IgbBreadcrumbsModule), typeof(IgbBreadcrumbModule)); +``` + +Link the theme stylesheet in **wwwroot/index.html** (Blazor WebAssembly) or **Pages/_Host.cshtml** (Blazor Server): + +```razor + +``` + + + +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: + + + +```html + + Home + Products + Laptop + +``` + + + + + +```tsx + + Home + Products + Laptop + +``` + + + + + +```razor + + Home + Products + Laptop + +``` + + + +## Usage + +### Current Page + +Mark the item that represents the currently viewed page with the [`current`]({environment:infragisticsBaseUrl}/api/webcomponents/igniteui-webcomponents/latest/classes/IgcBreadcrumbComponent#current) property. The item reflects it as an attribute and sets `aria-current="page"`, so screen readers announce the current page. + + + +```html + + Home + Dashboard + +``` + + + + + +```tsx + + Home + Dashboard + +``` + + + + + +```razor + + Home + Dashboard + +``` + + + +### Shared Separator + +Use the [`separator`]({environment:infragisticsBaseUrl}/api/webcomponents/igniteui-webcomponents/latest/classes/IgcBreadcrumbsComponent#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. + + + +```html + + Home + Products + Laptops + Gaming Laptop + +``` + + + + + +```tsx + + Home + Products + Laptops + Gaming Laptop + +``` + + + + + +```razor + + Home + Products + Laptops + Gaming Laptop + +``` + + + + + + + + + + + + + + + +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. + + + +```html + + + Home + / + + Settings + +``` + + + + + +```tsx + + + Home + / + + Settings + +``` + + + + + +```razor + + + Home + / + + Settings + +``` + + + +### 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. + + + +```html + + + + Home + + + Mail + + + Messages + + + Inbox + 3 + + +``` + + + + + +```tsx + + + + Home + + + Mail + + + Messages + + + Inbox + 3 + + +``` + + + + + +```razor + + + + Home + + + Mail + + + Messages + + + Inbox + 3 + + +``` + + + + + + + + + + + + + + + +### 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. + + + + + + + + + + + + + + + + +
Breadcrumbs used to show a hierarchical trail with the current page marked + Breadcrumbs used as primary navigation instead of a hierarchy trail +
+ 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`]({environment:infragisticsBaseUrl}/api/webcomponents/igniteui-webcomponents/latest/classes/IgcBreadcrumbsComponent)** + +| Name | Type | Default | Description | +| -- | -- | -- | -- | +| [`separator`]({environment:infragisticsBaseUrl}/api/webcomponents/igniteui-webcomponents/latest/classes/IgcBreadcrumbsComponent#separator) | `string` | `'tree_expand'` | The icon name used as the default separator between items. Propagated to every item in the trail. | + +**[`IgcBreadcrumbComponent`]({environment:infragisticsBaseUrl}/api/webcomponents/igniteui-webcomponents/latest/classes/IgcBreadcrumbComponent)** + +| Name | Type | Default | Description | +| -- | -- | -- | -- | +| [`current`]({environment:infragisticsBaseUrl}/api/webcomponents/igniteui-webcomponents/latest/classes/IgcBreadcrumbComponent#current) | `boolean` | `false` | Marks the item as the current page and sets `aria-current="page"`. | +| [`disabled`]({environment:infragisticsBaseUrl}/api/webcomponents/igniteui-webcomponents/latest/classes/IgcBreadcrumbComponent#disabled) | `boolean` | `false` | Disables the item, sets `aria-disabled="true"`, and removes the slotted content from the tab sequence. | + + +## Styling + + + + + + + + + + + + + +The {Platform} Breadcrumbs appearance is controlled through CSS variables, CSS parts, and the theming system. + +### Styling Variables + +| Variable | What it changes | +| -- | -- | +| `--ig-breadcrumb-text-color` | The text color of the breadcrumb. | +| `--ig-breadcrumb-icon-color` | The color of the breadcrumb icon. | +| `--ig-breadcrumb-current-text-color` | The text color of the currently selected breadcrumb item. | +| `--ig-breadcrumb-current-icon-color` | The icon color of the currently selected breadcrumb item. | +| `--ig-breadcrumb-pressed-text-color` | The text color of the breadcrumb when pressed. | +| `--ig-breadcrumb-pressed-icon-color` | The color of the breadcrumb icon when pressed. | +| `--ig-breadcrumb-hover-text-color` | The text color of the breadcrumb when hovered. | +| `--ig-breadcrumb-hover-icon-color` | The color of the breadcrumb icon when hovered. | +| `--ig-breadcrumb-focus-text-color` | The text color of the breadcrumb when focused. | +| `--ig-breadcrumb-focus-icon-color` | The color of the breadcrumb icon when focused. | +| `--ig-breadcrumb-focus-underline-color` | The text underline color of the breadcrumb on focus. Only used in the Material theme. | +| `--ig-breadcrumb-focus-border-color` | The focus border color. | +| `--ig-breadcrumb-focus-hover-text-color` | The text color of the breadcrumb when focused and hovered. | +| `--ig-breadcrumb-focus-hover-icon-color` | The color of the breadcrumb icon when focused and hovered. | +| `--ig-breadcrumb-focus-hover-underline-color` | The text underline color of the breadcrumb on focus and hover. Only used in the Material theme. | +| `--ig-breadcrumb-focus-pressed-text-color` | The text color of the breadcrumb when focused and pressed. | +| `--ig-breadcrumb-focus-pressed-icon-color` | The color of the breadcrumb icon when focused and pressed. | +| `--ig-breadcrumb-focus-pressed-underline-color` | The text underline color of the breadcrumb on focus and pressed. Only used in the Material theme. | +| `--ig-breadcrumb-disabled-text-color` | The text color of the breadcrumb when disabled. | +| `--ig-breadcrumb-disabled-icon-color` | The color of the breadcrumb icon when disabled. | +| `--ig-breadcrumb-separator-color` | The color of the breadcrumb separator. | + +### Style Parts + +**[`IgcBreadcrumbComponent`]({environment:infragisticsBaseUrl}/api/webcomponents/igniteui-webcomponents/latest/classes/IgcBreadcrumbComponent)** + +| Part | What it styles | +| -- | -- | +| `label` | The container wrapping the prefix, default, and suffix slots. | +| `separator` | The container wrapping the separator slot content. | + +### Sass Theming + +Use the function for customizing the appearance of the Breadcrumbs through Sass. + +```scss +@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. + +```css +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](../themes/tailwind.mdx) with the Ignite UI theme first: + +```css +@import "tailwindcss/theme.css"; +@import "tailwindcss/utilities.css"; +``` + + + +```html + + Root + Current + +``` + + + + + +```jsx + + Root + Current + +``` + + + + + +```razor + + Root + Current + +``` + + + + + + + + + + + + + + + +The exclamation mark (`!`) gives the Tailwind utility precedence over the component's default styles. + +## Accessibility + +The {Platform} 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 `