<a id="menu"></a>

## Menu  
**Category**: Navigation
Vertical and horizontal navigation lists with nested submenus
### Examples

#### Basic Menu  
```python
Ul(
    Li(A('Item 1')),
    Li(A('Item 2')),
    Li(A('Item 3')),
    cls='menu bg-base-200 rounded-box w-56'
)
```

#### Basic Submenus  
```python
Ul(
    Li(A('Item 1')),
    Li(
        A('Parent'),
        Ul(
            Li(A('Submenu 1')),
            Li(A('Submenu 2')),
            Li(
                A('Parent'),
                Ul(
                    Li(A('Submenu 1')),
                    Li(A('Submenu 2'))
                )
            )
        )
    ),
    Li(A('Item 3')),
    cls='menu bg-base-200 rounded-box w-56'
)
```

#### Disabled Interactive State  
```python
Ul(
    Li(A('Enabled item')),
    Li(A('disabled item'), cls='disabled'),
    Li(A('disabled item'), cls='disabled'),
    cls='menu bg-base-200 rounded-box w-56'
)
```

#### Horizontal Layout  
```python
Ul(
    Li(A('Item 1')),
    Li(A('Item 2')),
    Li(A('Item 3')),
    cls='menu menu-horizontal bg-base-200'
)
```

#### Menu with Icons  
```python
Ul(
    Li(A(Icon.home(), 'Item 1')),
    Li(A(Icon.info(), 'Item 2')),
    Li(A(Icon.stats(), 'Item 3')),
    cls='menu bg-base-200 rounded-box w-56'
)
```

#### Active Interactive State  
```python
Ul(
    Li(Button('Item 1')),
    Li(Button('Item 2', cls='active')),
    Li(Button('Item 3')),
    cls='menu bg-base-200 w-56 rounded-box'
)
```

#### Horizontal Submenus  
```python
Ul(
    Li(A('Item 1')),
    Li(
        A('Parent'),
        Ul(
            Li(A('Submenu 1')),
            Li(A('Submenu 2'))
        )
    ),
    Li(A('Item 3')),
    cls='menu menu-horizontal bg-base-200 rounded-box'
)
```

#### Menu with Icons and Badges  
```python
Ul(
    Li(A(
        Icon.home(),
        'Inbox',
        Span('99+', cls='badge badge-sm')
    )),
    Li(A(
        Icon.info(),
        'Updates',
        Span('NEW', cls='badge badge-sm badge-warning')
    )),
    Li(A(
        'Stats',
        Span(cls='badge badge-xs badge-info')
    )),
    cls='menu bg-base-200 lg:menu-horizontal rounded-box'
)
```

#### Responsive Menu  
```python
Ul(
    Li(A('Item 1')),
    Li(A('Item 2')),
    Li(A('Item 3')),
    cls='menu menu-vertical lg:menu-horizontal bg-base-200 rounded-box'
)
```

#### Menu with Title  
```python
Ul(
    Li('Title', cls='menu-title'),
    Li(A('Item 1')),
    Li(A('Item 2')),
    Li(A('Item 3')),
    cls='menu bg-base-200 rounded-box w-56'
)
```

#### Collapsible Submenus  
```python
Ul(
    Li(A('Item 1')),
    Li(
        Details(
            Summary('Parent'),
            Ul(
                Li(A('Submenu 1')),
                Li(A('Submenu 2')),
                Li(
                    Details(
                        Summary('Parent'),
                        Ul(
                            Li(A('Submenu 1')),
                            Li(A('Submenu 2'))
                        ),
                        open=''
                    )
                )
            ),
            open=''
        )
    ),
    Li(A('Item 3')),
    cls='menu bg-base-200 rounded-box w-56'
)
```

#### File tree  
```python
Ul(
    Li(A(Icon.file(), 'resume.pdf')),
    Li(
        Details(
            Summary(
                Button( Icon.folder(), 'My Files')
            ),
            Ul(
                Li(A(Icon.file(), 'Project-final.psd')),
                Li(A(Icon.file(), 'Project-final-2.psd')),
                Li(
                    Details(
                        Summary(
                            Button(Icon.folder(), 'Images')
                        ),
                        Ul(
                            Li(A(Icon.image(), 'Screenshot1.png')),
                            Li(A(Icon.image(), 'Screenshot2.png')),
                            Li(
                                Details(
                                    Summary(
                                        Button(Icon.folder(), 'Others')
                                    ),
                                    Ul(
                                        Li(A(Icon.image(), 'Screenshot3.png'))
                                    ),
                                    open=''
                                )
                            )
                        ),
                        open=''
                    )
                )
            ),
            open=''
        )
    ),
    Li(A(Icon.file(), 'reports-final-2.pdf')),
    cls='menu menu-xs bg-base-200 rounded-lg max-w-xs w-full'
)
```

#### Icon only  
```python
Ul(
    Li(A(Icon.home())),
    Li(A(Icon.info())),
    Li(A(Icon.stats())),
    cls='menu bg-base-200 rounded-box'
)
```

