Breadcrumbs

The BreadcrumbsItem component is a navigational item

Overview

The BreadcrumbsItem component is a navigational item that allows users to quickly ascend a page tree.

The Breadcrumb Component.ShipsReports22nd April 2019Home

Usage

The BreadcrumbsItem component should sit at the top of the viewport. Visit the Design Hierarchy & Placement section for more information.

Anatomy

ShipsReports22nd April 2019HomeAnatomy of the Breadcrumb component.
  1. Parent Link. The parent link is a clickable action that will navigate the user to the parent page.
  2. Current Page Label. The current page is a label displaying the current page title. It is not clickable.

Sizing & Spacing

The BreadcrumbsItem component has one standard text size. Be careful with horizontal placement, as the BreadcrumbsItem can take up a large amount of screen space displaying all the parent links.

States

ShipsReports22nd April 2019HomeShipsReports22nd April 2019HomeThe Breadcrumb States.

When hovering on a Breadcrumb, the active link will change to the primary colour. Every child to the right of the hovered link will fade to help indicate the target page to the user.

Hierarchy & Placement

There should only be one BreadcrumbsItem component per page. It should sit at the top of the viewport and be easily accessible for the user. The component is a top level navigational item used to help the user navigate whole pages, rather than a subset section inside another component.

The Breadcrumbs component accepts an array of links, including the current page title and href. Like the Nav component the Breadcrumbs component will render regular links by default. However, if you pass a Component property with a link you can specify the component to render it and send the properties it needs, such as a Gatsby Link component that will require to instead of href.

Basic Usage

Simply passing a Link with href will cause regular anchor tag to be rendered for a Breadcrumb.

<Breadcrumbs>
  <BreadcrumbsItem  link={<Link href="/">Home</Link>} />
  <BreadcrumbsItem  link={<Link href="/components">Components</Link>} />
  <BreadcrumbsItem  link={<Link href="/components/breadcrumb">Breadcrumb</Link>} />
</Breadcrumbs>

Usage with React Router

Applications will often use a library such as React Router to generate links between sections of a site. In this case you can specify the Component that will render the link, along with the properties it needs. In this example the Link component will be generated with the label as its child.

import { Link } from "react-router-dom"

<Breadcrumbs>
  <BreadcrumbsItem  link={<Link to="/">Home</Link>} />
  <BreadcrumbsItem  link={<Link to="/components">Components</Link>} />
  <BreadcrumbsItem  link={<Link to="/components/breadcrumb">Breadcrumb</Link>} />
</Breadcrumbs>

Properties

Breadcrumbs
NameTypeRequiredDefaultDescription
childrenReact.ReactElement<BreadcrumbProps>[]Truen/aAn array of BreadcrumbsItem components.
classNamestringFalsen/aOptional additional CSS class to associate with the component wrapper

Breadcrumb
NameTypeRequiredDefaultDescription
linkReact.ReactElementTruen/aThe component to be used for the link. Typically this would be a Link from the component library. It could also be a Link from react-router-dom.