<a id="dropdown"></a>

## Dropdown  
**Category**: Actions
A menu that 'drops down' when clicked/tapped, showing options to choose from or actions to take.
### Examples

#### Card Dropdown  
```python
Div(
    Div('Click', tabindex='0', role='button', cls='btn m-1'),
    Div(
        Div(
            H3('Card title!', cls='card-title'),
            P('you can use any element as a dropdown.'),
            cls='card-body'
        ),
        tabindex='0',
        cls='dropdown-content card card-compact bg-primary text-primary-content z-[1] w-64 p-2 shadow'
    ),
    cls='dropdown'
)
```

#### Details Tag Dropdown  
```python
Details(
    Summary('open or close', cls='btn m-1'),
    Ul(
        Li(A('Item 1')),
        Li(A('Item 2')),
        cls='menu dropdown-content bg-base-100 rounded-box z-[1] w-52 p-2 shadow-sm'
    ),
    cls='dropdown'
)
```

#### Hover Trigger  
```python
Div(
    Div('Hover', tabindex='0', role='button', cls='btn m-1'),
    Ul(
        Li(A('Item 1')),
        Li(A('Item 2')),
        tabindex='0',
        cls='dropdown-content menu bg-base-100 rounded-box z-[1] w-52 p-2 shadow'
    ),
    cls='dropdown dropdown-hover'
)
```

#### Focus-based Dropdown  
```python
Div(
    Div('Click', tabindex='0', role='button', cls='btn m-1'),
    Ul(
        Li(A('Item 1')),
        Li(A('Item 2')),
        tabindex='0',
        cls='dropdown-content menu bg-base-100 rounded-box z-[1] w-52 p-2 shadow'
    ),
    cls='dropdown'
)
```

#### Navbar Integration  
```python
Div(
    Div(A('daisyUI', cls='ps-4 text-lg font-bold')),
    Div(
        Div(
            A('Button', cls='btn btn-ghost rounded-field'),
            Div(
                Div('Dropdown', 
                    tabindex='0', 
                    role='button', 
                    cls='btn btn-ghost rounded-field'),                    
                Ul(
                    Li(A('Item 1')),
                    Li(A('Item 2')),
                    tabindex='0',
                    cls='menu dropdown-content bg-base-200 rounded-box z-[1] mt-4 w-52 p-2 shadow-sm'
                ),
                cls='dropdown dropdown-end'
            ),
            cls='flex items-stretch'
        ),
        cls='flex grow justify-end px-2'
    ),
    cls='navbar bg-base-200'
)
```

#### Always Open  
```python
Div(
    Div('Button', tabindex='0', role='button', cls='btn m-1'),
    Ul(
        Li(A('Item 1')),
        Li(A('Item 2')),
        tabindex='0',
        cls='dropdown-content menu bg-base-100 rounded-box z-[1] w-52 p-2 shadow'
    ),
    cls='dropdown dropdown-open'
)
```

#### Position: Start  
```python
Div(
    Div("Start", tabindex="0", role="button", cls="btn m-1"),
    Ul(
        Li(A('Item 1')),
        Li(A('Item 2')),
        tabindex='0',
        cls='dropdown-content menu bg-base-100 rounded-box z-[1] w-52 p-2 shadow'
    ),
    cls="dropdown dropdown-start"  
)
```

#### Position: End  
```python
Div(
    Div("End", tabindex="0", role="button", cls="btn m-1"),
    Ul(
        Li(A('Item 1')),
        Li(A('Item 2')),
        tabindex='0',
        cls='dropdown-content menu bg-base-100 rounded-box z-[1] w-52 p-2 shadow'
    ),
    cls="dropdown dropdown-end"  
)
```

#### Position: Center  
```python
Div(
    Div("Center", tabindex="0", role="button", cls="btn m-1"),
    Ul(
        Li(A('Item 1')),
        Li(A('Item 2')),
        tabindex='0',
        cls='dropdown-content menu bg-base-100 rounded-box z-[1] w-52 p-2 shadow'
    ),
    cls="dropdown dropdown-center"  
)
```

#### Position: Top  
```python
Div(
    Div("Top", tabindex="0", role="button", cls="btn m-1"),
    Ul(
        Li(A('Item 1')),
        Li(A('Item 2')),
        tabindex='0',
        cls='dropdown-content menu bg-base-100 rounded-box z-[1] w-52 p-2 shadow'
    ),
    cls="dropdown dropdown-top"  
)
```

