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'
<Breadcrumb ariaLabel='breadcrumb'>
<Breadcrumb.Item href='#'>Asset Library</Breadcrumb.Item>
<Breadcrumb.Item href='#'>Beans</Breadcrumb.Item>
<Breadcrumb.Item href='#'>Chicago</Breadcrumb.Item>
</Breadcrumb>

Properties

NameTypeDefaultDescriptionRequired?
childrenReact.Node
ariaLabelstring
Description of the type of navigation being provided by the breadcrumb (i.e. "Asset library breadcrumb")
overflow{ label: string, menu: React.Node, }
optional

Subcomponents

Breadcrumbs should have 2 plus breadcrumb items. The <Breadcrumb.Item> subcomponent renders a list item with a <Link/>.

NameTypeDefaultDescriptionRequired?
externalboolean
Optional prop to make the URL open in a new tab
childrenReact.Node
hrefstring
Setting this prop will cause the component to be rendered as a link
disabledboolean
Disables user action and applies a disabled style to the component
onClick(e: SyntheticEvent<HTMLButtonElement>) => void
Can be used in addition to an href but still renders as a link. Omitting href will render as button
as
TypeStyledComponentsCommonProps
'as'
underlineboolean
qaObject{}

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.

() => {
const breadcrumb = [
"Asset Library",
"Coffee Shops",
"Midwest",
"Chicago",
"West Side",
"Humboldt Park",
"C.C. Ferns",
"Mild Roast"
];
const pathBreak = Math.round((breadcrumb.length - 1) / 3);
const BreadcrumbMenu = () => (
<Menu>
<Menu.Group>
{breadcrumb.length > 4
? breadcrumb
.slice(0, pathBreak)
.map((item) => <Menu.Item onClick={() => {}}>{item}</Menu.Item>)
: breadcrumb.map((item) => <Menu.Item onClick={() => {}}>{item}</Menu.Item>)}
</Menu.Group>
</Menu>
);
return (
<>
<Text fontWeight='bold' fontSize={300}>Mild Roast</Text>
<Breadcrumb
overflowLabel="Asset Library's Breadcrumbs Overflow Menu"
ariaLabel="breadcrumb"
overflow={{
label: "Asset Library's Breadcrumbs Overflow Menu",
menu: <BreadcrumbMenu />,
}}
>
{breadcrumb.length > 4
? breadcrumb
.slice(pathBreak, breadcrumb.length)
.map((item) => <Breadcrumb.Item href="#">{item}</Breadcrumb.Item>)
: breadcrumb.map((item) => <Breadcrumb.Item href="#">{item}</Breadcrumb.Item>)}
</Breadcrumb>
</>
)
}