Breadcrumb

A breadcrumb provides links back to previous pages which the user navigated through. Typically, this useful in a hierarchic structure, where the user can see the current page and the pages further up the structure.

Use cases:

• informing users where they are within a structure

Example

This example shows three items in the hierarchy, with the current page highlighted and two further items higher in the structure. (These links are not active in the example.)

Breadcrumb item 1Breadcrumb item 2Breadcrumb item 3

React

Declaration

<rapid-breadcrumb>
  <rapid-breadcrumb-item href="#">Breadcrumb item 1</rapid-breadcrumb-item>
  <rapid-breadcrumb-item href="#">Breadcrumb item 2</rapid-breadcrumb-item>
  <rapid-breadcrumb-item>Breadcrumb item 3</rapid-breadcrumb-item>
</rapid-breadcrumb>

Usage

@customElement({
  name: 'my-element',
  template: html`
    <rapid-breadcrumb>
      <rapid-breadcrumb-item href="#">Breadcrumb item 1</rapid-breadcrumb-item>
      <rapid-breadcrumb-item href="#">Breadcrumb item 2</rapid-breadcrumb-item>
      <rapid-breadcrumb-item>Breadcrumb item 3</rapid-breadcrumb-item>
    </rapid-breadcrumb>
  `,
})
export class MyElement extends GenesisElement {
}

Genesis

Declaration

<Breadcrumb>
  <BreadcrumbItem href="#">Breadcrumb item 1</BreadcrumbItem>
  <BreadcrumbItem href="#">Breadcrumb item 2</BreadcrumbItem>
  <BreadcrumbItem>Breadcrumb item 3</BreadcrumbItem>
</Breadcrumb>

Usage

import { Breadcrumb, BreadcrumbItem } from '@genesislcap/rapid-design-system/react';

export function MyComponent() {
  return (
    <Breadcrumb>
      <BreadcrumbItem href="#">Breadcrumb item 1</BreadcrumbItem>
      <BreadcrumbItem href="#">Breadcrumb item 2</BreadcrumbItem>
      <BreadcrumbItem>Breadcrumb item 3</BreadcrumbItem>
    </Breadcrumb>
  );
}

Angular

Declaration

  <rapid-breadcrumb>
    <rapid-breadcrumb-item href="#">Breadcrumb item 1</rapid-breadcrumb-item>
    <rapid-breadcrumb-item href="#">Breadcrumb item 2</rapid-breadcrumb-item>
    <rapid-breadcrumb-item>Breadcrumb item 3</rapid-breadcrumb-item>
  </rapid-breadcrumb>

Usage

import { Component, CUSTOM_ELEMENTS_SCHEMA } from '@angular/core';
@Component({
  selector: 'my-root',
  template: `
    <rapid-breadcrumb>
      <rapid-breadcrumb-item href="#">Breadcrumb item 1</rapid-breadcrumb-item>
      <rapid-breadcrumb-item href="#">Breadcrumb item 2</rapid-breadcrumb-item>
      <rapid-breadcrumb-item>Breadcrumb item 3</rapid-breadcrumb-item>
    </rapid-breadcrumb>
  `,
  standalone: true,
  schemas: [CUSTOM_ELEMENTS_SCHEMA],
})
export class AppComponent {
}

Breadcrumb API

Attributes

This component doesn't have any attributes.

Properties

This component doesn't have any properties.

Slots

Name	Description
Default	Container for breadcrumb-items.

Parts

Part	Description
list	The list of all the breadcrumb items.

Events fired

This component doesn't fire any events.

Events listened to

This component doesn't listen to any events.

Breadcrumb Item API

This table shows attribute binding examples for Genesis Component syntax. The HTML closing tag is not included.

Attributes

Name	Type	Description	Example
href	string	The hyperlink text.	<rapid-breadcrumb-item href="someLink">

Properties

This component doesn't have any properties.

Slots

Slot	Description
separator	Used to change the separator between the breadcrumb items.

Parts

Part	Description
listItem	The breadcrumb item container.

Events fired

This component doesn't fire any events.

Events listened to

This component doesn't listen to any events.