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

Table of Contents

• Resources
• Basic usage
• Quick-opening menu

Resources

• Demo: Menus
• Material Design Guidelines: Menus
• MDC Web: Menu
• Sass Mixins (MDC Web)

Basic usage

A menu is usually tied to an element that opens it, such as a button. For positioning, wrap the button and the menu within an element that sets the menuSurfaceAnchor attribute. The menu's items are simply a list.

import Material.Button exposing (textButton, buttonConfig)
import Material.List
    exposing
        ( list
        , listConfig
        , listItem
        , listItemConfig
        )
import Material.Menu
    exposing
        ( menu
        , menuConfig
        , menuSurfaceAnchor
        )


type Msg
    = MenuOpened
    | MenuClosed


Html.div [ menuSurfaceAnchor ]
    [ textButton
        { buttonConfig | onClick = Just MenuOpened }
        "Open menu"
    , menu
        { menuConfig
            | open = True
            , onClose = Just MenuClosed
        }
        [ list { listConfig | wrapFocus = True }
            [ listItem menuItemConfig [ text "Menu item" ]
            , listItem menuItemConfig [ text "Menu item" ]
            ]
        ]
    ]

Quick-opening menu

A menu may not show a transition when opening by setting its quickOpen configuration field to True.

menu { menuConfig | quickOpen = True } []