Menu WordPress – jak stwórzyć profesjonalna nawigację na stronie

Klasyczny edytor menu jest dostępny w każdym motywie WordPress. Działa sprawdznie od lat i nie wymaga żadnej wiedzy technicznej. Oto co musisz zrobić:

Krok 1 – Utwórz nowe menu. Przejdź do Wygląd > Menu, wpisz nazwę (np. "Menu główne") i kliknij "Utwórz menu".

Krok 2 – Dodaj elementy. Po lewej stronie widzisz dostępne źródła: Strony, Wpisy, Własne odnośniki, Kategorie. Zaznacz co Cię interesuje i kliknij "Dodaj do menu".

Krok 3 – Ustal kolejność. Przeciągasz elementy góra-dół. Przesunięcie w prawo tworzy podmenu – i tak właśnie powstaje menu rozwijane w WordPress.

Krok 4 – Przypisz lokalizacje. Na dole strony w sekcji "Pozycje menu" zaznacz, gdzie menu ma się wyświetlać. Nazwy lokalizacji zależą od motywu – typowe to Primary Menu, Footer Menu, Mobile Menu.

Krok 5 – Opcje zaawansowane. Kliknij "Opcje ekranu" w prawym górnym rogu i włącz: Cel odnosnika (otwieranie w nowej karcie), Klasy CSS (własne style), Opis (dodatkowy tekst pod linkiem).

Ta metoda wciąż swietnnie sprawdza się w motywach klasycznych – Astra, GeneratePress, OceanWP czy motywy premium. Jest uniwersalna i intuicyjna.

Nie chcesz ryzykować problemów? Powierz to naszym realizację strony internetowej.

WordPress 6.x wprowadził zupełnie nowy sposób zarządzania nawigacja – blok Nawigacja (Navigation Block) w ramach Full Site Editing. Jeśli używasz motywu blokowego (Twenty Twenty-Four, Flavor, Flavor Light), to jest Twoja glowna metoda.

Gdzie znajdziesz edytor: Wygląd > Edytor (uwaga – nie "Menu"!). Klikasz na menu w nagłówku i edytujesz je bezpośrednio w wizualnym edytorze.

Jak dodać elementy: Kliknij "+" w bloku nawigacji, dodaj odniesnik do strony, wpisu, kategorii lub własnego URL. Możesz zagniezdac bloki, tworząc podmenu.

Różnica między blokiem Nawigacja a klasycznym edytorem jest fundamentalna. Blokowy edytor pozwala na edycję WYSIWYG – widzisz efekt od razu. Możesz dodawać ikony, przyciski i linki do social media bezpośrednio w nawigacji. Z drugiej strony – interfejs bywa nieintuicyjny, szczególnie przy tworzeniu podmenu. Kluczowa zasada: motyw blokowy = Blok Nawigacja, motyw klasyczny = Wygląd > Menu.

Więcej o edytorze blokowym znajdziesz w naszym poradniku Gutenberga.

Proste menu rozwijane (dropdown) tworzysz bez wtyczek – wystarczy przeciągnąć element w prawo. Ale co, jeśli potrzebujesz nawigacji z kolumnami, obrazkami i widgetami?

Max Mega Menu to najpopularniejsza wtyczka do mega menu z ponad 400 000 instalacji. Konfiguracja jest prosta:

1. Zainstaluj i aktywuj Max Mega Menu
2. Wygląd > Max Mega Menu > Włącz dla wybranej lokalizacji
3. Wejdź w Wygląd > Menu i przy elemencie kliknij "Mega Menu"
4. Wybierz układ: siatka kolumn, widgety, ikony

Max Mega Menu pozwala budować menu wielokolumnowe (np. 3 kolumny usług z ikonkami), wstawiać widgety w dropdown, ustawiać animacje otwarcia (fade, slide) i flyout submenu.

Alternatywy: UberMenu (premium, 29 USD) i wbudowany mega menu w Elementor Pro – jeśli już używasz Elementora, masz mega menu w zestawie.

Kiedy mega menu ma sens? Sklep z wieloma kategoriami, portal z rozbudowana struktura, strona korporacyjna. Dla prostej strony firmowej z 5–10 podstronami – mega menu to przerost formy. Lepsze jest czytelne menu z jednym poziomem podmenu.

