Breadcrumb

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>

<Breadcrumb ariaLabel='breadcrumb'>
  <Breadcrumb.Item href='#'>Asset Library</Breadcrumb.Item>
  <Breadcrumb.Item href='#'>Beans</Breadcrumb.Item>
  <Breadcrumb.Item href='#'>Chicago</Breadcrumb.Item>
</Breadcrumb>

Properties

Name	Type	Description
`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

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

Name	Type	Default	Description
`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"`
`underline`	`boolean`
`qa`	`Object`	`{}`

Recipes

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>
    </>
  )
}

() => {
  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>
    </>
  )
}

Properties

Subcomponents

Breadcrumb Item

Recipes

Overflow Menu