Viktig informasjon
Delar av dette innhaldet er ikkje tilgjengeleg på nynorsk enno.
- Accordion
- Alert
- Breadcrumbs
- Button
- Card
- Checkbox
- CheckboxGroup
- Chips
- DatePicker
- DescriptionList
- ErrorMessage
- ErrorSummary
- Fieldset
- FileUploader
- Footer
- Icon
- IconButton
- InlineButton
- Link
- LinkGroup
- MegaButton
- Modal
- NavigationTile
- OpenClose
- Pagination
- Panel
- Popover
- RadioGroup
- RolePicker
- ScrollToTopButton
- SearchField
- Select
- Spinner
- StepList
- Table
- Tabs
- Tag
- TextArea
- TextField
- TopBannerExternal
- TopBannerInternal
- Typografi
- Versjonshistorikk
Breadcrumbs
Pakke: ds-navigation
Breadcrumbs (brødsmulesti) viser brukeren en sti i nettstedets hierarki og gjør det lett å navigere tilbake i strukturen.
Eksempel
Egnet til:
- å vise brukeren hvor de er i sidestrukturen.
- å la brukeren hoppe direkte til et nivå som ligger høyere i sidestrukturen.
Uegnet til:
- lineær navigasjon i et skjema eller prosess, for eksempel stegene i en StepList
- tilfeller der du bare har ett eller to nivåer i løsningen.
Teknisk dokumentasjon
Se Breadcrumbs i Storybook for tekniske detaljer.
Hvordan bruke komponenten
- Brødsmulestien skal alltid plasseres i øverste del av siden; under toppbanneret, men over tittelen på siden.
- Vis brødsmulestien på alle sider bortsett fra hovedsiden. Det bidar til å skape forutsigbarhet på tvers av sider i løsningen din.
- Når du bare har ett eller to nivåer i strukturen din trenger du ikke bruke brødsmulesti. Velg da heller en tilbakelenke som for eksempel «Gå til min side».
- Komponenten klapper sammen dersom den går over flere linker (standard). Når du trykker på ekspander-ikonet vil hele brødsmulestien vises igjen. Du kan skru av denne oppførselen ved å bruke propen shouldCollapse.
Plassering i toppen
Universell utforming
- Komponenten er bygget opp ved hjelp av et <nav>-element, og vil lese opp «Jeg er her» på valgt språk.
- Siste element representerer aktiv eller åpen side som standard. Teknisk sett får elementet da aria-current="page" for å støtte opplesing. Du kan skru av denne mekanismen ved å bruke propen showLastItemAsCurrentPage.
- På mobil settes fokus til første brødsmule, dersom bruker velger å vise hele stien.