Hamburger menu to ikona trzech poziomych kresek, która po kliknięciu lub dotknięciu otwiera panel nawigacyjny. Często stosuje się je na telefonach, gdzie w nagłówku jest mniej miejsca niż na komputerze. Ma jednak koszt: klient musi wykonać dodatkową czynność, zanim zobaczy dostępne kategorie. Dlatego wygodne menu to nie sama ikona, ale przemyślana struktura, czytelne etykiety, łatwe do obsługi przyciski i najważniejsze skróty widoczne od razu.
Czym jest hamburger menu i jak działa w sklepie internetowym?
Hamburger menu, nazywane też menu hamburgerowym, to element interfejsu, który umieszcza nawigację za przyciskiem, zwykle z ikoną trzech poziomych kresek (≡). Po jego wybraniu na ekranie pojawia się panel z linkami do kategorii, podkategorii i innych sekcji sklepu. Panel można zamknąć przyciskiem „X”, ponownym wybraniem przycisku menu, a w niektórych projektach także dotknięciem zaciemnionego tła lub gestem przesunięcia.
Skąd nazwa? Trzy kreski mają przypominać przekrój burgera: bułkę, kotlet i drugą bułkę. Ikona powstała na potrzeby interfejsu komputera Xerox Star na początku lat 80. Zaprojektował ją Norm Cox. Jej popularność w nawigacji stron i aplikacji wzrosła wraz z rozwojem urządzeń mobilnych, na których trudniej zmieścić pełny pasek menu.
Gdzie najczęściej można spotkać hamburger menu?
- w nagłówku mobilnej wersji sklepu, obok logo, wyszukiwarki lub koszyka,
- w aplikacjach mobilnych, czasem jako jedna z opcji dolnego paska,
- w serwisach z rozbudowaną strukturą, w których nie da się pokazać wszystkich linków naraz.
Ikona hamburgera i menu to dwie różne rzeczy. Ikona jest przyciskiem, który otwiera nawigację. Menu to panel, który się za nim kryje. Zrozumiała ikona pomaga znaleźć panel, ale dopiero jego struktura i etykiety ułatwiają klientowi dotarcie do produktu.
Menu mobilne jest tylko jedną z dróg do produktu. Nie zastępuje wyszukiwarki, filtrów na stronie kategorii ani logicznej struktury asortymentu. W dobrze zaprojektowanym sklepie te elementy się uzupełniają: klient, który wie, czego szuka, może wpisać nazwę produktu w wyszukiwarce, a osoba przeglądająca ofertę może przejść przez menu do kategorii i zawęzić wybór filtrami. .
Kiedy warto zastosować hamburger menu, a kiedy lepiej wybrać widoczną nawigację?
Na telefonie hamburger menu może być przydatne, zwłaszcza gdy sklep ma wiele kategorii. Warto wtedy rozważyć, czy najważniejsze opcje, takie jak wyszukiwarka, wybrane działy lub koszyk, mogą pozostać widoczne w nagłówku albo w innym stałym miejscu. Na komputerze zazwyczaj łatwiej pokazać główne kategorie bezpośrednio w nagłówku.
Zalety hamburger menu:
- oszczędza miejsce w nagłówku na małym ekranie,
- pozwala uporządkować wiele kategorii i podkategorii,
- może zachować podobny układ na różnych podstronach,
- jest znanym wzorcem, choć nie każdy użytkownik od razu rozpozna jego funkcję.
Ograniczenia hamburger menu:
- klient nie widzi kategorii, dopóki nie otworzy panelu,
- dodaje krok przed przejściem do nawigacji,
- nowe osoby mogą nie wiedzieć, co sklep sprzedaje, jeśli oferta jest schowana,
- niewłaściwe wdrożenie może utrudnić obsługę klawiaturą lub czytnikiem ekranu.
Na komputerze warto zacząć od widocznych opcji nawigacji, zwłaszcza jeśli sklep ma kilka głównych działów. Przy dużym katalogu można rozważyć rozwijane menu lub mega menu. Na telefonie wybór zależy od liczby i nazw kategorii, dostępnego miejsca oraz zachowań klientów.
| Rozwiązanie | Jak wygląda | Kiedy warto je rozważyć |
| Widoczne linki | Kilka głównych kategorii jako zakładki lub przewijany pasek pod nagłówkiem | Gdy sklep ma niewiele głównych działów albo specjalistyczną ofertę |
| Hamburger menu | Cała nawigacja lub jej większość znajduje się za ikoną w nagłówku | Gdy liczba pozycji utrudnia pokazanie ich wszystkich na małym ekranie |
| Nawigacja łączona | Najważniejsze opcje są widoczne, pozostałe znajdują się w rozwijanym panelu | Gdy część linków warto wyeksponować, ale nie ma miejsca na całą strukturę |
Przykład: sklep z kawą ma cztery główne kategorie: „Kawa ziarnista”, „Kawa mielona”, „Herbata” i „Akcesoria”. Można przetestować widoczny, przewijany pasek. W sklepie budowlanym z wieloma działami przydatne może być menu rozwijane, ale najpierw warto sprawdzić, które kategorie klienci wybierają najczęściej i czy nie da się ich uporządkować w prostszy sposób.
Decyzję podejmij na podstawie liczby głównych pozycji, złożoności katalogu, zachowań klientów i testów. To, co sprawdzi się w jednym sklepie, nie musi być dobrym rozwiązaniem w innym.
Jak zaprojektować intuicyjne hamburger menu? Najważniejsze zasady UX
Klient powinien móc przewidzieć, co znajdzie pod daną pozycją. Jeśli musi otwierać kolejne sekcje na próbę, menu utrudnia nawigację, zamiast w niej pomagać.
Checklista do samodzielnej oceny menu
- Czy etykiety są zrozumiałe bez dodatkowych wyjaśnień?
- Czy najważniejsze kategorie widać od razu po otwarciu panelu?
- Czy podmenu da się wygodnie obsłużyć kciukiem na ekranie telefonu?
- Czy klient wie, jak cofnąć się o poziom wyżej i jak zamknąć menu?
- Czy wyraźnie widać różnicę między pozycjami rozwijającymi podmenu a linkami ładującymi stronę kategorii?
- Czy menu działa i wygląda tak samo na wszystkich kluczowych podstronach?
Jak powinno wyglądać hamburger menu na urządzeniach mobilnych?
Projekt menu mobilnego powinien uwzględniać mały ekran i obsługę dotykową. Samo zmniejszenie wersji desktopowej może nie wystarczyć, jeśli lista kategorii jest długa lub ma wiele poziomów.
Przycisk hamburger menu: miejsce i oznaczenie
Umieść ikonę w widocznym miejscu w nagłówku, na przykład po lewej lub prawej stronie logo. Ważne, żeby odróżniała się od innych ikon i pozostawała w stałym miejscu. Możesz dodać obok niej etykietę „Menu”, szczególnie jeśli testy pokazują, że sama ikona jest trudna do zauważenia lub rozpoznania
Przycisk powinien mieć dostępną nazwę dla czytników ekranu, na przykład „Otwórz menu”, oraz informować o stanie panelu. W praktyce oznacza to odpowiednie oznaczenie przycisku i aktualizowanie jego stanu, na przykład aria-expanded=”true” po otwarciu menu i aria-expanded=”false” po zamknięciu.
Przyklejany nagłówek (sticky) może ułatwiać dostęp do nawigacji podczas przewijania, ale zajmuje część ekranu. Warto przetestować, czy faktycznie pomaga klientom w danym sklepie. Dolny pasek nawigacji także może być rozwiązaniem, jeśli najważniejsze funkcje są często używane i klienci mogą wygodnie sięgać do nich kciukiem.
Formy panelu
| Forma | Jak działa | Kiedy można ją rozważyć |
| Panel wysuwany z boku (off-canvas) | Wysuwa się z lewej lub prawej strony i zajmuje część ekranu | Gdy lista jest dłuższa i warto zachować widok części strony |
| Menu pełnoekranowe | Zajmuje ekran, a kolejne poziomy mogą otwierać się jako osobne widoki | Gdy użytkownik ma przechodzić przez kilka poziomów kategorii |
| Lista rozwijana (akordeon) | Podkategorie otwierają się pod wybraną pozycją | Przy krótszych listach i prostszej hierarchii |
| Dolny panel (bottom sheet) | Wysuwa się od dołu ekranu | Gdy taki układ pasuje do projektu i jest wygodny na testowanych urządzeniach |
Pola dotykowe, odstępy i czytelność
Standard WCAG 2.2 na poziomie AA określa minimalny rozmiar celu dotykowego na 24 × 24 piksele CSS (z pewnymi wyjątkami dotyczącymi odstępów od sąsiednich elementów). W praktyce warto jednak projektować większe pola i unikać ściśniętych linków. Dla porównania, wytyczne dla natywnych interfejsów mobilnych sugerują rozmiary 44 × 44 pt (Apple) oraz 48 × 48 dp (Google).
Zadbaj również o czytelną czcionkę, wysoki kontrast tekstu w stosunku do tła i wyraźne stany aktywne (np. podświetlenie po kliknięciu). Menu należy bezwzględnie przetestować na telefonach o różnych przekątnych ekranu, także w orientacji poziomej.
Zrozumiałe działanie podmenu
Użytkownik musi od razu wiedzieć, czy kliknięcie w daną pozycję rozwinie podmenu, czy od razu przeniesie go na stronę kategorii.
- Pozycje rozwijane oznacz czytelną strzałką.
- Wewnątrz podmenu dodaj link „Zobacz wszystkie [nazwa kategorii]”.
- Po przejściu o poziom niżej zapewnij przycisk powrotu, np. „‹ Wróć do: Buty”.
Dostępność sklepu (Polski Akt o Dostępności)
Od 28 czerwca 2025 r. obowiązuje w Polsce ustawa wdrażająca Europejski Akt o Dostępności (EAA), która obejmuje również usługi handlu elektronicznego (e-commerce). Choć przewidziano wyjątki dla mikroprzedsiębiorstw (warto upewnić się, czy sklep im podlega), wdrożenie dostępnej nawigacji to po prostu dobry biznes – ułatwia zakupy wszystkim użytkownikom.
O czym pamiętać podczas testów dostępności:
- Sprawdź, czy menu można w pełni obsłużyć z poziomu klawiatury i czytnika ekranu.
- Upewnij się, że po otwarciu panelu użytkownik może po nim nawigować bez gubienia elementu aktywnego.
- W przypadku menu modalnego zadbaj o zamknięcie fokusu (focus trap) wewnątrz panelu, a po jego zamknięciu – o przywrócenie fokusu do przycisku otwierającego.
Hamburger menu a SEO – jak nawigacja wpływa na widoczność sklepu w Google?
Samo schowanie menu za ikoną nie stanowi problemu dla SEO. Znaczenie ma między innymi to, czy linki są dostępne dla robotów wyszukiwarek i czy pomagają zrozumieć strukturę serwisu.
Klient widzi panel, który otwiera po dotknięciu przycisku. Google analizuje kod strony i linki między podstronami. W sklepie warto zadbać o czytelne połączenia między stroną główną, kategoriami, podkategoriami i produktami.
Co zrobić, żeby menu wspierało nawigację i ułatwiało Google odkrywanie stron?
- Używaj linków HTML z adresem docelowym. Google zasadniczo może przetwarzać linki zapisane jako element <a> z atrybutem href. Samo zdarzenie JavaScript, na przykład onclick na elemencie <span>, nie zastępuje takiego linku. Google może przetwarzać linki dodawane przez JavaScript, jeśli po renderowaniu są prawidłowymi linkami HTML
- Sprawdź linki w wyrenderowanej stronie. Jeśli menu lub jego elementy są generowane przez skrypt, skontroluj ich obecność za pomocą narzędzia do sprawdzania adresu URL w Google Search Console.
- Pisz opisowe teksty linków. „Kurtki zimowe damskie” informuje o stronie docelowej lepiej niż „Zobacz”.
- Zachowaj równoważną treść na urządzeniach mobilnych i desktopowych. Google korzysta z wersji mobilnej przy indeksowaniu. Możesz stosować inną formę prezentacji, na przykład akordeon, ale ważne treści powinny być dostępne także na telefonie.
- Nie ładuj kluczowych linków dopiero po interakcji bez sprawdzenia efektu. Jeśli nawigacja pojawia się dopiero po kliknięciu i nie ma jej w wyrenderowanym kodzie, sprawdź, czy Google może ją przetworzyć i odkryć adresy kategorii.
Hamburger menu samo w sobie nie poprawia pozycji w Google i nie jest osobnym czynnikiem rankingowym. Dobrze zaprojektowane menu może wspierać nawigację wewnętrzną, ułatwiać klientom znalezienie produktów i pomagać robotom odkrywać podstrony, jeśli linki są prawidłowo wdrożone.
Najczęstsze błędy w projektowaniu hamburger menu i jak ich uniknąć
Klient nie znajduje produktu
- Niejasne nazwy kategorii: Stosuj proste, dosłowne etykiety (np. „Nowości”) zamiast kreatywnych haseł.
- Słabo widoczna ikona: Zwiększ jej kontrast, oddziel od logo i w razie potrzeby dodaj tekstową etykietę „Menu”.
- Zbyt wiele pozycji: Długa lista na jednym poziomie utrudnia czytanie. Pogrupuj kategorie logicznie.
- Nadmierna liczba poziomów: Skróć ścieżkę kliknięć, a szczegółowe zawężanie wyboru (rozmiar, kolor) przenieś do filtrów asortymentu.
Klient się gubi lub irytuje
- Niejasne zachowanie podmenu: Wyraźnie oznaczaj rozwijane pozycje i dodawaj w nich link „Zobacz wszystkie [nazwa kategorii]”.
- Trudny powrót: Umieść przycisk zamknięcia panelu oraz powrotu o poziom wyżej w przewidywalnym miejscu.
- Małe pola dotykowe: Zwiększ obszar aktywny linków, aby ułatwić wygodne klikanie kciukiem.
Menu nie działa poprawnie
- Błędy wyświetlania: Upewnij się, że długie menu można swobodnie przewijać bez ucinania dolnych pozycji i że działa ono poprawnie w orientacji poziomej.
Kto powinien ocenić intuicyjność menu?
Klienci. Osoba znająca sklep na pamięć rzadko zauważa niejasności. Weryfikuj skuteczność menu, analizując nagrania sesji, mapy kliknięć, ścieżki w GA4 oraz frazy wpisywane w wyszukiwarkę. Warto też przeprowadzać szybkie testy: poproś osobę spoza firmy o znalezienie konkretnego produktu w telefonie i obserwuj, w którym miejscu się zatrzymuje.
Jak wdrożyć i dostosować hamburger menu w sklepie Shoper?
W sklepie na Shoperze dostępny układ nawigacji zależy od używanego szablonu, jego wersji i zainstalowanych rozszerzeń. Przed zmianami sprawdź dokumentację swojego szablonu i przetestuj sklep na telefonie.
Menu odzwierciedla strukturę sklepu, dlatego zacznij od sprawdzenia nazw, kolejności i poziomów kategorii. Więcej informacji znajdziesz w artykule „Kategorie w sklepie internetowym”.
Możliwości konfiguracji menu zależą od szablonu i edytora. Sprawdź, które kategorie i strony informacyjne możesz dodać do nawigacji oraz jak ustawić ich kolejność. Po zmianach otwórz sklep na telefonie i sprawdź menu na różnych ekranach.
W Shoper App Store znajdziesz między innymi aplikację „Nawigacja Menu Pro”. Pozwala ona zbudować mega menu z ikonami, etykietami, kafelkami i siatką kategorii oraz rozbudowany panel mobilny. To płatna aplikacja, dlatego przed instalacją sprawdź jej aktualną cenę i zgodność z Twoim szablonem. Zobacz aplikację Nawigacja Menu Pro
Przed i po zmianie porównaj między innymi wejścia do kategorii z menu, użycie wyszukiwarki i konwersję na urządzeniach mobilnych. Ustal wcześniej, jakie zachowanie chcesz poprawić, i analizuj wyniki z uwzględnieniem zmian w ofercie, kampaniach oraz sezonowości.
Hamburger menu – najczęstsze pytania
Ikona składa się z trzech poziomych kresek, które mają przypominać przekrój burgera. Została zaprojektowana dla interfejsu komputera Xerox Star na początku lat 80.
Może się sprawdzić, szczególnie na telefonie i przy dużej liczbie kategorii. Warto sprawdzić, czy najważniejsze skróty, takie jak wyszukiwarka, wybrane kategorie i koszyk, powinny pozostać widoczne.
Zwykle w nagłówku, w widocznym miejscu i oddzielnie od logo oraz pozostałych ikon. Najważniejsze jest, żeby klienci mogli łatwo je znaleźć i żeby jego położenie było spójne na podstronach.
Dwa lub trzy poziomy mogą być dobrym punktem wyjścia, ale optymalna liczba zależy od struktury katalogu i sposobu szukania produktów. Przetestuj, czy klienci potrafią sprawnie dotrzeć do kategorii.
Na komputerze często warto pokazać główne kategorie bezpośrednio w nawigacji. Przy dużej liczbie pozycji można rozważyć menu rozwijane. Wybór najlepiej dopasować do struktury sklepu i sprawdzić w testach
Obserwuj nagrania sesji i mapy kliknięć, analizuj użycie wyszukiwarki i ścieżki w analityce. Poproś też kilka osób spoza firmy, żeby znalazły konkretny produkt, i sprawdź, gdzie napotykają trudności.