Breadcrumb Overview

Breadcrumbs are a secondary navigation pattern that helps users understand their current location within a website or application hierarchy. They provide a clear path back to higher-level pages and improve overall navigation experience by showing the relationship between pages.

When to Use

✅ Use breadcrumbs when:

  • Your site or application has a deep hierarchical structure (3+ levels)
  • Users need to understand their current location in the site structure
  • You want to provide an easy way to navigate back to parent pages
  • Working with multi-step processes or workflows
  • Displaying content categorization (e.g., Products > Electronics > Smartphones)
  • Building e-commerce product pages or content management systems

❌ Don't use breadcrumbs for:

  • Single-level navigation (use primary navigation instead)
  • Linear processes where users shouldn't skip steps
  • Mobile-first designs where space is extremely limited
  • Sites with flat information architecture
  • When the primary navigation already provides clear hierarchy
Design system docs Examples Basic breadcrumb

A standard breadcrumb showing the page hierarchy with clickable links:

<dap-ds-breadcrumb aria-label="Page navigation">
<dap-ds-breadcrumb-item href="/">
  Home
</dap-ds-breadcrumb-item>
<dap-ds-breadcrumb-item href="/products">
  Products
</dap-ds-breadcrumb-item>
<dap-ds-breadcrumb-item href="/products/electronics">
  Electronics
</dap-ds-breadcrumb-item>
<dap-ds-breadcrumb-item>
  Smartphones
</dap-ds-breadcrumb-item>
</dap-ds-breadcrumb>
Custom separators

Customize the visual separator between breadcrumb items using the separator slot:

<dap-ds-stack>
<dap-ds-breadcrumb aria-label="Navigation with custom separator">
  <dap-ds-breadcrumb-item href="/">Home</dap-ds-breadcrumb-item>
  <dap-ds-breadcrumb-item href="/docs">Documentation</dap-ds-breadcrumb-item>
  <dap-ds-breadcrumb-item href="/docs/components">Components</dap-ds-breadcrumb-item>
  <dap-ds-breadcrumb-item>Breadcrumb</dap-ds-breadcrumb-item>
  
  <svg slot="separator" width="16" height="16" viewBox="0 0 24 24" fill="currentColor">
    <path d="M13.1717 12.0007L8.22192 7.05093L9.63614 5.63672L16.0001 12.0007L9.63614 18.3646L8.22192 16.9504L13.1717 12.0007Z"/>
  </svg>
</dap-ds-breadcrumb>

<dap-ds-breadcrumb aria-label="Navigation with dash separator">
  <dap-ds-breadcrumb-item href="/">Home</dap-ds-breadcrumb-item>
  <dap-ds-breadcrumb-item href="/blog">Blog</dap-ds-breadcrumb-item>
  <dap-ds-breadcrumb-item>Article Title</dap-ds-breadcrumb-item>
  
  <span slot="separator">—</span>
</dap-ds-breadcrumb>
</dap-ds-stack>
Mobile-optimized breadcrumbs

Use the mobile attribute to show only the first and last items on smaller screens:

<dap-ds-breadcrumb mobile aria-label="Mobile navigation">
<dap-ds-breadcrumb-item href="/">
  Home
</dap-ds-breadcrumb-item>
<dap-ds-breadcrumb-item href="/products">
  Products
</dap-ds-breadcrumb-item>
<dap-ds-breadcrumb-item href="/products/electronics">
  Electronics
</dap-ds-breadcrumb-item>
<dap-ds-breadcrumb-item href="/products/electronics/phones">
  Mobile Phones
</dap-ds-breadcrumb-item>
<dap-ds-breadcrumb-item>
  iPhone 15 Pro
</dap-ds-breadcrumb-item>
</dap-ds-breadcrumb>
Inverted style

Use the variant="inverted" attribute for breadcrumbs on dark backgrounds:

