UI MarCom
2.3.0
latest 2.4.0 2.3.0 2.2.1 2.1.0 1.0.12
UI MarCom
Getting Started
About UI MarCom Develop Design
Fundamentals
Overview Colors Elevation Icons Image Aspect Ratios Interaction Responsive Behavior Spacing States Typography
Components
Component status Overview Accordion Alerts Application Bar Aspect Ratio Back to top Breadcrumbs Button Card Slider Cards Carousel Checkboxes Collection Date-Time-Picker Disclaimer Dropdown Feedback Module Figure Footer Header Hero Block Hotspots In-Page Navigation Label Links Lists Loading Animation Log In Dialog Logo Media Object Menu Modal Dialog Multi-column Multimedia Container Navigation bar Overlay Pagination Progress Quotation Radio Buttons Search Field Search Results Select Box Stage Steps Bar Table Tabs Tags Textfield Toggle Switch Tooltip User Identifier
Updates
Updates
Help
Contact us

Dropdown Stable

A Dropdown is a small overlay that can contain any type of content, which are displayed on demand.

Usage Code

    General guidance

    A dropdown is a possible choice, if several actions should be grouped into an expandable submenu. There may be multiple content links or actions revealed when the menu is openend.

    Structure

    Dropdown structure
    Dropdown structure
    1. Label Mandatory
    2. Dropdown Arrow Optional
    3. Content container Mandatory
    Dropdown
    Apple Pie
    Orange Juice
    Banana Joe
    Related components

    They are often used for Menus, for example, in the User Area or to show Tabs or In-Page Navigation items on mobile viewports.

    Dos and don’ts

    • Do mind using a reasonable number of entries.
    • Do not mistake a dropdown as a select box input.