DSO Component Library

# Breadcrumbs

Ready

- HTML
- View
- Context
- Info
- Notes
- WCAG

`

    <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: '#'

`

- Handle: @breadcrumbs
- Preview:
  - With layout
  - Component only
- Filesystem Path: components\05-navigation\breadcrumbs\breadcrumbs.hbs
- Referenced by (1): @header

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>`