Potrzebujesz profesjonalnej strony WordPress z dopracowaną nawigacja? Sprawdź naszą ofertę lub napisz do nas.

Ponad 60% ruchu na polskich stronach pochodzi z urządzeń mobilnych. Menu, które wygląda świetnie na desktopie, na telefonie może być katastrofa.

Większość współczesnych motywów automatycznie zamienia nawigację na "hamburger" (trzy poziome kreski) na ekranach poniżej 768px. Po kliknięciu menu rozwija się jako panel boczny lub dropdown.

Niektóre motywy (Astra Pro, GeneratePress Premium) pozwalają przypisać osobne menu dla mobile. To przydatne – na telefonie potrzebujesz mniej elementów. Telefon, Oferta, Kontakt – często tyle wystarczy.

Jeśli Twój motyw nie radzi sobie z nawigacja mobilna, zainstaluj wtyczkę Responsive Menu – konfigurujesz styl (slide, push, overlay), animacje i breakpoint.

Typowe problemy z menu mobilnym:
- Za dużo elementów – skróć do 5–6 pozycji
- Tekst za mały do kliknięcia – minimum 44px wysokości elementu (wytyczne WCAG)
- Podmenu nie otwiera się – sprawdź konflikt z wtyczkami cache lub JavaScript

Testuj menu na prawdziwym telefonie, nie tylko w inspektorze przeglądarki. Roznice w zachowaniu dotykowym bywają zaskakujące.

Menu nawigacyjne to nie tylko element UX – ma też bezpośredni wpływ na pozycjonowanie Twojej strony WordPress.

Jak Google interpretuje menu

Robot Google traktuje linki w nawigacji jako silne sygnały ważności. Strona, ktora jest w menu głównym, dostaje więcej link equity niż strona ukryta głęboko w strukturze. Dlatego w menu powinny znaleźć się najważniejsze podstrony.

Praktyczne wskazówki SEO:
- Używaj opisowych anchor textów ("Usługi SEO" zamiast "Oferta")
- Nie umieszczaj więcej niż 7 elementów głównych – zbyt wiele linków rozprasza link equity
- Najważniejsze strony daj na pierwszym poziomie, reszta w podmenu
- Unikaj menu opartego wyłącznie na JavaScript – Google może go nie wyrenderować

Dostępność ARIA i nawigacja klawiatura

Od 2025 roku w UE obowiązuje European Accessibility Act. WordPress 6.x dodaje role="navigation" do kontenera menu i podstawowe atrybuty ARIA. Ale warto sprawdzić ręcznie:

1. Czy możesz przejść przez całe menu klawiszem Tab?
2. Czy podmenu otwiera się Enterem/Spacją?
3. Czy Escape zamyka otwarte podmenu?
4. Czy fokus jest widoczny (obramowanie lub podswietlenie)?
5. Czy kontrast tekstu do tła wynosi minimum 4.5:1?

Narzędzia do testowania: WAVE (wave.webaim.org), aXe DevTools i – po prostu – klawiatura. Spróbuj użyć strony bez myszy. To najlepszy test dostępności, jaki możesz zrobić.

Więcej o wydajności WordPress i Core Web Vitals znajdziesz w osobnym poradniku.

Menu nie wyświetla się po zmianie motywu. Nowy motyw ma inne lokalizacje menu – przejdź do Wygląd > Menu i przypisz istniejące menu do nowej lokalizacji.

Kolejność elementów się zmienia. Najczęściej problem z cache przeglądarki lub wtyczka cache (WP Rocket, LiteSpeed Cache). Wyczyść cache i sprawdź ponownie.

Podmenu nie otwiera się na mobile. Konflikt JavaScript – najczęściej między motywem a wtyczka (np. Elementor lub slider). Wyłącz wtyczki po kolei, żeby znaleźć źródło problemu.

Menu jest zbyt wolne (mega menu). Mega menu z wieloma elementami może wpływać na Core Web Vitals, szczególnie CLS (Cumulative Layout Shift). Rozważań lazy loading podmenu lub ograniczenie liczby elementów.