Menu (menu)

A menu displays a list of choices on a temporary surface. They appear when users interact with a button, action, or other control.

🔗 External documentation.

ID	Label	Description	Schema
list	Menu items	A renderable list component.

            id: menu
label: Menu
description: 'A menu displays a list of choices on a temporary surface. They appear when users interact with a button, action, or other control. '
homepage: 'https://m2.material.io/components/menus/'
slots:
    list:
        id: list
        label: 'Menu items'
        description: 'A renderable list component.'
library:
    js:
        'https://data.dilla.io/material_2/components/menu/menu_init.js': {  }
    id: menu
examples:
    preview:
        id: preview
        label: Preview
        renderable:
            '@component': menu
            list:
                -
                    '@component': list
                    items:
                        -
                            '@component': list_item
                            text: 'List item'
                            secondary_text: 'List item'
                            icon_after:
                                '@component': icon_button
                                icon: more_vert
                            icon_before: favorite
                            html_element: li
                        -
                            '@component': list_item
                            '@variant': selected
                            text: 'List item'
                            secondary_text: 'List item'
                            icon_after:
                                '@component': icon_button
                                icon: more_vert
                            icon_before: favorite
                            html_element: li
                        -
                            '@component': list_item
                            text: 'List item'
                            secondary_text: 'List item'
                            icon_after:
                                '@component': icon_button
                                icon: more_vert
                            icon_before: favorite
                            html_element: li
                        -
                            '@component': list_item
                            text: 'List item'
                            secondary_text: 'List item'
                            icon_after:
                                '@component': icon_button
                                icon: more_vert
                            icon_before: favorite
                            html_element: li
                        -
                            '@component': list_item
                            '@variant': disabled
                            text: 'List item'
                            secondary_text: 'List item'
                            icon_after:
                                '@component': icon_button
                                icon: more_vert
                            icon_before: favorite
                            html_element: li
                    heading_level: 3