Navigation

Megamenu

En mega menu er et stort dropdown-panel, der viser en hel sektion af sitet på én gang — mange valg opdelt i overskuelige kolonner med overskrifter. Den skinner på store sites og dybe kataloger. Her er evidensen og de vigtigste regler.

5 min læsning

Definition

En megamenu er en stor navigationsflade, der grupperer mange links i kolonner — ofte med overskrifter, ikoner eller eksempler.

Hvorfor det virker

Mønstret er overvejende vejlednings-drevet: Nielsen Norman Groups anbefaling hviler på kvalitativ brugertest (»vi ved fra brugertest, at mega menuer virker«), ikke på publicerede effektstørrelser. Behandl værdi-udsagnene som ekspertvejledning, ikke som målte tal.¹

Alle valg er synlige på én gang. Det todimensionelle layout lader brugeren skimme frem for at klikke sig gennem indlejrede niveauer — og grupper med overskrifter gør strukturen synlig, så det bliver genkendelse frem for at skulle huske.¹

Mønstret egner sig specifikt til store, komplekse sites og dybe produkthierarkier, hvor brugeren skal kunne springe fra en topkategori til en dyb underkategori i én handling.¹⁵

Navigation er et målt smertepunkt, så det betaler sig at få det rigtigt: Baymards benchmark af 334 af de største webshops i USA og Europa fandt, at 76% præsterer på et »middelmådigt« niveau eller værre for hjemmeside- og kategori-navigation.⁵

Hover-baserede dropdowns er desuden den dominerende form på skala: 74% af desktop-webshops bruger dem — mega menuen er altså mainstream-valget til stor navigation.⁴

Hvornår du bruger det — og hvornår ikke

Hvornår du bruger det

Sitet har mange kategorier og underkategorier (fx e-commerce eller store medier).
Brugerne skal kunne overskue hele udbuddet uden dybe klikstier.
Kategorierne har en klar, gruppérbar struktur.

Hvornår du bør undgå det

Navigationen har kun en håndfuld punkter.
Indholdet er primært lineært eller opgavedrevet.

Best practices

Vis alt på én gang — undgå scroll inde i menuen
Hele pointen er skimning på ét blik; en scrollbar inde i panelet ophæver fordelen.¹
Gruppér efter brugernes mentale modeller
Byg grupperne på card sorting og hold en mellem-granularitet — hverken så store, at de er svære at skimme, eller så små, at de vokser i antal.¹
Beskrivende labels med de vigtige ord først
Front-loadede nøgleord skimmes hurtigere, og hvert punkt bør kun optræde ét sted — dubletter forvirrer.¹
Læseretning lodret, ikke vandret
Folk skimmer kolonner oppefra og ned. Sekvensér ikke punkter vandret på tværs af rækker — det bryder skimningen.²
Brug hover-intent-timing
Vent ca. 0,3–0,5 sekund med musen i ro, før panelet åbner; vis feedback inden for 0,1 sekund; og luk først, når musen har været udenfor i mere end 0,5 sekund. Det forhindrer flimren og utilsigtet åbning.³
På e-commerce: brug en hover-forsinkelse på 300–500 ms
Baymard fandt, at 60% af desktop-webshops mangler denne forsinkelse, så menuen flimrer eller lukker på diagonale musebevægelser.⁴
Tilgængelighed: brug »disclosure«-mønstret
W3C anbefaler knapper med aria-expanded og aria-controls frem for den komplekse ARIA menu-rolle — lad links forblive rigtige links.⁶
Understøt tastatur
Enter/Mellemrum åbner panelet eller aktiverer et link, Tab flytter gennem knapper og links, og Escape lukker det åbne panel og returnerer fokus til knappen.⁶

Typiske fejl

Manglende eller svag gruppering
En lang, flad liste i stedet for underinddelte kolonner med overskrifter.
Vandret sekvensering
Punkter, der bør læses lodret, arrangeret vandret på tværs af rækker og imod naturlig skimning.
Dekorative, indholdsløse billeder
Pynt-billeder, der optager dyrebar plads uden at illustrere et faktisk valg, bliver ignoreret.
Uklar organiseringslogik
Hvis sorteringsprincippet ikke kan aflæses på ét blik, går fordelen tabt.
Flimren og for følsom hover
Panelet åbner øjeblikkeligt og lukker, så snart musen driver væk — uden en hover-intent-forsinkelse.

Eksempler i praksis

Amazon

Ofte fremhævet: venstre-rail »All«-flyout og hover-menuer, der eksponerer afdelinger og underkategorier i et stort katalog.

Best Buy

Ofte fremhævet som et kolonne-grupperet mega menu til et stort elektronik-katalog.

Ofte stillede spørgsmål

Hvad er en mega menu?

Et stort dropdown-panel, der viser mange navigationsvalg på én gang, opdelt i overskuelige kolonner med overskrifter. Den egner sig især til store sites med mange sider eller et stort produktkatalog.

Hvornår bør jeg bruge en mega menu frem for en almindelig dropdown?

Når du har mange kategorier eller en dyb sidestruktur, som brugerne skal kunne overskue på én gang. Til få menupunkter er en simpel dropdown eller flad topnavigation bedre.

Hvor hurtigt skal menuen åbne og lukke ved hover?

Vent ca. 0,3–0,5 sekund med musen i ro, før panelet åbner, og vis feedback inden for 0,1 sekund. Luk først, når musen har været udenfor i mere end 0,5 sekund. Det forhindrer, at menuen flimrer.

Er mega menuer et problem for tilgængelighed?

Ikke hvis de bygges rigtigt. W3C anbefaler et disclosure-mønster med knapper, der bruger aria-expanded og aria-controls, frem for den komplekse ARIA menu-rolle. Menuen skal kunne betjenes med tastatur: Enter/Mellemrum åbner, Tab flytter rundt, og Escape lukker.

Fungerer mega menuer på mobil?

Ikke i samme form. Hover findes ikke på touch, og de brede paneler passer ikke til små skærme. På mobil bruges typisk en sammenklappelig (accordion) menu i stedet — genbrug ikke desktop-panelet direkte.