aforemny / material-components-web-elm / Material.Menu

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

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
            )
            (ListItem.listItem ListItem.config
                [ text "Menu item" ]
            )
            [ ListItem.listItem ListItem.config
                [ text "Menu item" ]
            ]
        ]

Configuration


type Config msg

Configuration of a menu

config : Config msg

Default configuration of a menu

Configuration Options

setOnClose : msg -> Config msg -> Config msg

Specify a message when the user closes the menu

setOpen : Basics.Bool -> Config msg -> Config msg

Specify whether a menu is open

setQuickOpen : Basics.Bool -> Config msg -> Config msg

Specify whether a menu is opening quickly

A quickly opening menu opens without showing an animation.

setAttributes : List (Html.Attribute msg) -> Config msg -> Config msg

Specify additional attributes

Menu

menu : Config msg -> Material.List.Item.ListItem msg -> List (Material.List.Item.ListItem msg) -> Html msg

Menu view function

surfaceAnchor : Html.Attribute msg

Menu surface anchor attribute

Use this on a HTML element that contains both the triggering element and the menu itself.

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)
    (ListItem.listItem ListItem.config [ text "Menu item" ])
    []