NavigationMenu
Gir oversikt over innhold og struktur. Tilbyr en konsekvent måte å navigere på tvers av seksjoner, sider, og innhold. Består av lenker som settes i ønsket struktur, og som kan gis beskrivelser ved behov.
Komponenten er klar til testing, men ikke ferdig
Komponenten har blitt utarbeidet nok til at det ikke kommer store endringer, men trenger å bli testet for å avdekke behov. Gi tilbakemelding om noe lugger eller mangler.
Breaking changes varsles i endringsloggen som patches, ikke som major oppdateringer, for å unngå versjonsinflasjon.
Send innspillEksempler
Utseendet til menyen kan tilpasses ved hjelp av CSS-variabler og data-attributter i tillegg til vanlige props. Se dokumentasjonen under "Kode".
Enkel NavigationMenu
<NavigationMenu> <NavigationMenuList> <NavigationMenuItem> <NavigationMenuTrigger>Trigger 1</NavigationMenuTrigger> <NavigationMenuContent> <Stack gap="sm"> <NavigationMenuLinkButton href="#"> Link 1 </NavigationMenuLinkButton> <NavigationMenuLinkButton href="#"> Link 2 </NavigationMenuLinkButton> <NavigationMenuLinkButton href="#"> Link 3 </NavigationMenuLinkButton> </Stack> </NavigationMenuContent> </NavigationMenuItem> <NavigationMenuItem> <NavigationMenuTrigger>Trigger 2</NavigationMenuTrigger> <NavigationMenuContent> <Stack gap="sm"> <NavigationMenuLinkButton href="#"> Link 1 </NavigationMenuLinkButton> <NavigationMenuLinkButton href="#"> Link 2 </NavigationMenuLinkButton> <NavigationMenuLinkButton href="#"> Link 3 </NavigationMenuLinkButton> </Stack> </NavigationMenuContent> </NavigationMenuItem> <NavigationMenuItem> <NavigationMenuTrigger>Trigger 3</NavigationMenuTrigger> <NavigationMenuContent>Noe annet innhold</NavigationMenuContent> </NavigationMenuItem> </NavigationMenuList> </NavigationMenu>
Active Trigger
Både <NavigationMenuTrigger />, <NavigationMenuLink /> og <NavigationMenuLinkButton /> kan settes som active.
<NavigationMenu> <NavigationMenuList> <NavigationMenuItem> <NavigationMenuTrigger active>Trigger 1</NavigationMenuTrigger> <NavigationMenuContent> <Stack gap="sm"> <NavigationMenuLinkButton active href="#"> Link 1 </NavigationMenuLinkButton> <NavigationMenuLinkButton href="#"> Link 2 </NavigationMenuLinkButton> <NavigationMenuLinkButton href="#"> Link 3 </NavigationMenuLinkButton> </Stack> </NavigationMenuContent> </NavigationMenuItem> <NavigationMenuItem> <NavigationMenuTrigger>Trigger 2</NavigationMenuTrigger> <NavigationMenuContent> <Stack gap="sm"> <NavigationMenuLinkButton href="#"> Link 1 </NavigationMenuLinkButton> <NavigationMenuLinkButton href="#"> Link 2 </NavigationMenuLinkButton> <NavigationMenuLinkButton href="#"> Link 3 </NavigationMenuLinkButton> </Stack> </NavigationMenuContent> </NavigationMenuItem> <NavigationMenuItem> <NavigationMenuTrigger>Trigger 3</NavigationMenuTrigger> <NavigationMenuContent>Noe annet innhold</NavigationMenuContent> </NavigationMenuItem> </NavigationMenuList> </NavigationMenu>
Med lenker i triggers
<NavigationMenu> <NavigationMenuList> <NavigationMenuItem> <NavigationMenuLinkTrigger href="#"> Trigger 1 </NavigationMenuLinkTrigger> <NavigationMenuContent> <Stack gap="sm"> <NavigationMenuLinkButton href="#"> Link 1 </NavigationMenuLinkButton> <NavigationMenuLinkButton href="#"> Link 2 </NavigationMenuLinkButton> <NavigationMenuLinkButton href="#"> Link 3 </NavigationMenuLinkButton> </Stack> </NavigationMenuContent> </NavigationMenuItem> <NavigationMenuItem> <NavigationMenuLinkTrigger href="#2"> Trigger 2 </NavigationMenuLinkTrigger> <NavigationMenuContent> <Stack gap="sm"> <NavigationMenuLinkButton href="#"> Link 1 </NavigationMenuLinkButton> <NavigationMenuLinkButton active href="#"> Link 2 </NavigationMenuLinkButton> <NavigationMenuLinkButton href="#"> Link 3 </NavigationMenuLinkButton> </Stack> </NavigationMenuContent> </NavigationMenuItem> <NavigationMenuItem> <NavigationMenuLinkTrigger href="#"> Trigger 3 </NavigationMenuLinkTrigger> <NavigationMenuContent>Noe annet innhold</NavigationMenuContent> </NavigationMenuItem> </NavigationMenuList> </NavigationMenu>
Med knapp på slutten
<NavigationMenu> <NavigationMenuList> <NavigationMenuItem> <NavigationMenuLinkTrigger href="#"> Trigger 1 </NavigationMenuLinkTrigger> <NavigationMenuContent> <Stack gap="sm"> <NavigationMenuLinkButton href="#"> Link 1 </NavigationMenuLinkButton> <NavigationMenuLinkButton href="#"> Link 2 </NavigationMenuLinkButton> <NavigationMenuLinkButton href="#"> Link 3 </NavigationMenuLinkButton> </Stack> </NavigationMenuContent> </NavigationMenuItem> <NavigationMenuItem> <NavigationMenuLinkTrigger href="#2"> Trigger 2 </NavigationMenuLinkTrigger> <NavigationMenuContent> <Stack gap="sm"> <NavigationMenuLinkButton href="#"> Link 1 </NavigationMenuLinkButton> <NavigationMenuLinkButton href="#"> Link 2 </NavigationMenuLinkButton> <NavigationMenuLinkButton href="#"> Link 3 </NavigationMenuLinkButton> </Stack> </NavigationMenuContent> </NavigationMenuItem> <NavigationMenuItem> <NavigationMenuLinkButton href="#"> Knapp 1 </NavigationMenuLinkButton> </NavigationMenuItem> <NavigationMenuItem> <NavigationMenuLinkButton active href="#"> Knapp 2 </NavigationMenuLinkButton> </NavigationMenuItem> </NavigationMenuList> </NavigationMenu>
Med egne link-komponenter
Hvis du bruker Next.js eller et annet rammeverk kan asChild brukes på <NavigationMenuLinkTrigger /> og <NavigationMenuLinkButton /> for å få riktige lenker.
<NavigationMenu> <NavigationMenuList> <NavigationMenuItem> <NavigationMenuLinkTrigger asChild> <Link href="/komponenter/navigationmenu">Next-link som trigger link</Link> </NavigationMenuLinkTrigger> <NavigationMenuContent> <Stack gap="sm"> <NavigationMenuLinkButton asChild> <Link href="/komponenter/navigationmenu">Next-link som knapp</Link> </NavigationMenuLinkButton> <NavigationMenuLinkButton href="#"> Link 2 (Ikke Next) </NavigationMenuLinkButton> </Stack> </NavigationMenuContent> </NavigationMenuItem> <NavigationMenuItem> <NavigationMenuLinkTrigger href="#2"> Trigger 2 </NavigationMenuLinkTrigger> <NavigationMenuContent> <Stack gap="sm"> <NavigationMenuLinkButton href="#"> Link 1 </NavigationMenuLinkButton> <NavigationMenuLinkButton href="#"> Link 2 </NavigationMenuLinkButton> </Stack> </NavigationMenuContent> </NavigationMenuItem> </NavigationMenuList> </NavigationMenu>
Med ikoner
<NavigationMenu> <NavigationMenuList> <NavigationMenuItem> <NavigationMenuTrigger><EnergyIcon /> Trigger 1</NavigationMenuTrigger> <NavigationMenuContent> <Stack gap="sm"> <NavigationMenuLinkButton href="#"> <EnergyIcon /> Link 1 </NavigationMenuLinkButton> <NavigationMenuLinkButton href="#"> <EnergyIcon /> Link 2 </NavigationMenuLinkButton> <NavigationMenuLinkButton href="#"> <EnergyIcon /> Link 3 </NavigationMenuLinkButton> </Stack> </NavigationMenuContent> </NavigationMenuItem> <NavigationMenuItem> <NavigationMenuLinkTrigger href="#" active><EnergyIcon /> Trigger 2 (link)</NavigationMenuLinkTrigger> <NavigationMenuContent> <Stack gap="sm"> <NavigationMenuLinkButton href="#"> <EnergyIcon /> Link 1 </NavigationMenuLinkButton> <NavigationMenuLinkButton href="#"> <EnergyIcon /> Link 2 </NavigationMenuLinkButton> <NavigationMenuLinkButton href="#"> <EnergyIcon /> Link 3 </NavigationMenuLinkButton> </Stack> </NavigationMenuContent> </NavigationMenuItem> <NavigationMenuItem> <NavigationMenuLinkTrigger asChild> <Link href="/komponenter/navigationmenu"><EnergyIcon /> Next-link trigger</Link> </NavigationMenuLinkTrigger> <NavigationMenuContent><EnergyIcon /> Noe annet innhold</NavigationMenuContent> </NavigationMenuItem> </NavigationMenuList> </NavigationMenu>
Med valgfritt innhold
<NavigationMenu> <NavigationMenuList> <NavigationMenuItem> <NavigationMenuLinkTrigger href="#"> Trigger </NavigationMenuLinkTrigger> <NavigationMenuContent> Her kan du putte hva du vil! </NavigationMenuContent> </NavigationMenuItem> </NavigationMenuList> </NavigationMenu>
På mørk bakgrunn
Hvis navigasjonsmenyen skal brukes på mørk bakgrunn kan man bruke data-color-mode-attributten på elementene i menyen for å styre lyst eller mørkt fargetema. Tema kan styres på alle elementene. I denne menyen er hovedbakgrunnsfargen mørk, mens bakgrunnsfargen på innholdet under trigger 2 og 3 er lyst.
<div style={{ background: "var(--color-background-secondary)", padding: "1rem" }}> <NavigationMenu data-color-scheme="light"> <NavigationMenuList> <NavigationMenuItem> <NavigationMenuTrigger>Trigger 1</NavigationMenuTrigger> <NavigationMenuContent> <Stack gap="sm"> <NavigationMenuLinkButton href="#"> Link 1 </NavigationMenuLinkButton> <NavigationMenuLinkButton active href="#"> Link 2 </NavigationMenuLinkButton> <NavigationMenuLinkButton href="#"> Link 3 </NavigationMenuLinkButton> </Stack> </NavigationMenuContent> </NavigationMenuItem> <NavigationMenuItem> <NavigationMenuTrigger active>Trigger 2</NavigationMenuTrigger> <NavigationMenuContent> <Stack gap="sm"> <NavigationMenuLinkButton href="#"> Link 1 </NavigationMenuLinkButton> <NavigationMenuLinkButton active href="#"> Link 2 </NavigationMenuLinkButton> <NavigationMenuLinkButton href="#"> Link 3 </NavigationMenuLinkButton> </Stack> </NavigationMenuContent> </NavigationMenuItem> <NavigationMenuItem> <NavigationMenuTrigger>Trigger 3</NavigationMenuTrigger> <NavigationMenuContent data-color-scheme="dark"><Typography as="span" variant="text-s-light">Noe annet innhold</Typography></NavigationMenuContent> </NavigationMenuItem> </NavigationMenuList> </NavigationMenu> </div>
Overstyring av stiler
Stilene til menyen kan overstyres ved hjelp av CSS variabler.
<div style={{ background: "var(--color-background-secondary)", padding: "1rem" }}> <NavigationMenu data-color-mode="dark" style={{ ["--navigation-menu-background"]: "pink", ["--navigation-menu-color"]: "green" }}> <NavigationMenuList> <NavigationMenuItem> <NavigationMenuTrigger>Trigger 1</NavigationMenuTrigger> <NavigationMenuContent> <Stack gap="sm"> <NavigationMenuLinkButton href="#"> Link 1 </NavigationMenuLinkButton> <NavigationMenuLinkButton active href="#"> Link 2 </NavigationMenuLinkButton> <NavigationMenuLinkButton href="#"> Link 3 </NavigationMenuLinkButton> </Stack> </NavigationMenuContent> </NavigationMenuItem> <NavigationMenuItem> <NavigationMenuTrigger active>Trigger 2</NavigationMenuTrigger> <NavigationMenuContent data-color-mode="light"> <Stack gap="sm"> <NavigationMenuLinkButton href="#"> Link 1 </NavigationMenuLinkButton> <NavigationMenuLinkButton active href="#"> Link 2 </NavigationMenuLinkButton> <NavigationMenuLinkButton href="#"> Link 3 </NavigationMenuLinkButton> </Stack> </NavigationMenuContent> </NavigationMenuItem> <NavigationMenuItem> <NavigationMenuTrigger>Trigger 3</NavigationMenuTrigger> <NavigationMenuContent data-color-mode="light">Noe annet innhold</NavigationMenuContent> </NavigationMenuItem> </NavigationMenuList> </NavigationMenu> </div>
Retningslinjer
NB! Når du bruker navigasjonsmenyen er det viktig at alle menyelementer wrappes i <NavigationMenuLink /> eller <NavigationMenuLinkButton /> for at tastaturnavigasjon og UU skal virke.
Kode
<NavigationMenu />
import { NavigationMenu } from "@aneo-org/design-react/clientComponents";
Inneholder alle elementer i en navigasjonsmeny. Inneholder ett eller flere <NavigationMenuItem />.
| Prop | Type | Beskrivelse |
|---|---|---|
| children | ReactNode |
| Data attributt | Type | Beskrivelse |
|---|---|---|
| [data-color-mode] | "light" | "dark" | Brukes for å styre fargemodusen til elementet og alle barn. Light betyr lys bakgrunn, dark betyr mørk bakgrunn. |
| CSS variabel | Beskrivelse |
|---|---|
| --navigation-menu-list-gap | Brukes for å styre spacing mellom knapper i menyen. |
| --navigation-menu-color | Styrer tekstfargen på knapper. |
| --navigation-menu-color-hover | Styrer tekstfargen ved hover på knapper. |
| --navigation-menu-color-active | Styrer tekstfargen på aktive elementer. |
| --navigation-menu-background | Styrer bakgrunnsfargen på knapper. |
| --navigation-menu-background-hover | Styrer bakgrunnsfargen ved hover på knapper. |
| --navigation-menu-background-active | Styrer bakgrunnsfargen på aktive knapper. |
| --navigation-menu-content-background | Styrer bakgrunnsfargen på popover-menyen. |
<NavigationMenuList />
import { NavigationMenuList } from "@aneo-org/design-react/clientComponents";
Inneholder ett eller flere <NavigationMenuItem />.
| Prop | Type | Beskrivelse |
|---|---|---|
| children | ReactNode | |
| className? | string |
| Data attributt | Type | Beskrivelse |
|---|---|---|
| [data-color-mode] | "light" | "dark" | Brukes for å styre fargemodusen til elementet og alle barn. Light betyr lys bakgrunn, dark betyr mørk bakgrunn. |
<NavigationMenuItem />
import { NavigationMenuItem } from "@aneo-org/design-react/clientComponents";
Inneholder enten
<NavigationMenuLink />/<NavigationMenuLinkButton />
eller en kombinasjon av
<NavigationMenuTrigger />/<NavigationMenuLinkTrigger /> samt <NavigationMenuContent
| Prop | Type | Beskrivelse |
|---|---|---|
| children | ReactNode |
| Data attributt | Type | Beskrivelse |
|---|---|---|
| [data-color-mode] | "light" | "dark" | Brukes for å styre fargemodusen til elementet og alle barn. Light betyr lys bakgrunn, dark betyr mørk bakgrunn. |
<NavigationMenuTrigger />
import { NavigationMenuTrigger } from "@aneo-org/design-react/clientComponents";
Viser en knapp som åpner innhold ved hover eller klikk.
| Prop | Type | Beskrivelse |
|---|---|---|
| children | ReactNode | |
| asChild? | boolean | Brukes hvis du vil rendre noe annet som innhold i triggeren. Elementet som er child må da rendre en knapp eller lenke. |
| Data attributt | Type | Beskrivelse |
|---|---|---|
| [data-color-mode] | "light" | "dark" | Brukes for å styre fargemodusen til elementet og alle barn. Light betyr lys bakgrunn, dark betyr mørk bakgrunn. |
<NavigationMenuLinkTrigger />
import { NavigationMenuLinkTrigger } from "@aneo-org/design-react/clientComponents";
Er en kombinasjon av <NavigationMenuTrigger /> med en lenke inne i knappen.
| Prop | Type | Beskrivelse |
|---|---|---|
| href | string | Hvor lenken skal peke. Påkrevd dersom ikke asChild brukes. |
| children | ReactNode | Innholdet i lenken. Typisk lenketeksten. |
| asChild? | boolean | Brukes hvis man vil rendre et annet element som lenke. For eksempel hvis man bruker Next.js eller andre rammeverk. Må spreade alle props som kommer inn, og rendre et klikkbart element. |
| Data attributt | Type | Beskrivelse |
|---|---|---|
| [data-color-mode] | "light" | "dark" | Brukes for å styre fargemodusen til elementet og alle barn. Light betyr lys bakgrunn, dark betyr mørk bakgrunn. |
<NavigationMenuContent />
import { NavigationMenuContent } from "@aneo-org/design-react/clientComponents";
Innholdet som dukker opp når en trigger åpnes. Kan være hva som helst, men er typisk en liste av <NavigationMenuLink /> eller <NavigationMenuLinkButton />.
| Prop | Type | Beskrivelse |
|---|---|---|
| children | ReactNode |
| Data attributt | Type | Beskrivelse |
|---|---|---|
| [data-color-mode] | "light" | "dark" | Brukes for å styre fargemodusen til elementet og alle barn. Light betyr lys bakgrunn, dark betyr mørk bakgrunn. |
<NavigationMenuLinkButton />
import { NavigationMenuLinkButton } from "@aneo-org/design-react/clientComponents";
En navigasjonslenke som er ferdig stylet som en knapp. Bør brukes foran <NavigationMenuLink /> med mindre du har spesielle behov.
NB! Alle lenker i menyen må wrappes i enten denne eller <NavigationMenuLink /> for at menyen skal fungere.
| Prop | Type | Beskrivelse |
|---|---|---|
| href? | string | Påkrevd med mindre asChild brukes. |
| active? | boolean | Brukes for å indikere om lenken er aktiv eller ikke. Må settes på dette elementet selv om asChild brukes. |
| asChild | boolean | Brukes hvis man vil rendre et annet element som lenke. For eksempel hvis man bruker Next.js. |
| Data attributt | Type | Beskrivelse |
|---|---|---|
| [data-color-mode] | "light" | "dark" | Brukes for å styre fargemodusen til elementet og alle barn. Light betyr lys bakgrunn, dark betyr mørk bakgrunn. |
<NavigationMenuLink />
import { NavigationMenuLink } from "@aneo-org/design-react/clientComponents";
En navigasjonslenke.
NB! Alle lenker i menyen må wrappes i enten denne eller <NavigationMenuLinkButton /> for at menyen skal fungere.
| Prop | Type | Beskrivelse |
|---|---|---|
| href? | string | Påkrevd med mindre asChild brukes. |
| active? | boolean | Brukes for å indikere om lenken er aktiv eller ikke. Må settes på dette elementet selv om asChild brukes. |
| asChild | boolean | Brukes hvis man vil rendre et annet element som lenke. For eksempel hvis man bruker Next.js. |
| Data attributt | Type | Beskrivelse |
|---|---|---|
| [data-color-mode] | "light" | "dark" | Brukes for å styre fargemodusen til elementet og alle barn. Light betyr lys bakgrunn, dark betyr mørk bakgrunn. |