Sprout Social

Components

Breadcrumb

View on GitHub

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?
children
React.ReactNode
ariaLabel
string
Description of the type of navigation being provided by the breadcrumb (i.e. "Asset library breadcrumb")
overflow
{ label: string; menu: React.ReactNode; }
optional

Subcomponents

Breadcrumb Item

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

NameTypeDefaultDescriptionRequired?
external
boolean
Optional prop to make the URL open in a new tab
children
React.ReactNode
href
string
Setting this prop will cause the component to be rendered as a link
disabled
boolean
Disables user action and applies a disabled style to the component
onClick
(e: React.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"]
underline
boolean
true
qa
{ [key: string]: unknown }
{}

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>

    </>

  )

}