@fluentui/react-breadcrumb

@fluentui/react-breadcrumb

React Breadcrumb components for Fluent UI React

Breadcrumbs should be used as a navigational aid in your app or site. They indicate the current page's location within a hierarchy and help the user understand where they are in relation to the rest of that hierarchy.

Usage

To import React Breadcrumb components:

import {
  Breadcrumb,
  BreadcrumbItem,
  BreadcrumbButton,
  BreadcrumbDivider,
  BreadcrumbProps
} from "@fluentui/react-components';

Simple example of Breadcrumb Usage:

import { Breadcrumb, BreadcrumbItem, BreadcrumbDivider } from '@fluentui/react-breadcrumb';

export const App = () => (
  <Breadcrumb aria-label="breadcrumb">
    <BreadcrumbItem>Item 1</BreadcrumbItem>
    <BreadcrumbDivider />
    <BreadcrumbItem>Item 2</BreadcrumbItem>
    <BreadcrumbDivider />
    <BreadcrumbItem current={true}>Item 3</BreadcrumbItem>
  </Breadcrumb>
);

Specification

See the Spec.md file for background information on the design/engineering decisions of the component.

API

For information about the components, please refer to the API documentation.