Brødkrumme

Sådan bruges komponenten

Anvendes til

Brug en brødkrumme, når du har brug for at hjælpe brugerne med at forstå, hvor de er i en dybere hierarkisk struktur (IA) med flere sektioner og underafsnit (niveauer) og til at give brugeren mulighed for at navigere logisk tilbage igennem niveauerne.

Anvendes ikke til

Brug ikke brødkrummen til at vise trin i en selvbetjeningsløsning, brug da en trin-indikator (trinindikator).

Brug ikke brødkrummen sammen med en trinindikator.

Brug ikke brødkrummen sammen med et tilbage-link. Vælg tilbage-linket i trinbaserede løsninger og i løsninger med en flad struktur.

Vejledning

Overvej nøje om du har brug for at anvende en brødkrumme, hvis du allerede bruger andre navigationskomponenter, der også indikerer, hvor i strukturen brugeren er, som fx venstremenu.

Overvej nøje om du skal bruge brødkrummer, hvis der er færre end to niveauer.

Brødkrummer bør ikke erstatte top- eller venstremenu.

Brødkrummer skal vise den aktuelle placering i stedets hierarkiske struktur, ikke brugerens (tilfældige) færden rundt på webstedet. Hvis der er flere veje igennem din løsning til samme side, skal brødkrummen kun vise en enkelt vej (sti).

Brødkrummen skal kun indeholde sider som brugeren kan navigere til, og ikke logiske kategorier i din hierarkiske struktur (IA).

Brødkrummestien bør som oftest starte med et link til forsiden. Alternativt (og mindre konventionelt) til den side i selvbetjeningsløsningen, hvorfra den dybere struktur starter. Dette kan fx være på en overbliksside, hvor man kan åbne nye sider med flere og flere detaljer.

Brødkrummestien skal omfatte brugerens aktuelle side, der skal være visuelt forskellig fra de andre links i brødkrummen.

På små skærme bør brødkrummen ikke ombrydes til flere linjer eller presses sammen og gøres mindre. Overvej i stedet kun at vise de sidste niveauer i brødkrummen.

Se komponenten i eksempelløsninger

• Sagsoversigt: Sagsnr. 123456789
• Sagsoversigt: Afgørelser

Referencer

• GovUK Design System Breadcrumbs
• Breadcrumbs: 11 Design Guidelines for Desktop and Mobile
• Breadcrumbs In Web Design: Examples And Best Practices
• When You Should Use a Breadcrumb Navigation

Installation

HTML Struktur

<nav class="breadcrumbs container" aria-label="Brødkrumme">
    <ol class="breadcrumbs__list">
        <li class="breadcrumbs__list-item">
            <a class="breadcrumbs__link" href="#">Forside</a>
        </li>

        <li class="breadcrumbs__list-item">
            <a class="breadcrumbs__link" href="#">Underside</a>
        </li>

        <li class="breadcrumbs__list-item" aria-current="page">Aktuelle side</li>
    </ol>
</nav>

Se eksempelløsningen “Sagsoversigt” for placering i koden. Bemærk at brødkrummen placeres to forskellige steder, så den vises korrekt i alle skærmstørrelser.