Terug naar begrippenlijst
Dropdown menu
Een dropdown menu is een menu waarbij extra opties zichtbaar worden zodra een gebruiker interactie heeft met een knop of element. Meestal door erop te klikken of er met de muis overheen te gaan. Het wordt veel gebruikt op websites en in apps om navigatie overzichtelijk te houden, zonder meteen alle keuzes in beeld te brengen.
Inhoudsopgave
Compact en overzichtelijk, maar met diepgang
Dropdowns zijn ideaal om structuur aan te brengen in je navigatie. Ze houden de interface strak en minimalistisch, maar bieden wel diepte als de gebruiker daarom vraagt. Het is als een lade die je pas opentrekt als je iets zoekt – handig, zolang het goed georganiseerd is.
Er zijn verschillende soorten dropdowns:
- Navigatiemenu’s: Zoals in hoofdnavigatiebalken van websites
- Formuliervelden: Bijvoorbeeld bij het selecteren van een land, taal of categorie
- Actiemenu’s: Met bewerk-, verwijder- of downloadopties bij een item
Vooral op mobiel is een goed ontworpen dropdown essentieel. Je wilt gebruikers niet laten scrollen door een eindeloze lijst, maar gericht keuzes laten maken.
Wel dropdowns, geen drama
Hoewel dropdowns handig zijn, zijn er ook valkuilen. Denk aan menu’s die verdwijnen als je er per ongeluk naast klikt, of aan opties die op mobiel nauwelijks aan te tikken zijn. De kunst is om ze intuïtief en toegankelijk te ontwerpen.
Gebruik heldere labels, zorg voor voldoende klikruimte en test altijd op mobiel en met toetsenbordnavigatie. Want een dropdown die niet werkt, is frustrerend. En frustratie wil je vermijden.
Veelgestelde vragen
Je houdt je interface overzichtelijk, terwijl je toch meerdere keuzes kunt aanbieden op één plek.
Ze kunnen dat zeker zijn mits ze goed zijn ontworpen met grote tikvlakken, duidelijke structuur en zonder hover (want dat werkt niet op touchscreens).
Een dropdown toont een simpele lijst met opties. Een mega menu toont in één keer een hele uitklapstructuur met meerdere kolommen, secties en visuals.
Zorg dat het menu ook met toetsenbord en screenreader te gebruiken is. Gebruik duidelijke labels, aria-attributes en logische focusvolgorde.
Stan Classens Front-end developer
Gerelateerde begrippen
- 301 redirect
- 302 redirect
- A/B testing tools
- Above the Fold
- Abstraction
- Access Control
- Accessible Rich Internet Applications (ARIA )
- Adaptive design
- Adobe XD
- Afbeeldingsresolutie
- Alt tag
- Anchor tekst
- Animatie
- API
- Array
- Aspect ratio
- Atomic Design
- Back-end
- Below the Fold
- Binary Tree
- Bootstrap
- Bounce rate
- Brandbook
- Bug
