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"
  |> 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 function creates the icon. This fuction is compatible with elm-material-icons and elm-font-awesome.

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 = Color.white
  , hoverColor = Color.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.