Lily Design System™

Breadcrumb List Item

A breadcrumb list item represents a single step in a breadcrumb navigation trail. It renders as a semantic <li> element designed to be placed inside a BreadcrumbList component (which provides the parent <nav> and <ol> structure). The component supports aria-current="page" to indicate when the item represents the user's current location in the site hierarchy.

Typically, each breadcrumb list item contains a link for navigable ancestor pages, while the final item (current page) contains plain text and is marked with the current prop.

Example

  1. Example list item
Show demo markup 
<ol class="breadcrumb-list"><li class="breadcrumb-list-item">Example list item</li></ol>
Usage example 
<script lang="ts">
  import BreadcrumbListItem from './BreadcrumbListItem.svelte';
</script>

<BreadcrumbListItem><a href="/products">Products</a></BreadcrumbListItem>
Show Svelte source 
// In your Svelte component:
import BreadcrumbListItem from "lily-design-system-svelte-headless/components/BreadcrumbListItem/BreadcrumbListItem.svelte";

<BreadcrumbListItem>
  <!-- BreadcrumbListItem content -->
</BreadcrumbListItem>

Usage

<BreadcrumbNav label="Breadcrumb">
  <BreadcrumbList>
    <BreadcrumbListItem>
      <BreadcrumbLink href="/">Home</BreadcrumbLink>
    </BreadcrumbListItem>
    <BreadcrumbListItem>
      <BreadcrumbLink href="/health-a-z">Health A to Z</BreadcrumbLink>
    </BreadcrumbListItem>
    <BreadcrumbListItem aria-current="page">
      Diabetes
    </BreadcrumbListItem>
  </BreadcrumbList>
</BreadcrumbNav>

Props

  • current: boolean (default: false) -- whether this item represents the current page in the breadcrumb trail
  • children: slot (required) -- breadcrumb content, typically a link or text

Keyboard Interactions

None directly -- keyboard interaction is handled by the contained links.

ARIA

  • Implicit listitem role from the semantic <li> element
  • aria-current="page" -- set when current is true, indicating the user's current location in the breadcrumb trail

When to Use

  • Use inside BreadcrumbList to represent one level in the breadcrumb trail
  • Use with aria-current="page" on the last item to indicate the current page

When Not to Use

  • Do not use outside of BreadcrumbList -- it has no standalone meaning
  • Do not include the current page as a link -- the H1 heading already communicates the current page

Headless

This component provides a semantic <li> element with conditional aria-current="page" and zero visual styling. The consumer is responsible for all CSS including link styling, separator decorations, current-page visual treatment, and spacing.

Styles

The consumer provides all CSS styling. The component renders with a .breadcrumb-list-item class for targeting. No default styles are included — this is a fully headless component.

Testing

  • Verify the component renders a <li> element with class breadcrumb-list-item
  • Verify pass-through attributes are applied

Advice

  • Designers: Style the current page item differently from linked items (e.g., bold text, no underline) to help users identify where they are in the hierarchy.
  • Developers: Set the current prop to true only on the last item in the trail. Use plain text (not a link) for the current page content.

Implementation Notes

  • Renders as a semantic <li> element for use inside a breadcrumb <nav> / <ol> structure
  • Supports aria-current="page" via the current prop to indicate the active page in the breadcrumb trail
  • Content is provided through the children slot, typically an <a> link or plain text
  • Passes through all additional HTML attributes via ...restProps
  • Uses slot for children content

Composition

BreadcrumbListItem follows the Nav / List / ListItem composition pattern:

  • BreadcrumbNav -- outer <nav> container providing the navigation landmark.
  • BreadcrumbList -- <ol> list conveying the ordered hierarchy.
  • BreadcrumbListItem -- individual <li> items with links or current page text.
<BreadcrumbNav label="Breadcrumb">
  <BreadcrumbList>
    <BreadcrumbListItem>
      <BreadcrumbLink href="/">Home</BreadcrumbLink>
    </BreadcrumbListItem>
    <BreadcrumbListItem>
      <BreadcrumbLink href="/health-a-z">Health A to Z</BreadcrumbLink>
    </BreadcrumbListItem>
    <BreadcrumbListItem aria-current="page">
      Diabetes
    </BreadcrumbListItem>
  </BreadcrumbList>
</BreadcrumbNav>

Related components

  • breadcrumb-nav — a navigation container for breadcrumb trail links
  • breadcrumb-list — an ordered list of breadcrumb list items
  • breadcrumb-link — one breadcrumb link in the trail

References

  • WAI-ARIA Breadcrumb Pattern: https://www.w3.org/WAI/ARIA/apg/patterns/breadcrumb/

Canonical contract

Generated from this component's canonical metadata — the machine-checked source the implementations are held to.

Metadata

  • Component: breadcrumb-list-item
  • PascalCase: BreadcrumbListItem
  • Description: one breadcrumb list item in the trail
  • Status: stable — exercised in composed page flows under e2e and axe, beyond the per-component checks
  • HTML tag: <li>
  • CSS class: .breadcrumb-list-item
  • Interactive: no

ARIA

  • Implicit listitem role from the semantic <li> element
  • aria-current="page" -- set when current is true, indicating the user's current location in the breadcrumb trail

Keyboard

  • No keyboard interactions — this is a passive element

Props

  • current: boolean (default: false) -- whether this item represents the current page in the breadcrumb trail
  • children: slot (required) -- breadcrumb content, typically a link or text