Breadcrumb

A breadcrumb displays the user’s current location within a sequence of pages and enables them to navigate backwards through it.

Overview

pie-breadcrumb is a Web Component built using Lit. It offers a simple and accessible breadcrumb navigation component for web applications. The component exports a sub-component called pie-breadcrumb-item which is used to create individual items within the breadcrumb.

This component can be easily integrated into various frontend frameworks and customised through a set of properties.

Installation

To install pie-breadcrumb in your application, run the following on your command line:

npm i @justeattakeaway/pie-webc

yarn add @justeattakeaway/pie-webc

Props

`pie-breadcrumb` Props

Prop	Options	Description	Default
variant	`"default"` `"scrim"`	Sets the variant of the breadcrumb.	`"default"`
isCompact	`true` `false`	If true, renders a compact variation of the breadcrumb.	`false`
hideCurrentPage	`true` `false`	If true, hides the current page of the breadcrumb (last item).	`false`

`pie-breadcrumb-item` Props

Prop	Options	Description	Default
href	`string`	The URL that the breadcrumb item links to.	`undefined`
target	`string`	Where to display the linked URL such as `"_self"`, `"_blank"`, `"_parent"`, or `"_top"`.	`undefined`

Slots

Component	Slot	Description
`pie-breadcrumb`	`default`	The default slot is used to pass `pie-breadcrumb-item` elements into the breadcrumb component.
`pie-breadcrumb-item`	`default`	The default slot is used to pass text into the breadcrumb item.

Events

This component does not emit any custom events. In order to add event listening to this component, you can treat it like a native HTML element in your application.

Examples

For HTML:

// import as module into a js file e.g. main.js
import '@justeattakeaway/pie-webc/components/breadcrumb.js'
import '@justeattakeaway/pie-webc/components/breadcrumb-item.js'

<!-- pass js file into <script> tag -->
<pie-breadcrumb>
  <pie-breadcrumb-item href="/">Home</pie-breadcrumb-item>
  <pie-breadcrumb-item href="/category">Category</pie-breadcrumb-item>
  <pie-breadcrumb-item>Current Page</pie-breadcrumb-item>
</pie-breadcrumb>
<script type="module" src="/main.js"></script>

For Native JS Applications, Vue, Angular, Svelte etc.:

// Vue templates (using Nuxt 3)
import '@justeattakeaway/pie-webc/components/breadcrumb.js';
import '@justeattakeaway/pie-webc/components/breadcrumb-item.js';

<pie-breadcrumb>
  <pie-breadcrumb-item href="/">Home</pie-breadcrumb-item>
  <pie-breadcrumb-item href="/category">Category</pie-breadcrumb-item>
  <pie-breadcrumb-item>Current Page</pie-breadcrumb-item>
</pie-breadcrumb>

For React Applications:

import { PieBreadcrumb } from '@justeattakeaway/pie-webc/react/breadcrumb.js';
import { PieBreadcrumbItem } from '@justeattakeaway/pie-webc/react/breadcrumb-item.js';

<PieBreadcrumb>
  <PieBreadcrumbItem href="/">Home</PieBreadcrumbItem>
  <PieBreadcrumbItem href="/category">Category</PieBreadcrumbItem>
  <PieBreadcrumbItem>Current Page</PieBreadcrumbItem>
</PieBreadcrumb>