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
• Configuration
  • Configuration Options
• Menu
• 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 surfaceAnchor attribute. The menu's items are simply a list.

import Material.Button as Button
import Material.List as List
import Material.ListItem as ListItem
import Material.Menu as Menu


type Msg
    = MenuOpened
    | MenuClosed


main =
    Html.div [ Menu.surfaceAnchor ]
        [ Button.text
            (Button.config |> Button.setOnClick MenuOpened)
            "Open menu"
        , Menu.menu
            (Menu.config
                |> Menu.setOpen True
                |> Menu.setOnClose MenuClosed
            )
            [ List.list
                (List.config |> List.setWrapFocus True)
                [ ListItem.listItem ListItem.config
                    [ text "Menu item" ]
                , ListItem.listItem ListItem.config
                    [ text "Menu item" ]
                ]
            ]
        ]

Configuration

Configuration Options

Menu

Quick-opening menu

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

Menu.menu (Menu.config |> Menu.setQuickOpen True) []