# Drop-Down List (lv_dropdown) (/widgets/dropdown) Overview [#overview] The Drop-Down List allows the user to select a value from a list. The Drop-Down List is closed by default and displays a single value or predefined text. When activated (by click on the Drop-Down List), a list is created from which the user may select one item. When the user selects a new value, the list is deleted again. The Drop-down list is added to the default group (if one is set). The Drop-down list is an editable Widget allowing list-item selection via encoder or keyboard navigation as well. Parts and Styles [#parts-and-styles] The Drop-Down List Widget is built from the elements: "button" and "list" (lightweight versions of the Button and List Widgets). Button [#button] * Background of button, uses the [typical background](/common-widget-features/styles/overview) and text style properties for its text. * Typically an arrow symbol that can be an Image or text (e.g. ). The button goes to when it's opened. List [#list] * The list itself; uses the [typical background style properties](/common-widget-features/styles/overview). `max_height` can be used to limit the height of the list. * The scrollbar background, border, shadow properties and width (for its own width) and right padding for the spacing on the right. * Refers to the currently pressed, checked or pressed+checked option. Also uses the [typical background style properties](/common-widget-features/styles/overview). The list is shown/hidden on open/close. To add styles to it use to get the list object. Example: ```c title=" " lineNumbers=1 lv_obj_t * list = lv_dropdown_get_list(dropdown) /* Get list */ lv_obj_add_style(list, &my_style, selector) /* Add styles to list */ ``` Alternatively the theme can be extended with new styles. Usage [#usage] List items [#list-items] The list items are passed to the Drop-Down List as a newline-separated list in a string as the `options` argument to . Each list item should be separated by `\n`. Example: `"First\nSecond\nThird"`. This string is copied by the Drop-Down List, so its contents do not need to remain available beyond this call. The function inserts a new option at index `pos`. To save memory the options can be set from a static (const) string as well with . In this case the options string's contents must remain available for the life of the Drop-Down List and cannot be used. You can select an option programmatically with , where `id` is the index of the target option. Get selected option [#get-selected-option] To get the *index* of the selected option, use . copies the *name* of the selected option to `buf`. Direction [#direction] The list can be created on any side. The default can be modified using . If the list would be vertically out of the screen, it will be aligned to the edge. Symbol [#symbol] A symbol (typically an arrow) can be added to the Drop-Down List with If the direction of the Drop-Down List is the symbol will be shown on the left, otherwise on the right. Show selected [#show-selected] The main part can either show the selected item or fixed text. If fixed text is set with or it will be shown regardless of the selected item. If the text is `NULL` the selected option is displayed on the button. Programmatically open/close [#programmatically-openclose] To programmatically open or close the Drop-Down List use or . Data binding [#data-binding] To get familiar with observers, subjects, and data bindings in general visit the [Observer](/main-modules/observer/observer) page. This method of subscribing to an integer Subject affects a Drop-Down Widget's integer value directly. Note that this is a two-way binding (Subject \<===> Widget) so an end user's direct interaction with the Drop-Down Widget updates the Subject's value and vice versa. It support only integer Subjects. * Events [#events] * Sent when a new option is selected or the list is opened/closed. * Sent when list is closed. * Sent when list is opened. Learn more about [Events](/common-widget-features/events) emitted by all Widgets. Learn more about [events](/common-widget-features/events). Keys [#keys] * `LV_KEY_RIGHT/DOWN` Select next list item. * `LV_KEY_LEFT/UP` Select previous list item. * Apply selected list item (sends event and closes Drop-Down List). Learn more about [Keys](/main-modules/indev/keypad). Examples [#examples] Simple Drop down list [#simple-drop-down-list] Drop down in four directions [#drop-down-in-four-directions] Menu [#menu] API [#api]