Menu na stronie internetowej – przegląd popularnych rozwiązań
Nawigacja na stronach internetowych ewoluuje wraz z rozwojem technologii. Kilkanaście lat temu 99% stron internetowych składało się z kolumny bocznej z menu i kolumny głównej z treścią. W dzisiejszych czasach na szczęście jest dużo więcej efektownych rozwiązań menu na stronach internetowych. W tym artykule poznasz najciekawsze propozycje i moje rekomendacje bazujące na ponad 10-letnim doświadczeniu w tworzeniu stron.
Z tego artykułu dowiesz się:
- jakie są rodzaje menu na stronach internetowych
- przykłady menu poziomego na stronie www
- co to jest mega menu
- przykłady menu pionowego na stronie internetowej
- przykłady menu ukrytego na stronie www
- jakie menu stosować na komputerach, a jakie na urządzeniach mobilnych – moje rekomendacje
Rodzaje menu na stronach internetowych
W trakcie tworzenia stron internetowych można przyjąć różne koncepcje rozwiązania głównej nawigacji (menu strony). Bardzo często na stronach internetowych istnieje więcej niż jedno menu, jednak w tym artykule skupimy się tylko na menu głównym, pomijając dodatkowe nawigacje techniczne, linki w stopce, linki w sidebarze (pasku bocznym), itd.
Najczęściej stosowane rozwiązania dla menu strony internetowej to:
- menu poziome (horyzontalne)
- menu pionowe (wertykalne)
- menu ukryte
Dodatkowo każde z tych menu może mieć jeden lub kilka poziomów zagnieżdżenia. Przyjrzyjmy się teraz konkretnym przykładom.
Przykłady menu poziomego na stronach internetowych
Menu poziome to aktualnie najczęściej stosowane rozwiązanie nawigacyjne na stronach internetowych. W tego typu układzie menu zlokalizowane jest gdzieś w górnej części strony, zwykle w okolicach logo. Linki w takim menu ułożone są w jednej poziomej linii (czasem w dwóch, gdy linków jest dużo, jednak nie jest to rekomendowane rozwiązanie – w tej sytuacji warto zastosować menu pionowe, o którym dowiesz się za chwilę).
Przyjęło się, że na stronach internetowych w górnym pasku nawigacyjnym umieszcza się z lewej strony logo, a z prawej strony menu. Istnieją jednak też inne rozwiązania, np. logo w środku, a menu podzielone na lewą i prawą stronę, czy nawet logo po prawej stronie, a menu po lewej.
Menu horyzontalne na stronach internetowych może mieć jeden lub wiele poziomów zagnieżdżenia (tzw. submenu). W przypadku jednego poziomu zagnieżdżenia stosuje się zwykle wysuwany panel pojawiający po najechaniu na link nadrzędny.
Jest to świetne rozwiązanie, gdy nasze menu ma jeden poziom zagnieżdżenia. Zdecydowanie ułatwia użytkownikowi poruszanie się po stronie (mamy więc pozytywny wpływ na user experience), ponieważ nie musi on najpierw wchodzi w link nadrzędny i dopiero szukać linków podrzędnych na podstronie. Takie menu ma też pozytywny wpływ na widoczność naszej strony w Google, ponieważ poprawia linkowane wewnętrzne serwisu. Gdy na naszej stronie internetowej jest więcej poziomów zagnieżdżenia nawigacji, można stosować kolejne submenu, które pojawiają się na przykład z boku.
W mojej ocenie takie rozwiązanie ma sens maksymalnie do drugiego / trzeciego poziomu zagnieżdżenia. W przypadku dalszych zagnieżdżeń poruszanie się po takim menu może być kłopotliwe. Bardzo łatwo jest zjechać myszką poza menu będąc np. na 4 poziomie zagnieżdżenia, a wtedy całe menu nam znika i musimy dostawać się do tego miejsca od nowa. Potrafi to być naprawdę irytujące, gdy trzeci raz próbujemy dostać się w to samo miejsce. Inny problem z dużym zagnieżdżeniem menu horyzontalnego polega na tym, że w pewnym momencie kolejne submenu może wychodzić poza ekran i zwyczajnie będzie ucięte.
Jeśli nasze menu horyzontalne ma dużo poziomów zagnieżdżenia, zdecydowanie lepszym rozwiązaniem jest wykorzystanie tzw. mega menu.
Co to jest mega menu?
Mega menu to specjalne rozwiązanie nawigacyjne dla wielokrotnie zagnieżdżonych menu na stronach internetowych. Mega menu pokazuje się naszym oczom po najechaniu na link nadrzędny w formie szerokiego panelu, który składa się z różnych elementów. Mogą w nim być na przykład:
- kolumny z kolejnymi zagnieżdżeniami menu
- grafiki ilustrujące dane zagadnienie
- linki do promowanych produktów
- dane do szybkiego kontaktu
- inne informacje
Mega menu najczęściej podpinane jest do menu poziomego (horyzontalnego), jednak zdarza się, że widzimy je również w menu pionowych (wertykalnych), które omówimy w dalszej części artykułu.
Przykłady menu pionowego na stronach internetowych
Menu pionowe (wertykalne) było najczęściej stosowanym rozwiązaniem nawigacyjnym w starych stronach internetowych opartych o tabele. Widzieliśmy wtedy zwykle lewą kolumnę z menu oraz prawą kolumnę z treścią strony.
Takie rozwiązanie z biegiem lat ustępowało na rzecz nowoczesnych i estetycznych menu poziomych, o których pisałem wcześniej. Nadal jednak menu pionowe wykorzystywane jest bardzo często na stronach internetowych – szczególnie na takich, gdy mamy bardzo dużo pozycji w menu. Idealnym wręcz zastosowaniem takiego menu są serwisy e-commerce (sklepy internetowe), ponieważ tam mamy zwykle dużo kategorii i podkategorii produktowych. Co ciekawe, w menu pionowym również możemy zastosować rozwijany panel mega menu.
Jeśli nie chcemy jednak stosować rozbudowanego mega menu, ponieważ nasza nawigacja ma jeden stopień zagnieżdżenia, z powodzeniem możemy wykorzystać wysuwane panele pod linkiem nadrzędnym.
Przykłady menu ukrytego na stronach internetowych
Wraz z rozwojem nowych technologii oraz urządzeń mobilnych, coraz częściej na stronach internetowych stosowane jest menu ukryte. Jest to rozwiązanie polegające na tym, że na pierwszym ekranie strony nie widzimy w ogóle menu, a jedynie przycisk, który je otwiera.
Po kliknięciu w przycisk otwiera się nakładka na stronę, w której zaprezentowane są linki menu. Tego typu rozwiązanie jest najczęściej stosowane na urządzeniach mobilnych, jednak coraz więcej firm wdraża taki schemat również na stronach desktopowych (na komputery i duże ekrany). Na pewno takie rozwiązanie zwiększa estetykę strony – nie mamy nadmiaru tekstu. Zmusza jednak użytkownika by wykonał kliknięcie zanim jeszcze zobaczy menu. Może to negatywnie wpływać na user experience, a także być kłopotliwe dla starszej grupy odbiorców, która nie będzie znała tego rozwiązania i poczuje się zagubiona.
Moje rekomendacje odnośnie stosowania menu na komputery i urządzenia mobilne
Podczas tworzenia stron internetowych dla moich Klientów, najczęściej stosuję taki zestaw rozwiązań w kwestii menu:
- jeśli główny poziom nawigacji ma maksymalnie 6-7 linków oraz cała nawigacja ma jeden stopień zagnieżdżenia – wykorzystuję menu poziome (horyzontalne)
- jeśli główny poziom nawigacji ma więcej niż 7 linków – stosuję menu pionowe (wertykalne)
- jeśli menu na wiele poziomów zagnieżdżenia – rezygnuję z wysuwanych małych submenu i tworzę panel mega menu
- na urządzeniach mobilnych w 99% przypadków stosuję menu ukryte
- menu ukryte na komputerach stosuję tylko dla projektów, w których najważniejsza jest estetyka projektu, a grupa docelowa firmy będzie w stanie zrozumieć ten schemat nawigacji (zwykle są to strony związane z technologią, projektowaniem, itd.).
Myślę, że to dość obszerne opracowanie na temat nawigacji na stronach internetowych będzie wystarczające, aby każdy bez problemu poznał różnice i mógł podjąć decyzję jakie menu zastosować na swojej stronie internetowej. Pamiętaj, że nie musisz ograniczać się tylko do jednego menu. Możesz z powodzeniem wydzielić np. menu produktowe, menu techniczne, menu z opcjami konta użytkownika, itd. Z powodzeniem możesz też mieszać zaproponowane tu sposoby prezentacji menu.
Mam nadzieję, że wskazówki z tego artykułu były dla Ciebie przydatne. Jeśli po przeczytaniu tego tekstu jesteś zainteresowany zleceniem mi wykonania strony internetowej dla Twojej firmy, skontaktuj się ze mną.
Masz pytania na ten lub inny temat?
Skontaktuj sięZobacz także
Consent Mode, czyli tryb uzyskiwania zgody – jak informować o plikach cookies?
Kategorie: Strony internetoweZbieranie danych o użytkownikach strony internetowej czy sklepu internetowego znacznie ułatwia procesy marketingowe – im więcej wiemy o potencjalnym...
Strony internetowe na Smart Watch i Smart TV
Kategorie: Strony internetoweZastanawiałeś się kiedyś, jak wygląda strona internetowa na urządzeniach typu Smart Watch, czy Smart TV? Jeśli nie, najwyższy czas...
Jak sprawdzić czy Twoja strona jest responsywna?
Kategorie: Strony internetoweJeśli posiadasz stronę www lub planujesz zlecić jej stworzenie – upewnij się, że jest / będzie ona responsywna. Z...
Dlaczego moja strona nie wyświetla się w Google?
Kategorie: Strony internetowePosiadasz stronę internetową, ale nie jest ona widoczna w Google? Sprawdź moje wskazówki co zrobić, aby Twoja strona była...
Masz czat / Messenger na stronie? Sprawdź ten częsty błąd
Kategorie: Strony internetowe E-commerceCześć, jeśli masz (lub planujesz mieć) na swojej stronie internetowej wtyczkę czatu np. Messenger lub inny to koniecznie sprawdź,...

Rozważasz współpracę ze mną?
Sprawdź, dlaczego warto.
Bezpośredni kontakt
Działania, które przynoszą efekty
Szybkie terminy realizacji
Transparentność
Jakość agencji w cenie freelancera
Ciągły rozwój
Darmowa dawka wiedzy
Certyfikowany ekspert
Bogate doświadczenie
Wszystko w jednym miejscu
Skontaktuj się
Zapisz się na mój newsletter i otrzymuj darmowe porady oraz informacje o promocjach.
Poznaj opinie moich Klientów

Z przyjemnością rekomenduję firmę Pana Artura jako bardzo profesjonalnego dostawcę rozwiązań internetowych opartych na WordPress. Rozpoczęliśmy od prostych stron typu landing page. Byliśmy tak bardzo zadowoleni z każdego kolejnego projektu, że zdecydowaliśmy się współpracować gdziekolwiek jest to możliwe, m.in. przy optymalizacji, utrzymaniu, projektowaniu, itd.


Z firmą Pana Artura prowadzimy stałą współpracę przy promocji naszych gabinetów kosmetycznych. Od czasu rozpoczęcia współpracy widzimy znaczny wzrost ilości nowych klientów. Polecam wszystkim firmom, które chcą rozwinąć skrzydła.
