• Introduction
    • Why Liquid
    • Getting started
    • CSS vs. Web Components
    • Component assets
    • Type checking and intellisense
    • Server-side rendering
    • Event handling
    • Form validation
    • React bindings
    • Tailwind CSS integration
    • Design tokens
    • Sandbox applications
    • FAQ
  • Globals
    • Animations
    • Border-radius
    • Colors
    • Focus
    • Fonts
    • Shadows
    • Spacings
    • Theming
    • Typography
  • Components
    • Accordion
      • Accordion Panel
      • Accordion Section
      • Accordion Toggle
    • Background Cells
    • Badge
    • Breadcrumbs
      • Crumb
    • Button
    • Card
    • Checkbox
    • Circular Progress
    • Header
    • Icon
    • Input
    • Input Message
    • Label
    • Link
    • Loading Indicator
    • Modal
    • Notice
    • Notification
    • Pagination
    • Progress
    • Radio Button
    • Screen Reader Live
    • Screen Reader Only
    • Select
      • Option
    • Sidenav
      • Sidenav Accordion
      • Sidenav Back
      • Sidenav Header
      • Sidenav Heading
      • Sidenav Navitem
      • Sidenav Separator
      • Sidenav Slider
      • Sidenav Subnav
      • Sidenav Toggle Outsid
    • Slider
    • Switch
      • Switch Item
    • Tabs
      • Tab
      • Tab List
      • Tab Panel
      • Tab Panel List
    • Toggle
    • Tooltip
    • Typography
  • Data Visualization
    • Getting Started
  1. Examples
    1. Basic
    2. With icons
  2. Properties
  3. Shadow Parts
Components Breadcrumbs

ld-breadcrumbs #

A breadcrumb trail consists of a list of links to the parent pages of the current page in hierarchical order. It helps users find their place within a website or web application. Breadcrumbs are often placed horizontally before a page's main content.

This component is meant to be used in conjunction with the ld-crumb component.

Examples #

Basic #

<ld-breadcrumbs>
  <ld-crumb href="components/">Components</ld-crumb>
  <ld-crumb href="components/ld-breadcrumbs/">Breadcrumbs</ld-crumb>
</ld-breadcrumbs>
<nav class="ld-breadcrumbs" aria-label="Breadcrumbs">
  <ol>
    <li>
      <a class="ld-link ld-link--chevron-end" href="components/">Components</a>
    </li>
    <li>
      <a class="ld-link" href="components/ld-breadcrumbs/" aria-current="page">Breadcrumbs</a>
    </li>
  </ol>
</nav>
Components Breadcrumbs
  1. Components
  2. Breadcrumbs

With icons #

<ld-breadcrumbs>
  <ld-crumb href="components/">
    <ld-icon name="placeholder" size="sm"></ld-icon>
    Components
  </ld-crumb>
  <ld-crumb href="components/ld-breadcrumbs/">
    <ld-icon name="placeholder" size="sm"></ld-icon>
    Breadcrumbs
  </ld-crumb>
</ld-breadcrumbs>
<nav class="ld-breadcrumbs" aria-label="Breadcrumbs">
  <ol>
    <li>
      <a class="ld-link ld-link--chevron-end" href="components/">
        <span class="ld-icon ld-icon--sm" role="presentation">
          <svg viewBox="0 0 24 24" fill="none">
            <rect x="1.5" y="1.5" width="21" height="21" rx="4.5" stroke="currentColor" stroke-width="3"/>
            <circle cx="12" cy="12" r="4.5" stroke="currentColor" stroke-width="3"/>
          </svg>
        </span>
        Components
      </a>
    </li>
    <li>
      <a class="ld-link" href="components/ld-breadcrumbs/" aria-current="page">
        <span class="ld-icon ld-icon--sm" role="presentation">
          <svg viewBox="0 0 24 24" fill="none">
            <rect x="1.5" y="1.5" width="21" height="21" rx="4.5" stroke="currentColor" stroke-width="3"/>
            <circle cx="12" cy="12" r="4.5" stroke="currentColor" stroke-width="3"/>
          </svg>
        </span>
        Breadcrumbs
      </a>
    </li>
  </ol>
</nav>
Components Breadcrumbs
  1. Components
  2. Breadcrumbs

Properties #

Property Attribute Description Type Default
key key for tracking the node's identity when working with lists string | number undefined
ref ref reference to component any undefined

Shadow Parts #

Part Description
"list" Breadcrumbs list