---
title: "Dropdown menu"
description: "Dropdown menu (menu rozwijane) to element interfejsu ukrywający opcje pod przyciskiem lub pozycją nawigacji. Poznaj zasadę działania i dobre praktyki UX."
url: "https://nodea.pl/pl/slownik-pojec/dropdown-menu"
lang: "pl"
updated: "2026-07-13"
---

# Dropdown menu

> Dropdown menu, czyli menu rozwijane, to element interfejsu użytkownika, który ukrywa listę opcji i wyświetla ją dopiero po kliknięciu lub najechaniu na element nadrzędny.

**Dropdown menu**, czyli menu rozwijane, to element interfejsu użytkownika, który domyślnie ukrywa listę opcji i pokazuje ją dopiero po interakcji — kliknięciu, dotknięciu lub najechaniu kursorem na element nadrzędny. Dzięki temu pozwala zmieścić wiele powiązanych pozycji w kompaktowej przestrzeni, nie zaśmiecając widoku, i jest jednym z podstawowych wzorców projektowania nawigacji oraz formularzy.

## Jak działa dropdown menu

Menu rozwijane składa się z elementu wyzwalającego (przycisk, pozycja nawigacji, pole wyboru) oraz ukrytego kontenera z opcjami, który pojawia się na wierzchu treści po aktywacji. W kodzie realizuje się je najczęściej za pomocą HTML, CSS i JavaScriptu, a w polach formularzy natywnym znacznikiem *\<select\>*. Poprawnie zbudowany dropdown powinien:

- reagować zarówno na mysz, jak i na klawiaturę oraz dotyk;
- domykać się po kliknięciu poza obszarem menu;
- być dostępny dla czytników ekranu dzięki atrybutom ARIA;
- mieścić się w widoku również na małych ekranach.

Dobrze zaprojektowane menu wspiera intuicyjny [interfejs](https://nodea.pl/pl/slownik-pojec/ui) i płynny [UX](https://nodea.pl/pl/slownik-pojec/ux). Istotny jest też sposób wyzwalania: menu otwierane po najechaniu bywa wygodne na desktopie, ale zawodzi na ekranach dotykowych, gdzie nie istnieje stan hover — w takim wypadku lepiej sprawdza się otwieranie kliknięciem lub dotknięciem.

## Zastosowanie w praktyce

Dropdown menu spotkasz w nawigacji głównej (rozwijane kategorie sklepu), w panelach administracyjnych, w filtrach produktowych oraz w formularzach do wyboru kraju, języka czy waluty. Na urządzeniach mobilnych często współpracuje z [hamburger menu](https://nodea.pl/pl/slownik-pojec/hamburger-menu), które chowa całą nawigację pod jedną ikoną. Kluczem do dobrego menu rozwijanego jest umiar: zbyt głęboko zagnieżdżone poziomy męczą użytkownika i pogarszają [responsywność](https://nodea.pl/pl/slownik-pojec/responsywnosc), dlatego warto ograniczać liczbę poziomów i grupować opcje logicznie. Z perspektywy SEO trzeba pamiętać, że jeśli menu jest generowane wyłącznie przez JavaScript i nie renderuje się w kodzie źródłowym, roboty wyszukiwarek mogą nie dotrzeć do ukrytych w nim linków. Dobrze zaprojektowany dropdown pozostaje więc dostępny w HTML, obsługiwalny z klawiatury i czytelny dla technologii wspomagających, co jednocześnie poprawia użyteczność i widoczność witryny w wynikach wyszukiwania.

### Kiedy używać dropdown menu, a kiedy hamburger menu?

Dropdown menu sprawdza się do grupowania powiązanych opcji w ramach jednej pozycji nawigacji, np. rozwijanych kategorii. Hamburger menu chowa całą nawigację pod jedną ikoną i jest typowe dla widoków mobilnych, gdzie brakuje miejsca na poziomy pasek.

## Powiązane

- [Hamburger menu](https://nodea.pl/pl/slownik-pojec/hamburger-menu)
- [UI](https://nodea.pl/pl/slownik-pojec/ui)
- [UX](https://nodea.pl/pl/slownik-pojec/ux)
- [Nawigacja fasetowa](https://nodea.pl/pl/slownik-pojec/nawigacja-fasetowa)
- [Responsywność](https://nodea.pl/pl/slownik-pojec/responsywnosc)

---

Wersje językowe: [en](https://nodea.io/en/glossary/dropdown-menu.md)  
Spis treści witryny: [llms.txt](https://nodea.pl/pl/llms.txt)