@berlitz/breadcrumbs

Breadcrumbs component for the Max Design System

Usage no npm install needed!

<script type="module">
  import berlitzBreadcrumbs from 'https://cdn.skypack.dev/@berlitz/breadcrumbs';
</script>

README

Breadcrumbs npm version

Adds Breadcrumbs to a page

Installation

yarn add @berlitz/breadcrumbs

Props

Argument Type Required Description
children string / node ❌ Useful for adding a Home link as the first crumb
crumbs array ❌ Array of objects with labels and urls for crumbs
currentPage string ❌ Label for current page
link string ❌ Gatsby Link component
overlayColor string ❌ Colour used for mobile overflow overlay (should match background colour)
lightText bool ❌ Useful for checking crumb background and change text colour

Usage

import { Link } from 'gatsby'
import { Breadcrumbs, BreadcrumbItem } from '@berlitz/breadcrumbs'

const MyApp = () => (
  <Breadcrumbs
    crumbs={crumbs}
    currentPage="Current Page Title"
    link={Link}
    overlayColor="#FFF"
  >
    <BreadcrumbItem>
      <Link to="/">Home</a>
    </BreadcrumbItem>
  </Breadcrumbs>
)