Breadcrumb

Shows where users are in the application.

Simple Breadcrumb

Change Behaviour

By setting the showOnlyPreviousStep property to true you can change the breadcrumb's behaviour to show only the previous step to work similar to the back button in small devices.

API

Learn more about the properties and the customization points.

Usage

import Breadcrumb, { BreadcrumbItem } from "@sonnat/ui/Breadcrumb";

//or
import { Breadcrumb, BreadcrumbItem } from "@sonnat/ui";

Properties

Note that the documentation avoids mentioning all the native props (there are a lot) in this section of the components.

Breadcrumb Properties

Breadcrumb Properties
Name	Type	Default	Description
children	node	-	The content of the breadcrumb. The breadcrumb component only accepts `Breadcrumb/Item` component as a child.
className	string	-	Append to the class names applied to the component so you can override or extend the styles.
showOnlyPreviousStep	boolean	false	If `true`, the breadcrumb will only show the previous step. (It's useful when rendering on mobile devices)
The `ref` is forwarded to the root element. Any other properties supplied will be provided to the root element.

Breadcrumb/Item Properties

Breadcrumb/Item Properties
Name	Type	Default	Description
children	node	-	The content of the breadcrumb item.
className	string	-	Append to the class names applied to the component so you can override or extend the styles.
The `ref` is forwarded to the root element. Any other properties supplied will be provided to the root element.