Breadcrumb.md

Breadcrumb FluentUI spec

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.

Prior Art/Examples

• Ant Design
• Bootstrap
• Auth0
• Atlas Kit
• Carbon
• Fabric
• Lightning
• Semantic UI
• Material

API

Props

<Breadcrumb> Properties

Property Name	Type	Default Value	Description
size	enum	medium	The Breadcrumb size

<Breadcrumb.Divider> Properties

Property Name	Type	Default Value	Description
content	ShorthandValue	/	The content to be rendered as boundary for the items

Slots

Name	Considerations
root	container for elements

Proposed React structure

Public usage

<Breadcrumb>
  <Breadcrumb.Item />
  <Breadcrumb.Divider />
  <Breadcrumb.Item />
</Breadcrumb>

Internal representation

const Breadcrumb = () => (
  <nav role="navigation" class="breadcrumb-ui" aria-label="...">
    <div role="list">{children}</div>
  </nav>
);

const BreadcrumbItem = () => <div role="listitem">{children}</div>;

const BreadcrumbDivider = () => <span aria-hidden="true">{children}</span>;

Breadcrumb will support only children api.

DOM structure

<nav id="breadcrumb" class="breadcrumb-ui" aria-label="Breadcrumb">
  <div role="list">
    <div role="listitem" class="breadcrumb-ui__item"></div>
    <span aria-hidden="true" class="breadcrumb-ui__divider"></span>
    <div role="listitem" class="breadcrumb-ui__item"></div>
  </div>
</nav>

Screenreader accessibility:

• aria-label or aria-labelledby should be used in the root nav element to represent the breadcrumb trail making it a easy to locate navigation landmark.
• The link to the current page has aria-current set to page. If the element representing the current page is not a link, aria-current is optional.

Keyboard interaction

The following is a set of keys that interact with the Link component:

Key	Description
tab	Navigates between breadcrumb items.