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

System props

System props apply standard sets of properties to a component that can be used to alter its appearance on the fly.

NameTypeDefaultDescriptionRequired?
childrenReact.Node
ariaLabelstring
Description of the type of navigation being provided by the breadcrumb (i.e. "Asset library breadcrumb")

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
disabledboolean
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)
asTypeStyledComponentsCommonProps"as"
qaObject{}