Skip to content

Latest commit

 

History

History
79 lines (51 loc) · 3.08 KB

Breadcrumbs.mdx

File metadata and controls

79 lines (51 loc) · 3.08 KB

import { Meta, Controls, Primary, Canvas } from '@storybook/blocks';

import * as BreadcrumbsStories from './Breadcrumbs.stories';

Breadcrumbs

Breadcrumb er en navigasjon med synlig søkebane. Vi bruker denne komponenten til å hjelpe brukerne å forstå hvor de er i en struktur, for eksempel på en nettside. Da kan de lettere bytte mellom de ulike nivåene i strukturen.

Slik bruker du Breadcrumb

Den siste lenken i brødsmulestien blir automatisk markert med aria-current="page".

<Breadcrumbs aria-label="Du er her:">
  <Breadcrumbs.Link aria-label="Tilbake til nivå 3">Nivå 3</Breadcrumbs.Link>
  <Breadcrumbs.List>
    <Breadcrumbs.Item>
      <Breadcrumbs.Link href="https://designsystemet.no/">Nivå 1</Breadcrumbs.Link>
    </Breadcrumbs.Item>
    <Breadcrumbs.Item>
      <Breadcrumbs.Link href="https://designsystemet.no/niva-2/">Nivå 2</Breadcrumbs.Link>
    </Breadcrumbs.Item>
  </Breadcrumbs.List>
</Breadcrumbs>

Varianter av Breadcrumb

Kun tilbake-knapp

Hvis du legger en Breadcrumbs.Link som direkte barn av Breadcrumbs, vil denne lenken vises som en tilbake-knapp. Det er viktig at du er konsistent i din løsning og bruker enten tilbake-knapp eller sti.

Kun sti

Hvis du legger en Breadcrumbs.List som direkte barn av Breadcrumbs, vil denne vises som en sti.

Både sti på desktop og tilbake-knapp på mobil

Hvis du legger både en Breadcrumbs.Link som direkte barn av Breadcrumbs og en Breadcrumbs.List, vil tilbake-knapp vises på mobil, og sti vises på desktop.

Retningslinjer

En navigasjon med synlig søkebane vises vanligvis høyt oppe på nettsiden, gjerne rett under sidetittelen.

Det er først når det er tre eller flere nivåer at det er behov for en brødsmulesti.

Vi bruker ikke brødsmulestier til lineær navigasjon, for eksempel for de ulike stegene i en arbeidsflyt et skjema.

Plassering

Brødsmulestien skal alltid plasseres øverst på venstre del av siden. Den skal være under menyen og hovednavigasjonen, men over sidetittelen.

Hvis vi bruker Breadcrumbs i applikasjoner, skal vi vise den på alle sider som ikke er forsiden. Alle elementene i brødsmulestien skal være lenker, men siden brukerne står på, skal se ut som vanlig tekst.

Tilgjengelighet

Det skal være enkelt for brukerne å benytte seg av brødsmulestien. Pass derfor på at det ikke ligger andre interaktive elementer for nær den.

Breadcrumbs kan ha flere interaktive elementer som må navigeres over med tastaturet. Pass derfor på at du legger inn at SkipLink til hovedinnholdet også skal hoppe over brødsmulestien.

Skjule brødsmulestien på mobil

Hvis du har lang navigasjon, kan du sette opp komponenten til bare å vise første og siste del av søkebanen på mobil. Dette skjer automatisk på skjermer under 650px, hvor vi kun viser link ned et nivå.