<NavigationMenu>
<NavigationMenuList>
  <NavigationMenuItem>
    <NavigationMenuTrigger>Kom i gang</NavigationMenuTrigger>
    <NavigationMenuContent>
      <div style={{ padding: "1rem", width: "300px" }}>
        <p style={{ fontWeight: 600, marginBottom: "0.5rem" }}>Kom i gang</p>
        <p style={{ fontSize: "0.875rem", opacity: 0.7 }}>Lær hvordan du installerer og bruker designsystemet.</p>
      </div>
    </NavigationMenuContent>
  </NavigationMenuItem>
  <NavigationMenuItem>
    <NavigationMenuTrigger>Komponenter</NavigationMenuTrigger>
    <NavigationMenuContent>
      <div style={{ padding: "1rem", width: "300px", display: "grid", gap: "0.5rem" }}>
        <p style={{ fontWeight: 600 }}>UI-komponenter</p>
        <a href="#" style={{ fontSize: "0.875rem" }}>Button</a>
        <a href="#" style={{ fontSize: "0.875rem" }}>Card</a>
        <a href="#" style={{ fontSize: "0.875rem" }}>Dialog</a>
        <a href="#" style={{ fontSize: "0.875rem" }}>Se alle →</a>
      </div>
    </NavigationMenuContent>
  </NavigationMenuItem>
  <NavigationMenuItem>
    <NavigationMenuLink href="#" style={{ display: "inline-flex", height: "2.5rem", alignItems: "center", padding: "0 1rem", fontSize: "0.875rem", fontWeight: 500 }}>
      Dokumentasjon
    </NavigationMenuLink>
  </NavigationMenuItem>
</NavigationMenuList>
</NavigationMenu>

Med rikt innhold

<NavigationMenu>
<NavigationMenuList>
  <NavigationMenuItem>
    <NavigationMenuTrigger>Ressurser</NavigationMenuTrigger>
    <NavigationMenuContent>
      <div style={{ padding: "1.5rem", width: "400px", display: "grid", gridTemplateColumns: "1fr 1fr", gap: "1rem" }}>
        <div>
          <p style={{ fontWeight: 600, fontSize: "0.875rem", marginBottom: "0.25rem" }}>Dokumentasjon</p>
          <p style={{ fontSize: "0.75rem", opacity: 0.7 }}>Kom i gang med designsystemet.</p>
        </div>
        <div>
          <p style={{ fontWeight: 600, fontSize: "0.875rem", marginBottom: "0.25rem" }}>Komponenter</p>
          <p style={{ fontSize: "0.75rem", opacity: 0.7 }}>Utforsk alle tilgjengelige komponenter.</p>
        </div>
        <div>
          <p style={{ fontWeight: 600, fontSize: "0.875rem", marginBottom: "0.25rem" }}>Farger</p>
          <p style={{ fontSize: "0.75rem", opacity: 0.7 }}>Se fargepaletten og tokens.</p>
        </div>
        <div>
          <p style={{ fontWeight: 600, fontSize: "0.875rem", marginBottom: "0.25rem" }}>GitHub</p>
          <p style={{ fontSize: "0.75rem", opacity: 0.7 }}>Bidra til kodebasen.</p>
        </div>
      </div>
    </NavigationMenuContent>
  </NavigationMenuItem>
</NavigationMenuList>
</NavigationMenu>

Bruksanbefalinger

Produkt ▾ | Ressurser ▾ | Priser | Kontakt

Bruk for hovednavigasjon

NavigationMenu egner seg for toppnivå-navigasjon med få, veldefinerte kategorier og eventuelt dropdowns med rikt innhold.

NavigationMenu: Rediger / Slett / Kopier

Ikke bruk for handlingsmenyer

For kontekstuelle handlinger (rediger, slett, kopier), bruk DropdownMenu. NavigationMenu er for sidenavigasjon.

Tilgjengelighet

Bruker role="navigation" automatisk
Piltaster navigerer mellom elementer
Enter eller Space åpner dropdowns
Escape lukker åpne dropdowns
Støtter aria-current for å markere aktiv side
Tab navigerer gjennom synlige lenker og trigger-elementer

Props

NavigationMenu (rot)

Prop	Type	Default	Beskrivelse
`value`	`string`	—	Kontrollert åpent element
`onValueChange`	`(value: string) => void`	—	Kalles når åpent element endres
`defaultValue`	`string`	—	Standard åpent element
`delayDuration`	`number`	`200`	Forsinkelse i ms før dropdown åpnes

NavigationMenuTrigger

Arver alle props fra <button>. Trigger for en dropdown.

NavigationMenuContent

Arver alle props fra Radix NavigationMenu.Content. Innholdet i en dropdown.

NavigationMenuLink

Prop	Type	Default	Beskrivelse
`active`	`boolean`	`false`	Markerer lenken som aktiv
`href`	`string`	—	URL for lenken

NavigationMenu

Importering

Grunnleggende bruk