import { Meta, Canvas } from '@storybook/addon-docs/blocks';
import { CssVariables } from '../../.storybook/blocks';
import * as stories from './breadcrumbs.stories';

<Meta of={stories} />

# Breadcrumbs

> Brukes til å hjelpe brukerne med å forstå hvor de er i en struktur, for eksempel på en nettside. 

## Kode
- Bruk klassen `breadcrumbs` på `<ds-breadcrumbs>`
- Legg `<ol>` inni, med `<li><a>` som barn
- Siste `<a>` får automatisk `aria-current="page"`
- Hvis `<a>` ligger direkte i `<nav>` vil denne være [tilbakeknapp](#tilbakeknapp)
- **React?** Bruk `<Breadcrumbs>`, `<ol>`, `<li>` og `<a>`

<Canvas of={stories.Default} />

## Tilbakeknapp
- Tilbakeknapp vises alltid dersom kun `<a>` er barn av `<nav>`
- Tilbakeknapp vises kun på mobil dersom `<a>` og `<ol>` er barn av `<nav>`

<Canvas of={stories.WithBackbutton} />

## Størrelser
- Bruk `data-size="sm | md | lg"`

<Canvas of={stories.Sizes} />

## Uten lenker
- Bruk `<div>` istedenfor `<nav>` og `<span>` istedenfor `<a>`

<Canvas of={stories.WithoutLinks} />

<CssVariables component="breadcrumbs" />