Burger

The closed state is drawn from three boxes, so it does not depend on the font the way a ☰ glyph does. Mob exposes no rotation, and two horizontal bars would read as an equals sign, so the open state is a ✕ glyph.

Both states sit in the same fixed size by size box, so the tap target and the button metrics are identical either way. size defaults to 40, like Action Icon.

The screen owns whether the menu is open. Pass that state as opened, and flip it when {:tap, tag} arrives in handle_info/2. A disabled burger wires no handler and mutes the bars.

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

mix mishka.ui.gen.mob burger

The generator registers the component's tag, so you can use it in ~MOB markup. It also adds the shared Event module the component calls. The examples on this page use the mishka_ prefix of the showcase app (--module-prefix mishka_), so the tag is <MishkaBurger>. Without a prefix the tag is <Burger>.

The button shows three bars when opened is false and a ✕ when it is true. The screen keeps a nav_open? flag and flips it on every tap.

Burger button

LTR RTL

Preview

Show the whole example Show less

Left: the example as it loads. Right: after a tap. One control, one tap target, and a ✕ when open.

<MishkaBurger opened={@nav_open?} on_toggle={:toggle_nav} />

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

Your screen receives {:tap, tag} in handle_info/2 when the user taps the button. Flip the open state there:

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

• label and controls are not ported. They become aria-label and aria-controls on the web, and Mob exposes no accessible name.
• id and the *_class attributes are not ported.
• The web version animates between the bars and the ✕ with CSS transforms. Here there is no transition, only the destination.

• Headless Burger, the web component this one ports.
• Mob Toolbar, a strip of related controls.
• Mob Action Icon, an icon-only button with the same tap target.
• Mob Drawer, an edge-anchored panel that slides in over a dimmed backdrop.
• Mob components, the full list of native components.