Skip to main content
Version: 1.x

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>
Result
Loading...

Create your own design

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,
});
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

NameModulePackage
FoundationElement/src/foundation-element/foundation-element.js

Fields

NamePrivacyTypeDefaultDescriptionInherited From
$presentationpublicComponentPresentation or nullA property which resolves the ComponentPresentation instance for the current component.FoundationElement
templatepublicElementViewTemplate or void or nullSets 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
stylespublicElementStyles or void or nullSets 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

NamePrivacyDescriptionParametersReturnInherited From
slottedBreadcrumbItemsChangedpublic
templateChangedprotectedvoidFoundationElement
stylesChangedprotectedvoidFoundationElement

CSS Parts

NameDescription
listThe element wrapping the slotted items

Slots

NameDescription
The default slot for the breadcrumb items

class: BreadcrumbItem

Superclass

NameModulePackage
Anchor/src/anchor/anchor.js

Fields

NamePrivacyTypeDefaultDescriptionInherited From
downloadpublicstringPrompts the user to save the linked URL. See <a> element for more information.Anchor
hrefpublicstringThe URL the hyperlink references. See <a> element for more information.Anchor
hreflangpublicstringHints at the language of the referenced resource. See <a> element for more information.Anchor
pingpublicstringSee <a> element for more information.Anchor
referrerpolicypublicstringSee <a> element for more information.Anchor
relpublicstringSee <a> element for more information.Anchor
targetpublic"_self" or "_blank" or "_parent" or "_top"See <a> element for more information.Anchor
typepublicstringSee <a> element for more information.Anchor
controlpublicHTMLAnchorElementReferences the root elementAnchor
$presentationpublicComponentPresentation or nullA property which resolves the ComponentPresentation instance for the current component.FoundationElement
templatepublicElementViewTemplate or void or nullSets 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
stylespublicElementStyles or void or nullSets 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

NamePrivacyDescriptionParametersReturnInherited From
templateChangedprotectedvoidFoundationElement
stylesChangedprotectedvoidFoundationElement

Attributes

NameFieldInherited From
downloaddownloadAnchor
hrefhrefAnchor
hreflanghreflangAnchor
pingpingAnchor
referrerpolicyreferrerpolicyAnchor
relrelAnchor
targettargetAnchor
typetypeAnchor

Additional resources