The Model. Put whatever context you like, which is used to create menu items.

The Message.

The init function.

The update function.

The Subscription.

The menu item. You can construct it with pipe-friendly functions.

ContextMenu.item "Take photos"
    -- This library is outdated. See README.
    -- |> ContextMenu.icon FontAwesome.camera Color.green
    |> ContextMenu.disabled True

Creates a simple text item.

Creates an item with annotation which will displayed just below the item name.

Disables the item. True = disabled, False = enabled.

Shows the icon.

The first argument is a function that creates an icon, given a color string(like #fff, rgb(100,200,200), etc.) and icon size (px).

Displays the shortcut key at the right.

Defines the styles of the menu. See examples.

The default direction the menu will be shown at.

The strategies how to show the menu when it goes out of window.

The shape of cursor during hovering on the menu.

The default config.

defaultConfig =
    { width = 300
    , direction = RightBottom
    , overflowX = Mirror
    , overflowY = Mirror
    , containerColor = "white"
    , hoverColor = "rgb(240 240 240)"
    , invertText = False
    , cursor = Pointer
    , rounded = False
    , fontFamily = "initial"
    }

Shows the menu. This should be called at only one place.

Arguments:

1. the Config

2. function to transform component's message into user's message

3. function to create item groups

4. the Model

Makes the attribute that triggers to open the menu. This attribute is passed for each element that needs a menu.

Arguments:

1. function to transform component's message into user's message

2. the context which is used to create items

Similar to open but only works under particular condition.

This is useful for debugging on browser.

This switches when the menu should be closed.

• True: Closes when mouse leaves the menu (keeps opening on cliking)
• False(default): Closes when somewhere in the window is clicked