LBD Components

lbd-breadcrumb

A Web Component for creating accessible breadcrumbs

WAI-ARIA Authoring Practices

Examples

General usage example:

<script type="module" src="lbd-breadcrumb.js"></script>

<lbd-breadcrumb>
  <ol>
    <li>
      <a href="/">Home</a>
    </li>
    <li>
      <a href="/profile">Profile</a>
    </li>
    <li>
      <a href="/profile/settings">Settings</a>
    </li>
    <li>
      <a href="profile/settings/account">Account</a>
    </li>
  </ol>
</lbd-breadcrumb>

Features

This Web Component allows you to:

Installation

You have a few options (choose one of these):

  1. Install via npm: npm install @lunchbreakdev/lbd-breadcrumb
  2. Download the source manually from GitHub into your project.
  3. Skip this step and use the script directly via a 3rd party CDN (not recommended for production use)

Demo

  1. Home
  2. Profile
  3. Settings
  4. Account

Changelog

Edit this page