---
{
  title: 'Dropdown',
  layout: 'docs.11ty.js',
  tag: 'nve-dropdown',
  associatedElements: ['nve-dropdown-header', 'nve-dropdown-footer']
}
---

## Installation

Learn more about native [Popover APIs](docs/foundations/popovers/).

{% install 'nve-dropdown' %}

## Visual

{% example '@nvidia-elements/core/dropdown/dropdown.examples.json' 'Visual' '{ "inline": false, "height": "230px" }' %}

## Closable

{% api 'nve-dropdown', 'property' 'closable' %}

{% example '@nvidia-elements/core/dropdown/dropdown.examples.json' 'Closable' '{ "inline": false, "height": "280px" }' %}

## Events

{% api 'nve-dropdown', 'event' %}

{% example '@nvidia-elements/core/dropdown/dropdown.examples.json' 'Events' '{ "inline": false, "height": "280px" }' %}

## Position

{% api 'nve-dropdown', 'property' 'position' %}

{% example '@nvidia-elements/core/dropdown/dropdown.examples.json' 'Position' '{ "inline": false, "height": "600px" }' %}

## Alignment

{% api 'nve-dropdown', 'property' 'alignment' %}

{% example '@nvidia-elements/core/dropdown/dropdown.examples.json' 'Alignment' '{ "inline": false, "height": "600px" }' %}

## Layout

{% example '@nvidia-elements/core/dropdown/dropdown.examples.json' 'Layout' '{ "inline": false, "height": "450px" }' %}

## Dropdown Menu

{% example '@nvidia-elements/core/dropdown/dropdown.examples.json' 'Menu' '{ "inline": false, "height": "450px" }' %}

## Radio Group Pattern

{% example '@nvidia-elements/core/dropdown/dropdown.examples.json' 'RadioGroup' '{ "inline": false, "height": "450px" }' %}

## Checkbox Group Pattern

{% example '@nvidia-elements/core/dropdown/dropdown.examples.json' 'CheckboxGroup' '{ "inline": false, "height": "320px" }' %}

## Many Triggers

{% example '@nvidia-elements/core/dropdown/dropdown.examples.json' 'MultipleTriggers' '{ "inline": false, "height": "320px" }' %}
