fast-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.

Setup

Basic Setup

import {
    provideFASTDesignSystem,
    fastBreadcrumb,
    fastBreadcrumbItem
} from "@microsoft/fast-components";

provideFASTDesignSystem()
    .register(
        fastBreadcrumb(),
        fastBreadcrumbItem()
    );

Custom Separator

import {
    provideFASTDesignSystem,
    fastBreadcrumb,
    fastBreadcrumbItem
} from "@microsoft/fast-components";

provideFASTDesignSystem()
    .register(
        fastBreadcrumb(),
        fastBreadcrumbItem({
            separator: " -> "
        })
    );

Usage

Live Editor

<fast-breadcrumb> <fast-breadcrumb-item href="#">Breadcrumb item 1</fast-breadcrumb-item> <fast-breadcrumb-item href="#">Breadcrumb item 2</fast-breadcrumb-item> <fast-breadcrumb-item >Breadcrumb item 3</fast-breadcrumb-item> </fast-breadcrumb>

<fast-breadcrumb>
    <fast-breadcrumb-item href="#">Breadcrumb item 1</fast-breadcrumb-item>
    <fast-breadcrumb-item href="#">Breadcrumb item 2</fast-breadcrumb-item>
    <fast-breadcrumb-item >Breadcrumb item 3</fast-breadcrumb-item>
</fast-breadcrumb>

Result

Loading...

Create your own design

Breadcrumb

import { Breadcrumb, breadcrumbTemplate as template } from "@microsoft/fast-foundation";
import { breadcrumbStyles as styles } from "./my-breadcrumb.styles";

export const myBreadcrumb = Breadcrumb.compose({
    baseName: "breadcrumb",
    template,
    styles,
});

Breadcrumb Item

import {
    BreadcrumbItem,
    BreadcrumbItemOptions,
    breadcrumbItemTemplate as template,
} from "@microsoft/fast-foundation";
import { breadcrumbItemStyles as styles } from "./my-breadcrumb-item.styles";

export const myBreadcrumbItem = BreadcrumbItem.compose<BreadcrumbItemOptions>({
    baseName: "breadcrumb-item",
    template,
    styles,
    separator: "/",
    shadowOptions: {
        delegatesFocus: true,
    },
});

note

This component is built with the expectation that focus is delegated to the anchor element rendered into the shadow DOM.

API

class: Breadcrumb

Superclass

Name	Module	Package
FoundationElement	/src/foundation-element/foundation-element.js

Fields

Name	Privacy	Type	Default	Description	Inherited From
$presentation	public	ComponentPresentation or null		A property which resolves the ComponentPresentation instance for the current component.	FoundationElement
template	public	ElementViewTemplate or void or null		Sets the template of the element instance. When undefined, the element will attempt to resolve the template from the associated presentation or custom element definition.	FoundationElement
styles	public	ElementStyles or void or null		Sets the default styles for the element instance. When undefined, the element will attempt to resolve default styles from the associated presentation or custom element definition.	FoundationElement

Methods

Name	Privacy	Description	Parameters	Return	Inherited From
slottedBreadcrumbItemsChanged	public
templateChanged	protected			void	FoundationElement
stylesChanged	protected			void	FoundationElement

CSS Parts

Name	Description
list	The element wrapping the slotted items

Slots

Name	Description
	The default slot for the breadcrumb items

---

class: BreadcrumbItem

Superclass

Name	Module	Package
Anchor	/src/anchor/anchor.js

Fields

Name	Privacy	Type	Default	Description	Inherited From
download	public	string		Prompts the user to save the linked URL. See <a> element for more information.	Anchor
href	public	string		The URL the hyperlink references. See <a> element for more information.	Anchor
hreflang	public	string		Hints at the language of the referenced resource. See <a> element for more information.	Anchor
ping	public	string		See <a> element for more information.	Anchor
referrerpolicy	public	string		See <a> element for more information.	Anchor
rel	public	string		See <a> element for more information.	Anchor
target	public	"_self" or "_blank" or "_parent" or "_top"		See <a> element for more information.	Anchor
type	public	string		See <a> element for more information.	Anchor
control	public	HTMLAnchorElement		References the root element	Anchor
$presentation	public	ComponentPresentation or null		A property which resolves the ComponentPresentation instance for the current component.	FoundationElement
template	public	ElementViewTemplate or void or null		Sets the template of the element instance. When undefined, the element will attempt to resolve the template from the associated presentation or custom element definition.	FoundationElement
styles	public	ElementStyles or void or null		Sets the default styles for the element instance. When undefined, the element will attempt to resolve default styles from the associated presentation or custom element definition.	FoundationElement

Methods

Name	Privacy	Description	Parameters	Return	Inherited From
templateChanged	protected			void	FoundationElement
stylesChanged	protected			void	FoundationElement

Attributes

Name	Field	Inherited From
download	download	Anchor
href	href	Anchor
hreflang	hreflang	Anchor
ping	ping	Anchor
referrerpolicy	referrerpolicy	Anchor
rel	rel	Anchor
target	target	Anchor
type	type	Anchor

---

Additional resources

• Component explorer examples
• Component technical specification
• W3C Component Aria Practices
• Open UI Analysis