Om komponenten
Formål
Delt hoved-/bunn-/sidenavigasjon for flerside-apper med et lite, fast sett med topplevel-seksjoner (typisk 3-5 faner), inspirert av mobilappenes bunn-tab-bar-mønster (Revolut/Vipps/DNB) og desktop-appers venstre-sidebar (Wise/Polaris). Viser ikon+etikett-faner side ved side på middels bredde, blir en fast bunnlinje når skjermen er smalere enn 640px, og blir en sticky sidemeny til venstre for innholdet når vinduet er 900px eller bredere - akkurat som body:has(lm-nav-tabs)-regelen i rot-styles.css reserverer plass til for bunnlinjen. Sidebar-modusen krever at siden samler alt sitt øvrige innhold i et <main>: en delt CSS Grid-regel i rot-styles.css gjør <body> til en 2-kolonners grid (meny + innhold) - komponenten selv styrer kun sin egen loddrette liste og sticky-oppførsel, ikke plasseringen ved siden av innholdet.
Merk: Komponenten setter selv role="navigation" (kun hvis forbrukeren ikke allerede har valgt en egen role) - den er alltid ment å pakke inn appens primære sidenavigasjon, ikke en sekundær lenkeliste.
Egner seg for
- Et lite, fast antall topplevel-faner i en app-lignende flerside-løsning, der hver fane peker til sin egen side (statisk
aria-current="page"per side, ingen SPA-ruting). - Flater som ønsker samme bunn-tab-bar-oppførsel på mobil som Revolut/Vipps/DNB, og samme sidebar-oppførsel på store skjermer som Wise/Polaris.
- En sides egen underordnede seksjonsnavigasjon (med sekundaer), plassert inni main under appens hovednavigasjon - ikke som erstatning for den.
Egner seg ikke for
- Dype menyer, dropdown-navigasjon eller brødsmulesti - dette er en flat, bred fanelinje uten nøsting.
- Faner som skal bytte innhold uten sidenavigasjon (klientstyrt fane-innhold) - bruk native
<details>/rammeverk for det i stedet.
Bruk
<script type="module" src="/designsystem/komponenter/navigasjon/nav-tabs/nav-tabs.js"></script>
<script type="module" src="/designsystem/komponenter/ikon/ikon/ikon.js"></script>
<lm-nav-tabs aria-label="Hovednavigasjon">
<a href="/okonomi/index.html" aria-current="page"><lm-ikon navn="hjem"></lm-ikon><span>Hjem</span></a>
<a href="/okonomi/forbruk/index.html"><lm-ikon navn="kort"></lm-ikon><span>Forbruk</span></a>
<a href="/okonomi/lonn/index.html"><lm-ikon navn="koffert"></lm-ikon><span>Lønn</span></a>
<a href="/okonomi/innstillinger/index.html"><lm-ikon navn="innstillinger"></lm-ikon><span>Innstillinger</span></a>
</lm-nav-tabs><main id="hovedinnhold">
<lm-nav-tabs sekundaer aria-label="Tur-navigasjon">
<a href="oversikt.html" aria-current="page"><lm-ikon navn="kart-nal"></lm-ikon><span>Oversikt</span></a>
<a href="pakkeliste.html"><lm-ikon navn="koffert"></lm-ikon><span>Pakkeliste</span></a>
</lm-nav-tabs>
...
</main>Prøv selv
Rediger koden under - resultatet oppdateres live.
Attributter
| Attributt | Type | Standard | Beskrivelse |
|---|---|---|---|
sekundaer | Gjør komponenten til en enkel, i-flyt fanerekke som aldri blir en fast bunnlinje eller sidebar, uansett skjermbredde. Brukes for underordnet seksjonsnavigasjon nøstet inni en side som allerede har appens egen hovednavigasjon (f.eks. tur-sidenes Oversikt/Pakkeliste/Budsjett/Vedlegg/Innstillinger i turer/tur/) - uten dette attributtet konkurrerer den om samme sidebar-/bunnlinje-rolle som appens hovednavigasjon. |
Slots
| Slot | Beskrivelse |
|---|---|
| (standard) | To eller flere <a>-elementer, ett per fane. Den aktive fanen får aria-current="page" satt statisk fra siden. Hver lenke kan valgfritt starte med et <lm-ikon> (dekorativt, uten etikett) etterfulgt av tekst. |
Parts
| Part | Beskrivelse |
|---|---|
liste | Den indre containeren som arrangerer fanene i et rutenett. |
Styling med ::part()
Hver part over kan restyles direkte fra et vanlig, ytre stilark - uten å måtte endre selve komponenten eller duplisere den:
lm-nav-tabs::part(liste) {
/* egne stiler for "Den indre containeren som arrangerer fanene i et rutenett." */
}Tilgjengelighet
Setter role="navigation" på seg selv (med mindre forbrukeren har valgt en annen rolle), og forventer at forbrukeren setter aria-current="page" på den aktive lenken samt et beskrivende aria-label på selve elementet (f.eks. "Hovednavigasjon").
role="navigation"settes automatisk med mindre forbrukeren allerede har satt en egenrolepå elementet.- Aktiv fane markeres utelukkende med
aria-current="page"på lenken - ingen egen JS-tilstand. - Ikonet skal alltid være
aria-hidden="true", slik at skjermlesere kun leser tekstetiketten. - Fokusrekkefølgen følger DOM-rekkefølgen til de slottede lenkene, som med enhver native
<nav>.
Detaljer
- Erstatter den tidligere prosjektspesifikke CSS-klassen
.app-naviokonomi/styles.css, som var duplisert identisk på tvers av fire sider. - Den faste bunnplasseringen på smal skjerm krever at siden reserverer plass under innholdet - se den delte
body:has(lm-nav-tabs)-regelen i rot-styles.css, som unngår at hver forbruker må skrive sammepadding-block-endselv. - Sidebar-modusen (≥900px) styres av en delt CSS Grid-regel i rot-
styles.css(body:has(> lm-nav-tabs)/body:has(> .tur-nav)) som gjør<body>til en 2-kolonners grid med navngitte arealer - komponenten selv bidrar kunposition: stickyog sin egen loddrette liste. Dette krever at siden samler alt sitt øvrige innhold i et<main>, siden CSS Grid ikke lar flere elementer i samme navngitte areal stable seg via normal blokk-flyt. - sekundaer-varianten ble lagt til for å løse en jarring UX-feil: tur-sidene i turer/tur/ erstattet tidligere hele appens hovednavigasjon med en helt ny, tur-spesifikk fanelinje (samme sidebar-/bunnlinje-rolle) når man gikk inn i en tur. Nå beholder appen sin egen hovednavigasjon, og tur-navigasjonen vises som en enkel, underordnet fanerekke inni main i stedet.
Referanser
Se også:
../../handling/button-group/index.html - grupperer relaterte knapper i stedet for sidenavigasjonslenker.
Brukes av:
okonomi/index.html, okonomi/forbruk/index.html, okonomi/lonn/index.html, okonomi/formue/index.html, okonomi/innstillinger/index.html - appens fem hovedfaner (Hjem/Forbruk/Lønn/Formue/Innstillinger).
Avhengigheter: Ingen