DSO Component Library

Breadcrumbs 

<ol class="breadcrumb">
    <li>
        <a href="#">Home</a>
    </li>
    <li>
        <a href="#">Zelf aan de slag</a>
    </li>
    <li class="active">Inhoud</li>
</ol>
 
<ol class="breadcrumb">
  {{#each crumbs }}
    {{#if @last }}
      <li class="active">{{ label }}</li>
    {{else}}
      <li>
        <a href="{{ url }}">{{ label }}</a>
      </li>
    {{/if}}
  {{/each}}
</ol>
 
crumbs:
  - label: Home
    url: '#'
  - label: Zelf aan de slag
    url: '#'
  - label: Inhoud
    url: '#'

Toont een breadcrumb. Gebaseerd op de Bootstrap “Breadcrumbs” component

WARNING: WCAG2AA.Principle1.Guideline1_4.1_4_3.G18.BgImage

This element's text is placed on a background image. Ensure the contrast ratio between the text and all covered parts of the image are at least 4.5:1.

<a href="#">Home</a>

NOTICE: WCAG2AA.Principle2.Guideline2_4.2_4_2.H25.2

Check that the title element describes the document.

<title>Default

NOTICE: WCAG2AA.Principle2.Guideline2_4.2_4_4.H77,H78,H79,H80,H81

Check that the link text combined with programmatically determined link context identifies the purpose of the link.

<a href="#">Home</a>