Edit this page
[?] Component size, gzipped: 25kb

Breadcrumbs

The Breadcrumbs component is secondary navigation scheme that reveals the user’s location in an application.

Examples

This is the recommended approach where SEO/Accessibility is important.

Overrides

Additionally, you can fully customize any part of the Breadcrumbs through the overrides prop. The Breadcrumbs consists of multiple subcomponents that are listed bellow and you can override each one of them. To help you identify the names of these subcomponents, you can highlight them through this selector:

Note: You should always use longhand CSS properties. Mixing shorthands and longhands will lead into strange behaviors!

API

children import

react.Node

overrides object = {}

Root { component: ?ComponentType<<T> & { children: Node }>, props: ?{} | ({}) => ?{}, style: ?{} | ({}) => ?{} }<<T>> | ComponentType<<T> & { children: Node }>*
Separator { component: ?ComponentType<<T> & { children: Node }>, props: ?{} | ({}) => ?{}, style: ?{} | ({}) => ?{} }<<T>> | ComponentType<<T> & { children: Node }>*
List { component: ?ComponentType<<T> & { children: Node }>, props: ?{} | ({}) => ?{}, style: ?{} | ({}) => ?{} }<<T>> | ComponentType<<T> & { children: Node }>*
ListItem { component: ?ComponentType<<T> & { children: Node }>, props: ?{} | ({}) => ?{}, style: ?{} | ({}) => ?{} }<<T>> | ComponentType<<T> & { children: Node }>*
Icon { component: ?ComponentType<<T> & { children: Node }>, props: ?{} | ({}) => ?{}, style: ?{} | ({}) => ?{} }<<T>> | ComponentType<<T> & { children: Node }>*

ariaLabel string

You can import this module like so:

import {Breadcrumbs} from 'baseui/breadcrumbs'

It exports the following components or utility functions:

  • Breadcrumbs
  • StyledRoot
  • StyledList
  • StyledListItem
  • StyledSeparator