Hamburger menu

Hamburger menu to powszechnie stosowany element interfejsu użytkownika w postaci niewielkiej ikony złożonej z trzech ułożonych poziomo kresek, które wizualnie przypominają warstwy hamburgera. Po kliknięciu lub dotknięciu ikona rozwija ukryte dotąd menu nawigacyjne — najczęściej wysuwane z boku ekranu lub opadające z góry. Rozwiązanie to zyskało ogromną popularność wraz z rozwojem responsywnego web designu i projektowania z myślą o urządzeniach mobilnych.

Na czym polega hamburger menu?

Głównym zadaniem hamburger menu jest oszczędność ograniczonej przestrzeni ekranu. Zamiast wyświetlać całą nawigację na stałe — co na wąskim ekranie smartfona zajęłoby dużą część widoku — projektant zwija ją do jednej ikony i pokazuje dopiero na żądanie użytkownika. Mechanizm działa w prosty sposób:

• Stan zwinięty — widoczna jest wyłącznie ikona, zazwyczaj w rogu nagłówka, oszczędzająca miejsce na treść.
• Interakcja — kliknięcie wyzwala rozwinięcie panelu z linkami, często z animacją wysuwania.
• Stan rozwinięty — pełna lista pozycji nawigacji, zamykana ponownym kliknięciem ikony lub tłem.

Choć ikona kojarzona jest przede wszystkim z wersjami mobilnymi, bywa też stosowana na desktopie w aplikacjach o rozbudowanej strukturze, gdzie porządkuje boczne menu.

Zastosowanie w praktyce

Hamburger menu to dziś niemal standard nawigacji mobilnej, ale jego użycie wymaga rozwagi:

1. Wersje mobilne stron — porządkuje interfejs i zwalnia miejsce na kluczową treść.
2. Aplikacje webowe — chowa rozbudowane menu boczne, które użytkownik przywołuje w razie potrzeby.
3. Kompromis UX — ukrycie nawigacji obniża jej wykrywalność, dlatego na dużych ekranach warto rozważyć widoczne menu poziome zamiast ikony.

Z perspektywy UX dobrą praktyką jest wyraźne, kontrastowe oznaczenie ikony oraz dbałość o dostępność — obsługę z klawiatury i poprawne etykiety dla czytników ekranu.