#### Position: Top Center  
```python
Div(
    Div("Top Center", tabindex="0", role="button", cls="btn m-1"),
    Ul(
        Li(A('Item 1')),
        Li(A('Item 2')),
        tabindex='0',
        cls='dropdown-content menu bg-base-100 rounded-box z-[1] w-52 p-2 shadow'
    ),
    cls="dropdown dropdown-top dropdown-center"  
)
```

#### Position: Top End  
```python
Div(
    Div("Top End", tabindex="0", role="button", cls="btn m-1"),
    Ul(
        Li(A('Item 1')),
        Li(A('Item 2')),
        tabindex='0',
        cls='dropdown-content menu bg-base-100 rounded-box z-[1] w-52 p-2 shadow'
    ),
    cls="dropdown dropdown-top dropdown-end"  
)
```

#### Position: Bottom (default)  
```python
Div(
    Div("Bottom (default)", tabindex="0", role="button", cls="btn m-1"),
    Ul(
        Li(A('Item 1')),
        Li(A('Item 2')),
        tabindex='0',
        cls='dropdown-content menu bg-base-100 rounded-box z-[1] w-52 p-2 shadow'
    ),
    cls="dropdown dropdown-bottom"  
)
```

#### Position: Bottom (default) End  
```python
Div(
    Div("Bottom (default) End", tabindex="0", role="button", cls="btn m-1"),
    Ul(
        Li(A('Item 1')),
        Li(A('Item 2')),
        tabindex='0',
        cls='dropdown-content menu bg-base-100 rounded-box z-[1] w-52 p-2 shadow'
    ),
    cls="dropdown dropdown-bottom dropdown-end"  
)
```

#### Position: Left  
```python
Div(
    Div("Left", tabindex="0", role="button", cls="btn m-1"),
    Ul(
        Li(A('Item 1')),
        Li(A('Item 2')),
        tabindex='0',
        cls='dropdown-content menu bg-base-100 rounded-box z-[1] w-52 p-2 shadow'
    ),
    cls="dropdown dropdown-left"  
)
```

#### Position: Left Center  
```python
Div(
    Div("Left Center", tabindex="0", role="button", cls="btn m-1"),
    Ul(
        Li(A('Item 1')),
        Li(A('Item 2')),
        tabindex='0',
        cls='dropdown-content menu bg-base-100 rounded-box z-[1] w-52 p-2 shadow'
    ),
    cls="dropdown dropdown-left dropdown-center"  
)
```

#### Helper Card Dropdown  
```python
Div(
    "A normal text and a helper dropdown",
    Div(
        Div(
            SVG,
            tabindex="0",
            role="button",
            cls="btn btn-circle btn-ghost btn-xs text-info"
        ),
        Div(
            Div(
                H2("Need more info?", cls="card-title"),
                P("Detailed description here"),
                tabindex="0",
                cls="card-body"
            ),
            tabindex="0",
            cls="dropdown-content card compact bg-base-100 rounded-box z-[1] w-64 shadow"
        ),
        cls="dropdown dropdown-end"
    )
)
```

#### Position: Left End  
```python
Div(
    Div("Left End", tabindex="0", role="button", cls="btn m-1"),
    Ul(
        Li(A('Item 1')),
        Li(A('Item 2')),
        tabindex='0',
        cls='dropdown-content menu bg-base-100 rounded-box z-[1] w-52 p-2 shadow'
    ),
    cls="dropdown dropdown-left dropdown-end"  
)
```

#### Position: Right  
```python
Div(
    Div("Right", tabindex="0", role="button", cls="btn m-1"),
    Ul(
        Li(A('Item 1')),
        Li(A('Item 2')),
        tabindex='0',
        cls='dropdown-content menu bg-base-100 rounded-box z-[1] w-52 p-2 shadow'
    ),
    cls="dropdown dropdown-right"  
)
```

#### Position: Right End  
```python
Div(
    Div("Right End", tabindex="0", role="button", cls="btn m-1"),
    Ul(
        Li(A('Item 1')),
        Li(A('Item 2')),
        tabindex='0',
        cls='dropdown-content menu bg-base-100 rounded-box z-[1] w-52 p-2 shadow'
    ),
    cls="dropdown dropdown-right dropdown-end"  
)
```

#### Position: Right Center  
```python
Div(
    Div("Right Center", tabindex="0", role="button", cls="btn m-1"),
    Ul(
        Li(A('Item 1')),
        Li(A('Item 2')),
        tabindex='0',
        cls='dropdown-content menu bg-base-100 rounded-box z-[1] w-52 p-2 shadow'
    ),
    cls="dropdown dropdown-right dropdown-center"  
)
```