@justeattakeaway/pie-breadcrumb NPM

@justeattakeaway/pie-breadcrumb

Source Code | Design Documentation | NPM

@justeattakeaway/pie-breadcrumb is a Web Component built using the Lit library. 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.

Installation
Documentation
Usage Examples
Questions and Support
Contributing

Installation

To install any of our web components in your application, we would suggest following the getting started guide to set up your project.

Ideally, you should install the component using the @justeattakeaway/pie-webc package, which includes all of the components. Or you can install the individual component package.

Documentation

Properties

`pie-breadcrumb` Properties

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` Properties

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.

CSS Variables

This component does not expose any CSS variables for style overrides.

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.

Usage 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'

<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>