Danskerne handler stadig oftere på mobilen. Ifølge Dansk Erhvervs E-handelsanalyse for 2025 blev 55 % af alle onlinekøb foretaget via smartphone. Derfor skal en webshop være nem at bruge på en lille skærm. Hvis menupunkterne ligger for tæt, eller kunderne har svært ved at finde rundt, risikerer de at opgive købet og handle et andet sted.
Mange webshops og apps bruger derfor en hamburgermenu. Ikonet med de tre vandrette streger er let at genkende og viser, hvor du finder sidens øvrige menupunkter. Menuen åbner, når du trykker på ikonet, så den ikke optager unødig plads på skærmen.
Her ser vi nærmere på hamburgermenuens historie, fordele og ulemper, og hvordan du kan bruge den til at gøre din webshop mere overskuelig på mobilen.
Hvad er en hamburgermenu?
I mange år var den vandrette menu standard på hjemmesider, hvor de forskellige kategorier lå side om side øverst på skærmen. Men da smartphones for alvor slog igennem i slutningen af 00'erne og begyndelsen af 10'erne, opstod der et behov for en mere pladsbesparende løsning. De traditionelle menuer fyldte simpelthen for meget på de små mobilskærme.
Her blev hamburgermenuen (☰) populær. Det enkle ikon består af tre vandrette streger oven på hinanden, der med lidt fantasi ligner en burger med bolle og bøf. Når du trykker på ikonet, åbner menuen, så du kan se de forskellige menupunkter. Du kan også lukke den igen for at få mere plads på skærmen. Menuikonet sidder som regel øverst i venstre eller højre hjørne af en hjemmeside eller app, som det også fremgår af Det Fælles Designsystems vejledning om mobilmenuer.
Hamburgermenuens historie
Hamburgermenuen er faktisk ældre end de moderne smartphones. Allerede i 1981 udviklede designeren Norm Cox ikonet til computeren Xerox Star, som var en af de første computere med en grafisk brugerflade. Cox ville skabe et enkelt og genkendeligt ikon, som brugerne kunne klikke på for at åbne en liste med forskellige valgmuligheder.
Ikonet blev dog ikke særlig udbredt i første omgang. Det fandt blandt andet vej til Windows 1.0 i 1985, men forsvandt siden fra de fleste brugerflader. Omkring 2009 fik det nyt liv, da smartphones begyndte at vinde frem. De små skærme gav nemlig udviklerne en udfordring: Hvordan kunne de samle alle menupunkterne uden at fylde hele skærmen? Her viste det kompakte menuikon sig at være en praktisk løsning.
Da apps som Twitter og Facebook begyndte at bruge ikonet, blev det hurtigt mere udbredt. Det dukkede også op i Apples lydoptager på iPhone. Siden er de tre vandrette streger blevet et velkendt symbol for en menu, der kan åbnes og lukkes efter behov.
Fordele og ulemper ved hamburgermenuen
En hamburgermenu fungerer godt på mobilen, hvor pladsen er begrænset. På større skærme kan en synlig navigationsbjælke eller fanemenu dog være et bedre valg. Her er de vigtigste fordele og ulemper:
Fordele
Menuikonets største fordel er, at det næsten ikke fylder noget. Det giver mere plads til billeder, produkter og andet indhold og gør især mobilvisningen mere overskuelig. Når kunden trykker på ikonet, åbner navigationsmenuen. Den kan for eksempel glide ind fra siden, folde sig ned eller dække hele skærmen. Når kunden er færdig, kan menuen lukkes igen.
Ulemper
Ulempen ved en skjult menu er, at kunderne ikke kan se alle valgmuligheder med det samme. Især på computere kan det gøre produktkategorier og andre sider sværere at finde. Som det danske webbureau Dyna påpeger, kræver en skjult menu også ekstra klik. Kunder, der ikke genkender ikonet, risikerer helt at overse menuen.
En løsning er responsive designskabeloner, hvor navigationen tilpasses skærmens størrelse. Din webshop kan for eksempel vise en traditionel vandret menu med synlige kategorier på computeren og skifte til en hamburgermenu på mobilen. Så er kategorierne nemme at finde, uden at menuen optager for meget plads på den lille skærm.
Eksempler fra virkeligheden: Hamburgermenuer i aktion
Mange webshops bruger responsivt design, så hamburgermenuen kun vises på mobilen, mens menuen på computeren ser anderledes ud. Her er to eksempler på webshops, der bruger denne type navigation på forskellige måder:
TCB Jeans
TCB Jeans har valgt en enkel løsning med det klassiske menuikon med tre vandrette streger øverst på mobilsiden. Når du trykker på ikonet, glider en menu ind fra venstre med links til Hjem, Produkter og Om os. Ud for Produkter er der et lille plustegn, som viser, at du kan åbne flere valgmuligheder.
TCB Jeans bruger også en hamburgermenu på computeren. Det giver plads til store billeder og gør det nemmere at fremhæve produkter og tilbud. På mobilen lægger menuen sig oven på sidens indhold, når du åbner den, og kan nemt lukkes igen. Der er flere fordele ved TCB Jeans' løsning:
- Enkelt design. I stedet for at presse mange menupunkter ind på en lille skærm er de samlet i én menu, så siden virker mere overskuelig.
- Genkendeligt ikon. De tre vandrette streger er et velkendt symbol, som de fleste mobilbrugere forbinder med en menu.
- Mere plads til produkterne. Når navigationen er skjult, får produktbillederne mere plads og kan fange kundernes opmærksomhed.
Gymshark
Gymsharks webshop viser også, hvordan navigationen kan tilpasses forskellige skærmstørrelser. På computeren vises menupunkterne direkte, mens de på mobilen er samlet i en hamburgermenu øverst til venstre. Når du trykker på ikonet, åbner en menu med et søgefelt og undermenuer med produktkategorier. Du lukker menuen igen ved at trykke på krydset øverst til højre.
Gymsharks hamburgermenu gør det nemt for kunderne at finde det, de leder efter. Tilbud og nyt tøj vises øverst, så kunderne hurtigt får øje på dem. Menuikonet sidder, hvor de fleste forventer at finde det, og menupunkterne vises i en enkel og overskuelig liste.
Tips til en vellykket hamburgermenu
En god menu gør det nemt for kunderne at finde rundt i din webshop. Her får du seks tips, der kan forbedre brugeroplevelsen og gøre det lettere for kunderne at handle:
Gør menuikonet nemt at finde
Selvom menuikonet er lille, skal kunderne hurtigt kunne få øje på det. Placer det øverst til venstre eller højre, hvor de fleste er vant til at finde menuen. Sørg også for, at det har samme placering på alle sider i din webshop.
Brug det velkendte menuikon
Hold dig til de tre vandrette streger (☰), som de fleste kender fra andre hjemmesider og apps. Det velkendte symbol gør det nemt for kunderne at se, hvor de kan åbne menuen.
Prioritér menupunkternes hierarki
Sørg for, at menupunkterne er organiseret i en logisk rækkefølge. Placer de vigtigste og mest besøgte kategorier øverst, og overvej et søgefelt, så kunderne hurtigt kan finde de produkter, de leder efter.
Gør den mobilvenlig og tilgængelig
Menuen skal fungere godt på både mobil og tablet. Sørg for god afstand mellem menupunkterne, så kunderne nemt kan trykke på dem med fingeren. Den skal også kunne betjenes med tastatur, så flere kan bruge din webshop.
Tilføj animation og visuel feedback
Små animationer kan gøre det tydeligere, hvad der sker, når kunden åbner menuen. De tre streger kan for eksempel skifte til et kryds, som viser, at menuen kan lukkes igen. En menu, der glider ind fra siden eller toner frem, gør det også nemt at se, hvor menupunkterne er. Du kan lade ikonet skifte farve eller størrelse en smule, når kunden trykker på det. Hold effekterne enkle, så de ikke fjerner opmærksomheden fra indholdet.
Test og indhent feedback
Test menuen med rigtige brugere, før du tager den i brug. Bed dem finde bestemte produkter eller åbne en undermenu, og læg mærke til, hvor de får problemer. Du kan eksempelvis bruge en tænke-højt-test, hvor brugerne fortæller, hvad de tænker, mens de prøver menuen af. Brug deres feedback til at gøre navigationen bedre.
Sådan bruger du en hamburgermenu sammen med andre navigationsværktøjer
Din webshop behøver ikke nøjes med én type navigation. Forskellige menuer og knapper har hver deres fordele, og den rigtige kombination kan gøre det lettere for kunderne at finde rundt og komme videre med deres køb.
Når du indretter din webshop, bør menuen, søgefeltet og produktfiltrene fungere godt sammen. Kunderne skal nemt kunne finde produkter, lægge dem i kurven og gå til betaling. Sørg også for, at alle knapper og menupunkter er nemme at trykke på med fingeren. Prøv forskellige løsninger, og se, hvad der fungerer bedst for dine kunder:
- Topnavigation og hamburgermenu. Vis de vigtigste kategorier og funktioner, som Shop og Kurv, direkte i topmenuen. Brug hamburgermenuen til sider, kunderne sjældnere besøger, som Om os, Kontakt, Kundeservice og Handelsbetingelser. Så er de vigtigste funktioner altid synlige, mens de øvrige sider stadig er nemme at finde.
- Fanenavigation og hamburgermenu. Brug faner på dine kategorisider, så kunderne kan skifte mellem for eksempel Nyheder og Bestsellere. Du kan også tilføje en funktion til at sortere efter pris. Hamburgermenuen bruges til at finde rundt mellem webshoppens overordnede kategorier, mens fanerne hjælper kunderne med at finde de rigtige produkter.
- Fastgjort topmenu og hamburgermenu. En fastgjort topmenu bliver øverst på skærmen, selvom kunden scroller ned på siden. Her kan du placere genveje til de vigtigste kategorier, mens hamburgermenuen samler de mindre besøgte sider.
Webshoppen Fly by Jing er et eksempel på en kombination af forskellige menutyper. Her bruges hamburgermenuen til den overordnede navigation, mens en fanemenu på shoppingsiden gør det nemt at skifte mellem de fire kategorier "Sauces", "Sets", "Pantry" og "Merch"..
Ofte stillede spørgsmål om hamburgermenu
Hvorfor hedder det en hamburgermenu?
Navnet kommer af, at de tre vandrette streger minder om en hamburger med bolle og bøf. På dansk kaldes ikonet også en burgermenu.
Hvad er en hamburgermenu på et website?
Det er et ikon med tre vandrette streger, der åbner en navigationsmenu, når du klikker eller trykker på det. Det bruges især på mobilen, hvor det sparer plads på skærmen.
Hvad kaldes menuen med tre prikker?
Menuen med tre lodrette prikker (⋮) kaldes ofte en overflowmenu eller en kebabmenu. Den bruges typisk til at samle ekstra funktioner og valgmuligheder, som ikke behøver at være synlige hele tiden.
Er der særlige krav til hamburgermenuer i danske webshops?
Der er ingen særlige danske regler for selve menuikonet, men webshops, der er omfattet af tilgængelighedsloven, skal blandt andet have navigation, der er nem at forstå og kan bruges med tastatur. Kravene gælder fra den 28. juni 2025, men mikrovirksomheder er undtaget.
