Dropdown menu

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 i płynny 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, 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ść, 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.