Skin CSS Framework

Main Navigation
CSS Components
Guides
  • Archive (v19.5.2)
  • Repo
  • Storybook
  • Sitemap
  • Accordion
  • Alert Dialog
  • Avatar
  • Badge
  • Breadcrumbs
  • Button
  • Calendar
  • Carousel
  • Ccd
  • Chart Legend
  • Checkbox
  • Chip
  • Chips Combobox
  • Combobox
  • Confirm Dialog
  • Cta Button
  • Date Textbox
  • Details
  • Donut Chart
  • Education Notice
  • Eek
  • Field
  • File Input
  • File Preview Card Group
  • File Preview Card
  • Filter Button
  • Filter Input
  • Filter Menu Button
  • Filter Menu
  • Flag
  • Floating Label
  • Global
  • Icon Button
  • Icon
  • Image Placeholder
  • Infotip
  • Inline Notice
  • Item Tile Group
  • Item Tile
  • Layout Grid
  • Less
  • Lightbox Dialog
  • Link
  • List
  • Listbox Button
  • Listbox
  • Marketsans
  • Menu Button
  • Menu
  • Number Input
  • Page Grid
  • Page Notice
  • Pagination
  • Panel Dialog
  • Phone Input
  • Progress Bar Expressive
  • Progress Bar
  • Progress Spinner
  • Progress Stepper
  • Radio
  • Section Notice
  • Section Title
  • Segmented Buttons
  • Select
  • Signal
  • Skeleton
  • Snackbar Dialog
  • Split Button
  • Star Rating Select
  • Star Rating
  • Svg
  • Switch
  • Table
  • Tabs
  • Textbox
  • Toast Dialog
  • Toggle Button Group
  • Toggle Button
  • Tokens
  • Tooltip
  • Tourtip
  • Typography
  • Utility
  • Page Grid Use Guide
  • Skeleton Use Guide
  • Animation Guide
  • Archive (v19.5.2)
  • Repo
  • Storybook

CSS Components

  • Accordion
  • Alert Dialog
  • Avatar
  • Badge
  • Breadcrumbs
  • Button
  • Calendar
  • Carousel
  • Ccd
  • Chart Legend
  • Checkbox
  • Chip
  • Chips Combobox
  • Combobox
  • Confirm Dialog
  • Cta Button
  • Date Textbox
  • Details
  • Donut Chart
  • Education Notice
  • Eek
  • Field
  • File Input
  • File Preview Card Group
  • File Preview Card
  • Filter Button
  • Filter Input
  • Filter Menu Button
  • Filter Menu
  • Flag
  • Floating Label
  • Global
  • Icon Button
  • Icon
  • Image Placeholder
  • Infotip
  • Inline Notice
  • Item Tile Group
  • Item Tile
  • Layout Grid
  • Less
  • Lightbox Dialog
  • Link
  • List
  • Listbox Button
  • Listbox
  • Marketsans
  • Menu Button
  • Menu
  • Number Input
  • Page Grid
  • Page Notice
  • Pagination
  • Panel Dialog
  • Phone Input
  • Progress Bar Expressive
  • Progress Bar
  • Progress Spinner
  • Progress Stepper
  • Radio
  • Section Notice
  • Section Title
  • Segmented Buttons
  • Select
  • Signal
  • Skeleton
  • Snackbar Dialog
  • Split Button
  • Star Rating Select
  • Star Rating
  • Svg
  • Switch
  • Table
  • Tabs
  • Textbox
  • Toast Dialog
  • Toggle Button Group
  • Toggle Button
  • Tokens
  • Tooltip
  • Tourtip
  • Typography
  • Utility

Guides

  • Page Grid Use Guide
  • Skeleton Use Guide
  • Animation Guide

@ebay/skin/breadcrumbs

DS v1.2

Breadcrumbs are a navigational landmark that let the user discover their current position in the site hierarchy and provide a means to navigate upwards through that hierarchy.

Typically, the last breadcrumb is the current page, therefore that link's href attribute is not relevant and can be removed.

You are here

  • ebay
  • Cell Phones, Smart Watches & Accessories
  • Smart Watch Accessories
  • Smart Watch Bands

If the last breadcrumb is not the current page, then that link must have a valid href.

You are here

  • ebay
  • Cell Phones, Smart Watches & Accessories
  • Smart Watch Accessories

Anchor tags can be replaced with buttons if the hierarchy is not intended to be deep linkable . This is a rare & unlikely scenario - therefore please exercise caution!

Long Breadcrumbs with Overflows

Long breadcrumbs can arise due to any combination of small screen sizes, large category names and language translations. In these situations the breadcrumbs will need to get an overflow treatment in the second node with an overflow button and menu items.

If there are 4 or more nodes for breadcrumbs, an overflow on node 2 should be used instead of various additional nodes between that node and the final one. The list of items in the overflow menu should include content from node 2 until last node minus 2 nodes so that there are always 4 nodes on screen including the overflow button node. You cannot show more than 3 breadcrumbs + overflow, or 4 breadcrumbs. The minimum amount to show is 1 leading item, overflow, and the current page you are on.

