Breadcrumb
As defined by the W3C:
A breadcrumb trail consists of a list of links to the parent pages of the current page in hierarchical order. It helps users find their place within a website or web application. Breadcrumbs are often placed horizontally before a page's main content.
<FluentBreadcrumb> wraps the <fluent-breadcrumb> element, a web component implementation of a breadcrumb functionality leveraging the Fluent UI design system.
It uses the <FluentBreadcrumbItem> component for defining the individual breadcrumb items. The <FluentBreadcrumb> component itself does not have any public parameters
Breadcrumb item examples
Default
Download:
With custom separator
Download:
With start icon
Download:
With end icon
Download:
With start, end and custom separator icons
Download:
Breadcrumb examples
Default
Download:
With custom separator
Download:
With start icon
Download:
With end icon
Download:
With start, end and custom separator icons
Download:
Documentation
FluentBreadcrumbItem Class
Parameters
Name | Type | Default | Description |
|---|---|---|---|
Appearance | Appearance? | Gets or sets the visual appearance. See Appearance | |
ChildContent | RenderFragment? | Gets or sets the content to be rendered inside the component. | |
Download | string? | Prompts the user to save the linked URL. See a element for more information. | |
Href | string? | Gets or sets the URL the hyperlink references. See a element for more information. Use Target parameter to specify where. | |
Hreflang | string? | Hints at the language of the referenced resource. See a element for more information. | |
Ping | string? | See a element for more information. | |
Referrerpolicy | string? | See a element for more information. | |
Rel | string? | See a element for more information. | |
Target | string? | Gets or sets the target attribute that specifies where to open the link, if Href is specified. See a element for more information. Possible values: _blank | _self | _parent | _top. | |
Type | string? | See a element for more information. |