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