webawesome/docs/docs/components/breadcrumb.md

title, description, tags, icon

title	description	tags	icon
Breadcrumb	Breadcrumbs provide a group of links so users can easily navigate a website's hierarchy.	navigation	breadcrumb

Breadcrumbs are usually placed before a page's main content with the current page shown last to indicate the user's position in the navigation.

<wa-breadcrumb>
  <wa-breadcrumb-item>Catalog</wa-breadcrumb-item>
  <wa-breadcrumb-item>Clothing</wa-breadcrumb-item>
  <wa-breadcrumb-item>Women's</wa-breadcrumb-item>
  <wa-breadcrumb-item>Shirts &amp; Tops</wa-breadcrumb-item>
</wa-breadcrumb>

Examples

Breadcrumb Links

By default, breadcrumb items are rendered as buttons so you can use them to navigate single-page applications. In this case, you'll need to add event listeners to handle clicks.

For websites, you'll probably want to use links instead. You can make any breadcrumb item a link by applying an href attribute to it. Now, when the user activates it, they'll be taken to the corresponding page — no event listeners required.

<wa-breadcrumb>
  <wa-breadcrumb-item href="https://example.com/home">Homepage</wa-breadcrumb-item>

  <wa-breadcrumb-item href="https://example.com/home/services">Our Services</wa-breadcrumb-item>

  <wa-breadcrumb-item href="https://example.com/home/services/digital">Digital Media</wa-breadcrumb-item>

  <wa-breadcrumb-item href="https://example.com/home/services/digital/web-design">Web Design</wa-breadcrumb-item>
</wa-breadcrumb>

Prefixes

Use the prefix slot to add content before any breadcrumb item.

<wa-breadcrumb>
  <wa-breadcrumb-item>
    <wa-icon slot="prefix" name="house" variant="solid"></wa-icon>
    Home
  </wa-breadcrumb-item>
  <wa-breadcrumb-item>Articles</wa-breadcrumb-item>
  <wa-breadcrumb-item>Traveling</wa-breadcrumb-item>
</wa-breadcrumb>

Suffixes

Use the suffix slot to add content after any breadcrumb item.

<wa-breadcrumb>
  <wa-breadcrumb-item>Documents</wa-breadcrumb-item>
  <wa-breadcrumb-item>Policies</wa-breadcrumb-item>
  <wa-breadcrumb-item>
    Security
    <wa-icon slot="suffix" name="shield" variant="solid"></wa-icon>
  </wa-breadcrumb-item>
</wa-breadcrumb>

Custom Separators

Use the separator slot to change the separator that goes between breadcrumb items. Icons work well, but you can also use text or an image.

<wa-breadcrumb>
  <wa-icon slot="separator" name="angles-right" variant="solid"></wa-icon>
  <wa-breadcrumb-item>First</wa-breadcrumb-item>
  <wa-breadcrumb-item>Second</wa-breadcrumb-item>
  <wa-breadcrumb-item>Third</wa-breadcrumb-item>
</wa-breadcrumb>

<br />

<wa-breadcrumb>
  <wa-icon slot="separator" name="arrow-right" variant="solid"></wa-icon>
  <wa-breadcrumb-item>First</wa-breadcrumb-item>
  <wa-breadcrumb-item>Second</wa-breadcrumb-item>
  <wa-breadcrumb-item>Third</wa-breadcrumb-item>
</wa-breadcrumb>

<br />

<wa-breadcrumb>
  <span slot="separator">/</span>
  <wa-breadcrumb-item>First</wa-breadcrumb-item>
  <wa-breadcrumb-item>Second</wa-breadcrumb-item>
  <wa-breadcrumb-item>Third</wa-breadcrumb-item>
</wa-breadcrumb>

Custom Colors

Breadcrumb labels match the color set on <wa-breadcrumb-item>. Prefixes, suffixes, and separators can be styled using CSS parts.

<style>
  .redcrumbs wa-breadcrumb-item {
    color: firebrick;
  }
  .redcrumbs wa-breadcrumb-item:last-of-type {
    color: crimson;
  }
  .redcrumbs wa-breadcrumb-item::part(separator) {
    color: pink;
  }
  .redcrumbs wa-breadcrumb-item::part(prefix),
  .redcrumbs wa-breadcrumb-item::part(suffix) {
    color: currentColor;
  }
</style>
<wa-breadcrumb class="redcrumbs">
  <wa-breadcrumb-item>
    <wa-icon slot="prefix" name="house" variant="solid"></wa-icon>
    Home
  </wa-breadcrumb-item>
  <wa-breadcrumb-item>Articles</wa-breadcrumb-item>
  <wa-breadcrumb-item>Traveling</wa-breadcrumb-item>
</wa-breadcrumb>

With Dropdowns

Dropdown menus can be placed in the default slot to provide additional options.

<wa-breadcrumb>
  <wa-breadcrumb-item>Homepage</wa-breadcrumb-item>
  <wa-breadcrumb-item>
    <wa-dropdown>
      <wa-button slot="trigger" size="small" appearance="filled" pill>
        <wa-icon label="More options" name="ellipsis" variant="solid"></wa-icon>
      </wa-button>
      <wa-menu>
        <wa-menu-item type="checkbox" checked>Web Design</wa-menu-item>
        <wa-menu-item type="checkbox">Web Development</wa-menu-item>
        <wa-menu-item type="checkbox">Marketing</wa-menu-item>
      </wa-menu>
    </wa-dropdown>
  </wa-breadcrumb-item>
  <wa-breadcrumb-item>Our Services</wa-breadcrumb-item>
  <wa-breadcrumb-item>Digital Media</wa-breadcrumb-item>
</wa-breadcrumb>

Alternatively, you can place dropdown menus in a prefix or suffix slot.

<wa-breadcrumb>
  <wa-breadcrumb-item>Homepage</wa-breadcrumb-item>
  <wa-breadcrumb-item>Our Services</wa-breadcrumb-item>
  <wa-breadcrumb-item>Digital Media</wa-breadcrumb-item>
  <wa-breadcrumb-item>
    Web Design
    <wa-dropdown slot="suffix">
      <wa-button slot="trigger" size="small" appearance="filled" pill>
        <wa-icon label="More options" name="ellipsis" variant="solid"></wa-icon>
      </wa-button>
      <wa-menu>
        <wa-menu-item type="checkbox" checked>Web Design</wa-menu-item>
        <wa-menu-item type="checkbox">Web Development</wa-menu-item>
        <wa-menu-item type="checkbox">Marketing</wa-menu-item>
      </wa-menu>
    </wa-dropdown>
  </wa-breadcrumb-item>
</wa-breadcrumb>