Skip to main content

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
Result
SyntaxError: Unexpected token (1:8)
1 : return ()
            ^

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.

Additional resources#