Breadcrumb component in Office UI Fabric

In Office Add-ins, use breadcrumbs for navigation. They show the current page’s location in a hierarchy, and help users understand where they are in relation to the rest of the hierarchy. Additionally, breadcrumbs provide one-click navigation to higher levels in the hierarchy.

Example: Breadcrumb in a task pane

An image showing the breadcrumb

Best practices

Do Don't
Place breadcrumbs at the top of a layout in an add-in, above a list of items, or above the main content of a layout.

Do Breadcrumb image
Don’t use breadcrumbs as the primary way to navigate to other pages.

Don't Breadcrumb image


For details, see Breadcrumb and Getting started with Fabric React code sample.

See also