Components
Breadcrumb
Breadcrumbs are used for navigating content in parent-child relationships within pages or overlays. They provide context for where users are in a nested hierarchy.
import { Breadcrumb } from '@sproutsocial/racine'
Properties
Name | Type | Default | Description | Required? |
---|---|---|---|---|
children | React.Node | |||
ariaLabel | string | Description of the type of navigation being provided by the breadcrumb (i.e. "Asset library breadcrumb") | ||
overflow | {
label: string,
menu: React.Node,
} | optional |
Subcomponents
Breadcrumb Item
Breadcrumbs should have 2 plus breadcrumb items. The <Breadcrumb.Item>
subcomponent renders a list item with a <Link/>
.
Name | Type | Default | Description | Required? |
---|---|---|---|---|
external | boolean | Optional prop to make the URL open in a new tab | ||
children | React.Node | |||
href | string | |||
disabled | boolean | Disables user action and applies a disabled style to the component | ||
onClick | (e: SyntheticEvent<HTMLButtonElement>) => void | Setting this prop will cause the component to be rendered as a button instead of an anchor) | ||
as | TypeStyledComponentsCommonProps "as" | |||
qa | Object | {} |
Recipes
Overflow Menu
When you expect the possibility of a really long (or endless) breadcrumb, use the overflow menu property to avoid having a breadcrumb that wraps into multiple lines.
Mild Roast