Mobil
Burgermenu & mobilmenu
Burgermenuen gemmer navigationen bag et ikon med tre streger og frigør skærmplads til indholdet. Den er blevet standard på mobil, men er også et af de mest omdiskuterede mønstre i UX: Nielsen Norman Groups data viser, at skjult navigation bliver brugt mindre og opdaget sjældnere end synlig. Her er evidensen, de situationer hvor burgermenuen er berettiget — og hvornår en synlig fane-bjælke er det bedre valg.
Definition
En burgermenu (eller mobilmenu) er et navigationsmønster, hvor de primære eller sekundære menupunkter er skjult bag et ikon — typisk tre vandrette streger — og først foldes ud, når brugeren trykker på det. Mønstret sparer skærmplads på små enheder, men gør navigationen mindre synlig, fordi punkterne ikke er umiddelbart på skærmen.
Hvorfor det virker
Burgermenuen løser et reelt problem: på små skærme er plads en knap ressource, og ved at skjule navigationen får indholdet forrang. NN/g fremhæver netop, at mønstret er bedst egnet til indholdstunge sites og apps, hvor folk primært browser — ikke som standardvalg til al navigation.3
Men prisen er lavere opdagbarhed. I NN/g’s studie med 179 deltagere på tværs af 6 sites — på både telefon og desktop — brugte folk skjult navigation i kun 27% af tilfældene på desktop, mod 48% for synlig og 50% for kombineret navigation. Samlet gav skjult navigation over 20% fald i opdagbarhed.1
Skjult navigation gør opgaverne langsommere og sværere. I samme studie var folk mindst 39% langsommere på desktop og 15% langsommere på mobil (sammenlignet med kombineret navigation), og den selvrapporterede sværhedsgrad steg 21% over for synlig og 11% over for kombineret navigation.1
Straffen er størst på desktop. Fordi der her er rigelig plads til synlige menupunkter, er det svært at retfærdiggøre at gemme dem bag et ikon — burgermenuen giver mest mening på små skærme, ikke på store.1
Selve ikonet er ikke længere det største problem: NN/g finder, at de fleste i dag genkender de tre streger som “menu” — især i det forventede hjørne øverst på skærmen. En tekst-label hjælper dog stadig de mindre erfarne brugere og styrker informationssporet.2
Hvornår du bruger det — og hvornår ikke
Hvornår du bruger det
- Til sekundær- eller overflow-navigation, hvor de vigtigste destinationer allerede er synlige et andet sted (kombineret navigation).
- Når informationsarkitekturen reelt er stor og ikke kan rummes i en synlig fane-bjælke med få punkter.
- På små, pladsbegrænsede skærme, hvor indholdet skal prioriteres over en permanent menu.
Hvornår du bør undgå det
- Når du kun har få primære destinationer — så er en synlig fane-/tab-bjælke hurtigere og mere opdagbar.
- På desktop, hvor der er rigelig plads, og hvor det at skjule navigationen straffer opdagbarheden hårdest.
Best practices
Vælg synlig navigation, når arkitekturen er lille
Har du kun få primære destinationer, så vis dem — en fane-/tab-bjælke er hurtigere og mere opdagbar end en burger. NN/g fremhæver, at fane- og navigationsbjælker passer bedst til sites med relativt få valgmuligheder, og at en tab-bjælke i praksis er begrænset til omkring fem punkter.3
Brug kombineret navigation frem for at skjule alt
Vis de vigtigste destinationer direkte, og læg resten i burgermenuen. Kombineret navigation klarede sig markant bedre end fuldt skjult navigation på både brug, opdagbarhed og oplevet sværhedsgrad i NN/g’s test.1
Sæt en “Menu”-label på ikonet
Selv om ikonet ofte genkendes, øger en tydelig, læsbar label med høj kontrast informationssporet og hjælper de mindre rutinerede brugere. Tredjepartsforskning peger på, at ordet “Menu” er en anelse mere populært end det bare ikon.2
Placér ikonet, hvor folk leder efter det
Brugere kigger konsekvent efter skjult navigation øverst på skærmen. Et burger-ikon i et uventet hjørne bliver langsommere at finde — hold dig til den etablerede placering.2
Reservér burgeren til sekundær og overflow-navigation
Mønstret er stærkest, når det rummer det, der ikke behøver at være fremme hele tiden. Er der reelt mange destinationer, er en skjult menu et rimeligt sted at samle overflow — men de mest brugte veje bør stadig være synlige.3
Gør tryk-målet stort nok
Ikon og menupunkter skal være nemme at ramme med en tommelfinger. WCAG 2.2 kræver mindst 24×24 CSS-pixels på niveau AA (kriterium 2.5.8), mens Apples designretningslinjer anbefaler et tryk-areal på mindst 44×44 pt for alle kontroller. Brug padding til at nå målet, hvis det visuelle ikon er mindre.45
Byg tilgængeligheden ind fra start
Knappen skal have et tilgængeligt navn (fx aria-label="Menu"), afspejle sin tilstand med aria-expanded, kunne betjenes med tastatur, og flytte fokus fornuftigt ind i og ud af den udfoldede menu. Ellers er navigationen utilgængelig for skærmlæser- og tastaturbrugere.
Typiske fejl
Primærnavigation skjult på desktop
Den adfærd, evidensen advarer stærkest imod. På desktop er der plads til synlige menupunkter, og at gemme dem bag en burger koster opdagbarhed og hastighed uden en pladsgevinst, der berettiger det.
Bart ikon i et uventet hjørne
Uden label og uden for den forventede placering øverst bliver menuen langsommere at finde. Kombinationen af skjult navigation og lavt informationsspor forstærker frafaldet.
For små eller for tætte tryk-mål
Et lille ikon eller menupunkter, der ligger klos op ad hinanden, giver fejltryk — især for brugere med motoriske udfordringer. Hold dig til de dokumenterede minimumsstørrelser.
Manglende tilstand og fokus-håndtering
Uden aria-expanded og ordentlig fokus-styring ved skærmlæser- og tastaturbrugere ikke, om menuen er åben, og kan ikke navigere ind i den. Det gør et centralt navigationselement ubrugeligt for dem.
Eksempler i praksis
iOS-fane-bjælke (synligt alternativ)
Apples fane-bjælke i bunden af skærmen er det mønster, der ofte fremhæves som modstykket til burgeren: tre-fem topniveau-sektioner, der altid er synlige og et fast tryk-mål. Den fungerer, netop fordi antallet af destinationer holdes lavt.
Indholdstunge medier og webshops
Store nyhedssites og webshops med dyb kategoristruktur fremhæves ofte som steder, hvor en burger- eller drawer-menu giver mening — typisk kombineret med et par synlige genveje (søg, kurv, konto), så de vigtigste veje ikke gemmes væk. Betragt det som illustrativt frem for som verificeret, aktuel adfærd.
Ofte stillede spørgsmål
Er burgermenuen dårlig UX?
Ikke i sig selv. NN/g’s data viser, at skjult navigation bliver brugt mindre og opdaget sjældnere end synlig, men mønstret er et fornuftigt valg til sekundær navigation og til reelt store informationsarkitekturer på små skærme. Problemet opstår, når man skjuler den primære navigation uden grund — især på desktop.
Hvornår bør jeg bruge en synlig fane-bjælke i stedet?
Når du kun har få primære destinationer. En fane-/tab-bjælke er da hurtigere og mere opdagbar. NN/g bemærker, at fane-bjælker i praksis er begrænset til omkring fem punkter — har du flere, kan overflow lægges i en skjult menu.
Skal jeg skrive “Menu” ved siden af ikonet?
Det anbefales. De fleste genkender ikonet i dag, men en tydelig label med høj kontrast styrker informationssporet og hjælper mindre rutinerede brugere. Ordet “Menu” er en anelse mere populært end det bare ikon.
Hvor stort skal burger-ikonet være?
Tryk-arealet skal være mindst 24×24 CSS-pixels for at opfylde WCAG 2.2 på niveau AA (kriterium 2.5.8). Apples retningslinjer anbefaler mindst 44×44 pt. Er det synlige ikon mindre, kan du nå målet med padding omkring det.
Hvad kræver burgermenuen for at være tilgængelig?
Knappen skal have et tilgængeligt navn, afspejle om menuen er åben via aria-expanded, kunne betjenes med tastatur og flytte fokus korrekt ind i og ud af den udfoldede menu. Ellers er navigationen utilgængelig for skærmlæser- og tastaturbrugere.
Kilder
Relaterede mønstre
Udforsk videre
Megamenu
Brede dropdowns, der viser en hel sektion på én gang.
Se mønster →Progressiv afsløring
Vis kun kompleksitet, når brugeren faktisk har brug for den.
Se mønster →Swipe-handlinger
Skjulte handlinger på en liste-række, der vises ved at swipe til siden — pladsbesparende, men svære at opdage uden en synlig genvej.
Se mønster →