<div style={{ backgroundColor: 'var(--dds-background-brand-base-inverted)', padding: 'var(--dds-spacing-400)' }}>
<dap-ds-breadcrumb variant="inverted" aria-label="Inverted navigation">
  <dap-ds-breadcrumb-item href="/">
    Government Portal
  </dap-ds-breadcrumb-item>
  <dap-ds-breadcrumb-item href="/services">
    Digital Services
  </dap-ds-breadcrumb-item>
  <dap-ds-breadcrumb-item href="/services/citizens">
    Citizen Services
  </dap-ds-breadcrumb-item>
  <dap-ds-breadcrumb-item>
    Document Request
  </dap-ds-breadcrumb-item>
</dap-ds-breadcrumb>
</div>
Real-World Patterns E-commerce product navigation 
<dap-ds-breadcrumb aria-label="Product navigation">
<dap-ds-breadcrumb-item href="/shop">
  Shop
</dap-ds-breadcrumb-item>
<dap-ds-breadcrumb-item href="/shop/electronics">
  Electronics
</dap-ds-breadcrumb-item>
<dap-ds-breadcrumb-item href="/shop/electronics/computers">
  Computers & Laptops
</dap-ds-breadcrumb-item>
<dap-ds-breadcrumb-item href="/shop/electronics/computers/gaming">
  Gaming Laptops
</dap-ds-breadcrumb-item>
<dap-ds-breadcrumb-item>
  ASUS ROG Strix G15
</dap-ds-breadcrumb-item>
</dap-ds-breadcrumb>
Government service navigation 
<dap-ds-breadcrumb aria-label="Service navigation">
<dap-ds-breadcrumb-item href="https://services.gov.hu">
  Government Services
</dap-ds-breadcrumb-item>
<dap-ds-breadcrumb-item href="/services/documents">
  Document Services
</dap-ds-breadcrumb-item>
<dap-ds-breadcrumb-item href="/services/documents/personal">
  Personal Documents
</dap-ds-breadcrumb-item>
<dap-ds-breadcrumb-item>
  ID Card Renewal
</dap-ds-breadcrumb-item>
</dap-ds-breadcrumb>
Accessibility Features

Breadcrumbs are designed with accessibility in mind:

  • Semantic HTML: Uses proper <nav> and <ol> structure for screen readers
  • ARIA labeling: Supports aria-label and aria-labelledby attributes
  • Current page indication: Automatically adds aria-current="page" to the last item
  • Keyboard navigation: Full keyboard support using Tab navigation
  • Screen reader friendly: Proper list semantics and separator handling
Best practices for accessibility 
<!-- Always provide an accessible name -->
<dap-ds-breadcrumb aria-label="You are here">
  <!-- Or use aria-labelledby -->
  <dap-ds-breadcrumb aria-labelledby="page-title">
    
<!-- Use descriptive link text -->
<dap-ds-breadcrumb-item href="/products">
  All Products  <!-- Instead of "Products" or "Back" -->
</dap-ds-breadcrumb-item>
Implementation Notes Responsive behavior

Breadcrumbs automatically adapt to different screen sizes:

  • Desktop: Shows full breadcrumb trail
  • Mobile with mobile attribute: Shows only first and last items
  • Mobile without mobile: Allows horizontal scrolling
URL structure considerations

Design your URLs to support breadcrumb navigation:

// Good URL structure for breadcrumbs
/products/electronics/smartphones/iphone-15-pro

// Breadcrumb can be automatically generated from URL segments
Home > Products > Electronics > Smartphones > iPhone 15 Pro
Dynamic breadcrumbs 
// Example: Building breadcrumbs from route data
const routeSegments = [
  { name: 'Home', href: '/' },
  { name: 'Products', href: '/products' },
  { name: 'Electronics', href: '/products/electronics' },
  { name: 'Smartphones' } // Current page, no href
];

const breadcrumbHTML = html`
  <dap-ds-breadcrumb aria-label="Page navigation">
    ${routeSegments.map(segment => html`
      <dap-ds-breadcrumb-item href="${segment.href || nothing}">
        ${segment.name}
      </dap-ds-breadcrumb-item>
    `)}
  </dap-ds-breadcrumb>
`;
Performance considerations
  • Keep breadcrumb trails reasonably short (5-7 levels maximum)
  • Use semantic URLs that match the breadcrumb structure
  • Consider implementing breadcrumb caching for complex hierarchies
  • Avoid overly long breadcrumb item names that may wrap
