Breadcrumb

A navigation component that shows the user's location in a site's hierarchy. Breadcrumbs help users understand where they are and navigate to parent pages.

Installation

npx @zizigy/capsule add Breadcrumb

Usage

Basic Breadcrumb

<capsule-breadcrumb>
  <capsule-breadcrumb-item>
    <a href="#">Home</a>
  </capsule-breadcrumb-item>
  <capsule-breadcrumb-separator></capsule-breadcrumb-separator>
  <capsule-breadcrumb-item>
    <a href="#">Category</a>
  </capsule-breadcrumb-item>
  <capsule-breadcrumb-separator></capsule-breadcrumb-separator>
  <capsule-breadcrumb-item> Current Page </capsule-breadcrumb-item>
</capsule-breadcrumb>

With Ellipsis

<capsule-breadcrumb>
  <capsule-breadcrumb-item>
    <a href="#">Home</a>
  </capsule-breadcrumb-item>
  <capsule-breadcrumb-separator></capsule-breadcrumb-separator>
  <capsule-breadcrumb-ellipsis></capsule-breadcrumb-ellipsis>
  <capsule-breadcrumb-separator></capsule-breadcrumb-separator>
  <capsule-breadcrumb-item>
    <a href="#">Page 5</a>
  </capsule-breadcrumb-item>
  <capsule-breadcrumb-separator></capsule-breadcrumb-separator>
  <capsule-breadcrumb-item> Current Page </capsule-breadcrumb-item>
</capsule-breadcrumb>

Custom Separator

You can place any content inside , such as emoji, SVG, custom text, etc.

<capsule-breadcrumb-separator>➡️</capsule-breadcrumb-separator>
<!-- any content: Emoji, Icon, SVG, etc. -->
<capsule-breadcrumb-separator>
  <svg
    width="12"
    height="12"
  >
    <circle
      cx="6"
      cy="6"
      r="5"
      fill="#888"
    />
  </svg>
</capsule-breadcrumb-separator>

Components

The Breadcrumb component consists of several sub-components:

capsule-breadcrumb

The main container for breadcrumb items.

capsule-breadcrumb-item

A single breadcrumb item. Can contain links or plain text.

<capsule-breadcrumb-item>
  <a href="#">Link</a>
</capsule-breadcrumb-item>

capsule-breadcrumb-separator

A separator between breadcrumb items (typically /, >, emoji, SVG or any custom content).

<capsule-breadcrumb-separator>></capsule-breadcrumb-separator>
<capsule-breadcrumb-separator>
  A<svg
    width="12"
    height="12"
  ></svg>
</capsule-breadcrumb-separator>

capsule-breadcrumb-ellipsis

An ellipsis (...) used to indicate hidden breadcrumb items.

<capsule-breadcrumb-ellipsis></capsule-breadcrumb-ellipsis>

Accessibility

• ✅ Semantic HTML structure
• ✅ ARIA navigation landmarks
• ✅ Keyboard navigation support
• ✅ Screen reader support