#### No padding  
```python
Ul(
    Li(A('Item 1')),
    Li(A('Item 2')),
    Li(A('Item 3')),
    cls='menu bg-base-200 w-56 p-0 [&_li>*]:rounded-none'
)
```

#### Menu with Title Parent  
```python
Ul(
    Li(
        H2('Title', cls='menu-title'),
        Ul(
            Li(A('Item 1')),
            Li(A('Item 2')),
            Li(A('Item 3'))
        )
    ),
    cls='menu bg-base-200 rounded-box w-56'
)
```

#### Collapsible Class  
```python
Div(
    # Closed dropdown
    Ul(
        Li(A('Item 1')),
        Li(
            Span('Parent', cls='menu-dropdown-toggle'),
            Ul(
                Li(A('Submenu 1')),
                Li(A('Submenu 2')),
                cls='menu-dropdown'
            )
        ),
        cls='menu bg-base-200 rounded-box w-56'
    ),
    # Open dropdown
    Ul(
        Li(A('Item 1')),
        Li(
            Span('Parent', cls='menu-dropdown-toggle menu-dropdown-show'),
            Ul(
                Li(A('Submenu 1')),
                Li(A('Submenu 2')),
                cls='menu-dropdown menu-dropdown-show'
            )
        ),
        cls='menu bg-base-200 rounded-box w-56'
    ),
    Script("""
    document.querySelectorAll('.menu-dropdown-toggle').forEach(toggle => {
        toggle.addEventListener('click', () => {
            toggle.classList.toggle('menu-dropdown-show');
            toggle.nextElementSibling.classList.toggle('menu-dropdown-show');
        });
    });
    """)
)
```

#### Horizontal Icon Only  
```python
Ul(
    Li(A(Icon.home())),
    Li(A(Icon.info())),
    Li(A(Icon.stats())),
    cls='menu menu-horizontal bg-base-200 rounded-box'
)
```

#### Sizes  
```python
Ul(
    Li(A('xs item 1')),
    Li(A('xs item 2')),
    cls='menu menu-xs bg-base-200 rounded-box w-56'
),
Ul(
    Li(A('sm item 1')),
    Li(A('sm item 2')),
    cls='menu menu-sm bg-base-200 rounded-box w-56'
),
Ul(
    Li(A('md item 1')),
    Li(A('md item 2')),
    cls='menu menu-md bg-base-200 rounded-box w-56'
),
Ul(
    Li(A('lg item 1')),
    Li(A('lg item 2')),
    cls='menu menu-lg bg-base-200 rounded-box w-56'
),
```

#### Icon tooltip  
```python
Ul(
    Li(A(
        Icon.home(),
        data_tip='Home',
        cls='tooltip tooltip-right'
    )),
    Li(A(
        Icon.info(),
        data_tip='Details',
        cls='tooltip tooltip-right'
    )),
    Li(A(
        Icon.stats(),
        data_tip='Stats',
        cls='tooltip tooltip-right'
    )),
    cls='menu bg-base-200 rounded-box'
)
```

#### Mega Menu  
```python
Ul(
    Li(
        Button('Solutions'),
        Ul(
            Li(Button('Design')),
            Li(Button('Development')),
            Li(Button('Hosting')),
            Li(Button('Domain register'))
        )
    ),
    Li(
        Button('Enterprise'),
        Ul(
            Li(Button('CRM software')),
            Li(Button('Marketing management')),
            Li(Button('Security')),
            Li(Button('Consulting'))
        )
    ),
    Li(
        Button('Products'),
        Ul(
            Li(Button('UI Kit')),
            Li(Button('Wordpress themes')),
            Li(Button('Wordpress plugins')),
            Li(
                Button('Open source'),
                Ul(
                    Li(Button('Auth management system')),
                    Li(Button('VScode theme')),
                    Li(Button('Color picker app'))
                )
            )
        )
    ),
    Li(
        Button('Company'),
        Ul(
            Li(Button('About us')),
            Li(Button('Contact us')),
            Li(Button('Privacy policy')),
            Li(Button('Press kit'))
        )
    ),
    cls='menu xl:menu-horizontal lg:min-w-max bg-base-200 rounded-box'
)
```

#### Collapsible Responsive  
```python
Ul(
    Li(A('Item 1')),
    Li(
        Details(
            Summary('Parent item'),
            Ul(
                Li(A('Submenu 1')),
                Li(A('Submenu 2')),
                Li(
                    Details(
                        Summary('Parent'),
                        Ul(
                            Li(A('item 1')),
                            Li(A('item 2'))
                        ),
                        open=''
                    )
                )
            ),
            open=''
        )
    ),
    Li(A('Item 3')),
    cls='menu lg:menu-horizontal bg-base-200 rounded-box lg:mb-64'
)
```

#### Horizontal Icon Tooltip  
```python
Ul(
    Li(A(
        Icon.home(),
        data_tip='Home',
        cls='tooltip'
    )),
    Li(A(
        Icon.info(),
        data_tip='Details',
        cls='tooltip'
    )),
    Li(A(
        Icon.stats(),
        data_tip='Stats',
        cls='tooltip'
    )),
    cls='menu menu-horizontal bg-base-200 rounded-box mt-6'
)
```