Importing 
import { DapDSBreadcrumb } from 'dap-design-system/dist/dds'
Importing React 
import { DapDSBreadcrumbReact } from 'dap-design-system/dist/react'
Attributes
PropertyTypeDefaultDescription
variantstring'normal'
mobilebooleanfalseMobile version of the breadcrumb
ariaLabelledBystring, undefinedThe aria-labelledby of the breadcrumb
Slots
NameDescription
(default)The content of the breadcrumb.
separatorThe separator between breadcrumb items. Default is '/'.
Events

No custom events available.

CSS Parts
Part NameDescription
baseThe main breadcrumb container.
separatorThe separator of the breadcrumb.
CSS Custom Properties
Property NameDescription
--dds-breadcrumb-widthThe width of the breadcrumb container. Default is 100%.
--dds-breadcrumb-overflow-xThe horizontal overflow behavior of the breadcrumb. Default is auto.
--dds-breadcrumb-transitionThe transition property for the breadcrumb. Default is 'all 0.2s ease-in-out'.
--dds-breadcrumb-list-displayThe display property of the breadcrumb list. Default is flex.
--dds-breadcrumb-list-flex-wrapThe flex-wrap property of the breadcrumb list. Default is nowrap.
--dds-breadcrumb-list-align-itemsThe align-items property of the breadcrumb list. Default is center.
--dds-breadcrumb-list-min-widthThe minimum width of the breadcrumb list. Default is max-content.
Components Breadcrumb item <dap-ds-breadcrumb-item/> Attributes
PropertyTypeDefaultDescription
hrefstring, undefinedThe URL of the breadcrumb item.
target'_blank', '_self' , '_parent' , '_top'The target of the breadcrumb item.
relstring'noreferrer noopener'The rel of the breadcrumb item link.
disabledbooleanfalseWhether the breadcrumb item is disabled.
variant'normal', 'inverted''normal'The variant of the breadcrumb item.
Slots
NameDescription
(default)The content of the breadcrumb item.
separatorThe separator between breadcrumb items. Default is an arrow-right-s-line icon.
Events

No custom events available.

CSS Parts
Part NameDescription
baseThe main breadcrumb item container. The li element.
linkThe link of the breadcrumb item. The dds-link component.
link-baseThe base part of the link part. The dds-link components base part.
item-nolinkThe item of the breadcrumb item without a link. The span element.
separatorThe separator of the breadcrumb item.
CSS Custom Properties
Property NameDescription
--dds-breadcrumb-item-displayThe display property of the breadcrumb item. Default is inline-flex.
--dds-breadcrumb-item-flex-wrapThe flex-wrap property of the breadcrumb item. Default is nowrap.
--dds-breadcrumb-item-align-itemsThe align-items property of the breadcrumb item. Default is center.
--dds-breadcrumb-item-colorThe text color of the breadcrumb item. Default is the design system's text-neutral-base.
--dds-breadcrumb-item-transitionThe transition property for the breadcrumb item. Default is 'all 0.2s ease-in-out'.
--dds-breadcrumb-item-paddingThe padding of the breadcrumb item. Default is the design system's spacing-200.
--dds-breadcrumb-item-font-sizeThe font size of the breadcrumb item. Default is the design system's font-sm.
--dds-breadcrumb-item-font-weightThe font weight of the breadcrumb item. Default is the design system's font-weight-medium.
--dds-breadcrumb-item-font-weight-boldThe bold font weight of the breadcrumb item. Default is the design system's font-weight-bold.
--dds-breadcrumb-item-separator-colorThe color of the separator. Default is the design system's text-neutral-disabled.
--dds-breadcrumb-item-link-colorThe color of the link. Default is the design system's link-neutral-enabled.
--dds-breadcrumb-item-inverted-colorThe text color when inverted. Default is the design system's text-neutral-inverted.
--dds-breadcrumb-item-inverted-link-colorThe link color when inverted. Default is the design system's text-neutral-inverted.