Menu

The menu is a panel of tappable rows. It builds on the Popover panel, so a menu and a popover share the same radius, border and padding. The menu adds the item list, separators and section labels.

Rows are left-aligned boxes, not buttons. A Material button centers its label, and a menu reads from the leading edge. Rows keep the order you write them in.

You place the menu yourself. Put it under a trigger in a column for a dropdown, or inside a Drawer for a bottom sheet, which is often the better pattern on a phone. The menu does not float over the page, so it has no side or alignment to set.

The screen owns the state. A closed menu renders nothing. When a user taps an enabled row, the screen receives {:tap, {tag, item_id}} in handle_info/2 and decides what happens next: toggle a tick, change a radio choice, open a submenu or close the menu. The menu never changes open itself.

Each row kind looks different:

• A danger item uses danger_color, so a destructive action stands out from the rest.
• A disabled item is muted and sends no event.
• A checkbox row shows a tick when checked. A radio row shows a filled circle when checked and an empty one otherwise.
• A submenu row shows ▸ when closed and ▾ when open. Its rows appear indented below it. A phone has no hover and no room beside the panel, so the submenu does not fly out sideways.

Run this from your Mob app's root to add the component to lib/<app>/components/:

mix mishka.ui.gen.mob menu

The generator registers the tag, so you can use it in ~MOB markup. It also generates the Popover that the menu builds on, and copies the shared Event and Anchored helper modules. The examples on this page use the mishka_ prefix of the showcase app (--module-prefix mishka_), so the tag is <MishkaMenu>. Without a prefix, the tag is <Menu>.

This menu uses every row kind, written as tags: two items with icons, a checkbox, a documentation row, a section label above two radio rows, a disabled item and a submenu with two nested items.

One on_select tag, :pick, serves every row, and the message carries the row's own id. A checkbox row and a submenu row report like any other row, so the screen decides whether to toggle the tick or open the submenu.

Menu with every row kind

LTR RTL

Preview

Show the whole example Show less

Left: the example as it loads. Right: after a tap. A list of actions revealed from a trigger.

<MishkaMenu open={@open?} on_select={:pick} id="full">
  <MishkaMenuItem id={:edit} label="Edit" icon="✎" />
  <MishkaMenuItem id={:dup} label="Duplicate" icon="⧉" />
  <MishkaMenuSeparator />
  <MishkaMenuCheckbox id={:grid} label="Show grid" checked={@grid?} />
  <MishkaMenuItem id={:docs} label="Documentation" icon="↗" />
  <MishkaMenuSeparator />
  <MishkaMenuLabel text="SORT BY" />
  <MishkaMenuRadio id={:name} label="Name" name="sort" checked={@sort == :name} />
  <MishkaMenuRadio id={:date} label="Date" name="sort" checked={@sort == :date} />
  <MishkaMenuSeparator />
  <MishkaMenuItem id={:archive} label="Archive" disabled={true} />
  <MishkaMenuSubmenu id={:share} label="Share" open={@submenu == :share}>
    <MishkaMenuItem id={:copy} label="Copy link" />
    <MishkaMenuItem id={:email} label="Email" />
  </MishkaMenuSubmenu>
</MishkaMenu>

# One handler for every row — the message carries the row's own id.
def handle_info({:tap, {:pick, :grid}}, socket) do
  {:noreply, assign(socket, :grid?, not socket.assigns.grid?)}
end

def handle_info({:tap, {:pick, :share}}, socket) do
  # A submenu trigger reports like any row; the screen decides.
  {:noreply, assign(socket, :submenu, toggle(socket.assigns.submenu, :share))}
end

A menu needs neither icons nor groups. This one has two plain rows. Add width to give the panel a fixed width, otherwise it fills the available width.

Menu with plain actions

LTR RTL

Preview

Show the whole example Show less

<MishkaMenu open={true} on_select={:pick}>
  <MishkaMenuItem id={:a} label="One" />
  <MishkaMenuItem id={:b} label="Two" />
</MishkaMenu>

On a phone, an action list often works better as a bottom sheet. Because you place the menu yourself, you can render the same menu inside a Drawer with side={:bottom}. The Report item sets danger, so it takes the danger_color.

Menu as a bottom sheet

LTR RTL

Preview

Show the whole example Show less

# the same menu, rendered inside a bottom Drawer
<MishkaDrawer side={:bottom}>
  <MishkaMenu open={true} on_select={:pick}>
    <MishkaMenuItem id={:share} label="Share" icon="↗" />
    <MishkaMenuSeparator />
    <MishkaMenuItem id={:report} label="Report" icon="⚑" danger={true} />
  </MishkaMenu>
</MishkaDrawer>

Row tags

Write rows as child tags. Each tag has the attributes below.

Each tag has a builder function that returns the same node, for rows that come from data: item/3, separator/0, label/1, checkbox/3, radio/4 and submenu/3. For example, item(:delete, "Delete", danger: true).

Set on_select to an atom. When a user taps an enabled row, your screen receives {:tap, {tag, item_id}} in handle_info/2, where tag is your atom and item_id is the row's id. Disabled rows send nothing.

def handle_info({:tap, {:pick, :grid}}, socket) do
  {:noreply, Mob.Socket.assign(socket, :grid?, not socket.assigns.grid?)}
end

def handle_info({:tap, {:pick, id}}, socket) do
  socket =
    socket
    |> Mob.Socket.assign(:last, id)
    |> Mob.Socket.assign(:open?, false)

  {:noreply, socket}
end

The first clause keeps the menu open while a checkbox toggles. The second treats every other row as a command and closes the menu.

The Mob Menu does not port these parts of the headless Menu:

• side, align and the offsets. You place the menu, so it has no side to take.
• open_on_hover and delay. A touch screen has no hover.
• The web component's id and *_class attributes. Style the panel with the props above.
• The sideways submenu. A submenu opens inline, with its rows indented below the trigger row.

• Headless Menu, the web component this one ports.
• Mob Context Menu, the same list of actions, opened by holding a row.
• Mob Popover, the panel that the menu builds on, floating against a trigger.
• Mob Drawer, a bottom sheet that can hold a menu.
• Mob components, the full list of native components.