Breadcrumb

What it does

The .mod-breadcrumbs component creates a clear, accessible breadcrumb trail to help users understand their current location within your site. It keeps navigation intuitive and visually consistent, adapting seamlessly to your design system.

Key Features

• Guides users by showing their path through the site hierarchy.
• Customizable appearance: Easily adjust spacing, font size, and colors using CSS variables or SCSS tokens.
• Flexible structure: Supports intro markers, current page highlighting, and both linked and plain text items.
• Accessible by default: Uses semantic HTML and ARIA labels for screen readers.
• Responsive design: Looks great on all devices and adapts to your layout.

How to use

1. Basic usage

   <nav class="mod-breadcrumbs__wrapper" aria-label="Breadcrumbs">
     <ol class="mod-breadcrumbs breadcrumb px-3 py-2">
       <li class="mod-breadcrumbs__here float-start">Aktuelle Seite:&nbsp;</li>
       <li class="mod-breadcrumbs__item breadcrumb-item"><a href="#">Home</a></li>
       <li class="mod-breadcrumbs__item breadcrumb-item"><a href="#">Category</a></li>
       <li class="mod-breadcrumbs__item breadcrumb-item active"><span>Current Page</span></li>
     </ol>
   </nav>
   

2. Customizing

   You can tailor the breadcrumb to fit your needs:

   • Change the marker or highlight: Add or remove the .mod-breadcrumbs__here class to show or hide the intro marker.
   • Adjust styles: Override CSS variables like --breadcrumb-font-size or --breadcrumb-marker-color inline or in your stylesheet.
   • Structure your items: Use links for navigable items and plain text for the current page.

   Example:

   <ol class="mod-breadcrumbs" style="--breadcrumb-font-size: 1.2rem; --breadcrumb-marker-color: #007bff;">
     ...
   </ol>
   

How it works

• The breadcrumb uses an ordered list for semantic structure and accessibility.
• Each item is styled with SCSS, using variables for easy theming and spacing.
• Font Awesome icons are used for markers, and the current page is highlighted for clarity.
• The component is fully responsive and adapts to your layout and color scheme.

Example

<nav class="mod-breadcrumbs__wrapper" aria-label="Breadcrumbs">
  <ol class="mod-breadcrumbs breadcrumb px-3 py-2">
    <li class="mod-breadcrumbs__here float-start">Aktuelle Seite:&nbsp;</li>
    <li class="mod-breadcrumbs__item breadcrumb-item"><a href="#">Home</a></li>
    <li class="mod-breadcrumbs__item breadcrumb-item"><a href="#">Category</a></li>
    <li class="mod-breadcrumbs__item breadcrumb-item active"><span>Current Page</span></li>
  </ol>
</nav>

Result:

• Users see a horizontal breadcrumb trail with clear markers and links.
• The current page is highlighted, and the breadcrumb adapts to your site's style.

Reference:

• SCSS partial: src/media/templates/site/jcrafts/scss/components/_breadcrumb.scss
• Uses mixins and variables from:
  • src/media/templates/site/jcrafts/scss/layout/_cluster.scss
  • src/media/templates/site/jcrafts/scss/abstracts/_index.scss (imported as abstracts)
  • src/media/templates/site/jcrafts/scss/tokens/components/_breadcrumb.scss

Tip:

Use .mod-breadcrumbs at the top of your main content to help users navigate and understand their location. Customize the look and feel by overriding CSS variables or extending the SCSS partial to match your brand.

HTML Code (Demo)

<nav class="mod-breadcrumbs__wrapper" aria-label="Breadcrumbs">
  <ol class="mod-breadcrumbs breadcrumb px-0 py-2">
    <li class="mod-breadcrumbs__here float-start">
    Aktuelle Seite:&#160;</li>
    <li class="mod-breadcrumbs__item breadcrumb-item">
      <a href="#" class="pathway">Home</a>
    </li>
    <li class="mod-breadcrumbs__item breadcrumb-item">
      <a href="#" class="pathway">Category</a>
    </li>
    <li class="mod-breadcrumbs__item breadcrumb-item">
      <a href="#" class="pathway">Subcategory</a>
    </li>
    <li class="mod-breadcrumbs__item breadcrumb-item active"><span>Current Page</span></li>
  </ol>
</nav>

Configuration

{
  "title": "Breadcrumbs",
  "showHere": true,
  "showLast": true,
  "items": [
    {
      "title": "Home",
      "url": "#"
    },
    {
      "title": "Category",
      "url": "#"
    },
    {
      "title": "Subcategory",
      "url": "#"
    },
    {
      "title": "Current Page",
      "url": "#"
    }
  ]
}