Additionally, to account for smaller screens, there is a maximum width limit on each node label. Please check the CSS for details (not specified here intentionally to avoid doc/code misalignment).

You are here

  • ebay
    • Cell Phones, Smart Watches & Accessories
    • Smart Watch Accessories
    • Smart Watch Bands
  • Smart Watch Band Long Band Text Type 2
  • Current Band
  • Archive (v19.5.2)
  • Repo
  • Storybook
  • Sitemap
Copyright © 2025 eBay, Inc. All rights reserved.
<nav
  aria-labelledby="breadcrumbs-heading"
  class="breadcrumbs"
  role="navigation"
>
  <h2 id="breadcrumbs-heading" class="clipped">You are here</h2>
  <ul>
    <li>
      <a href="https://www.ebay.com/"> ebay </a>
      <svg class="icon icon--12" height="8" width="8" aria-hidden="true">
        <use href="#icon-chevron-right-12" />
      </svg>
    </li>
    <li>
      <a href="https://www.ebay.com/rpp/cell-phone-pda">
        Cell Phones, Smart Watches &amp; Accessories
      </a>
      <svg class="icon icon--12" height="8" width="8" aria-hidden="true">
        <use href="#icon-chevron-right-12" />
      </svg>
    </li>
    <li>
      <a
        href="https://www.ebay.com/b/Smart-Watch-Accessories/182064/bn_16565905"
      >
        Smart Watch Accessories
      </a>
    </li>
  </ul>
</nav>
<nav
  aria-labelledby="breadcrumbs-heading"
  class="breadcrumbs"
  role="navigation"
>
  <h2 id="breadcrumbs-heading" class="clipped">You are here</h2>
  <ul>
    <li>
      <a href="https://www.ebay.com/"> ebay </a>
      <svg class="icon icon--12" height="8" width="8" aria-hidden="true">
        <use href="#icon-chevron-right-12" />
      </svg>
    </li>
    <li>
      <a href="https://www.ebay.com/rpp/cell-phone-pda">
        Cell Phones, Smart Watches &amp; Accessories
      </a>
      <svg class="icon icon--12" height="8" width="8" aria-hidden="true">
        <use href="#icon-chevron-right-12" />
      </svg>
    </li>
    <li>
      <a
        href="https://www.ebay.com/b/Smart-Watch-Accessories/182064/bn_16565905"
      >
        Smart Watch Accessories
      </a>
      <svg class="icon icon--12" height="8" width="8" aria-hidden="true">
        <use href="#icon-chevron-right-12" />
      </svg>
    </li>
    <li>
      <a aria-current="location"> Smart Watch Bands </a>
    </li>
  </ul>
</nav>
<nav
  aria-labelledby="breadcrumbs-heading"
  class="breadcrumbs breadcrumb--overflow"
  role="navigation"
>
  <h2 id="breadcrumbs-heading" class="clipped">You are here</h2>
  <ul>
    <li>
      <a href="https://www.ebay.com/"> ebay </a>
      <svg class="icon icon--12" height="8" width="8" aria-hidden="true">
        <use href="#icon-chevron-right-12" />
      </svg>
    </li>
    <li>
      <span class="fake-menu-button">
        <button
          class="fake-menu-button__button icon-btn"
          aria-expanded="false"
          aria-haspopup="true"
          aria-label="eBay Menu"
          type="button"
        >
          <svg aria-hidden="true" class="icon icon--16">
            <use href="#icon-overflow-horizontal-16" />
          </svg>
        </button>
        <ul class="fake-menu-button__menu">
          <li>
            <a
              class="fake-menu-button__item"
              href="https://www.ebay.com/rpp/cell-phone-pda"
            >
              Cell Phones, Smart Watches &amp; Accessories
            </a>
          </li>
          <li>
            <a
              class="fake-menu-button__item"
              href="https://www.ebay.com/b/Smart-Watch-Accessories/182064/bn_16565905"
            >
              Smart Watch Accessories
            </a>
          </li>
          <li>
            <a
              class="fake-menu-button__item"
              href="https://www.ebay.com/b/Smart-Watch-Bands/182068/bn_16565906"
            >
              Smart Watch Bands
            </a>
          </li>
        </ul>
      </span>
      <svg class="icon icon--12" height="8" width="8" aria-hidden="true">
        <use href="#icon-chevron-right-12" />
      </svg>
    </li>
    <li>
      <a
        href="https://www.ebay.com/b/Smart-Watch-Bands/182068/bn_16565906/Some-Random-Watch-Pand2"
      >
        Smart Watch Band Long Band Text Type 2
      </a>
      <svg class="icon icon--12" height="8" width="8" aria-hidden="true">
        <use href="#icon-chevron-right-12" />
      </svg>
    </li>
    <li>
      <a aria-current="location"> Current Band </a>
    </li>
  </ul>
</nav>