Breadcrumb

Use cases:

• Breadcrumb trail navigation.

Example

Breadcrumb item 1Breadcrumb item 2Breadcrumb item 3

Genesis

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

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

export function MyComponent() {
  return (
    <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>
  );
}

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

Property and attribute binding examples for Genesis Component syntax. Closing tag omitted.

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

Property and attribute binding examples for Genesis Component syntax. Closing tag omitted.

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.