Nav link

A nav link renders one tappable row. The row can have a leading icon, a label with an optional second line of description, and trailing content. The row for the current page uses the primary color on a raised background. A group shows a chevron, ▸ when it is closed and ▾ when it is open, and draws its nested links indented below the row.

The screen owns the state. On the web, a group is a <details> element, and LiveView resets its open state on every patch. In Mob, opened is a prop, so a re-render cannot lose it. default_opened keeps the web precedence: it applies only while opened is nil.

The component never navigates. It describes a row, and your screen decides what a tap does. The optional href comes back with the tap, the same way it does for Anchor.

icon and trailing take a glyph string, a node, or a list of nodes. On a group, the chevron replaces trailing, because it is what tells you the row expands instead of navigating. The children of the tag are the nested links.

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

mix mishka.ui.gen.mob nav_link

The generator registers the tag, so you can use it in ~MOB markup. It also copies the shared Event helper module. The examples on this page use the mishka_ prefix of the showcase app (--module-prefix mishka_), so the tag is <MishkaNavLink>. Without a prefix, the tag is <NavLink>.

A link is a tap plus a destination. The href rides back with the tag, so one handle_info/2 clause serves a whole sidebar, and active marks the link whose href the screen stored as current. The component never navigates, because a node tree only describes the screen.

Nav links that share one handler

LTR RTL

Preview

Show the whole example Show less

Left: the example as it loads. Right: after a tap. One handler serves many links, and active marks the one it named.

<MishkaNavLink
  id="nav-docs"
  label="Docs"
  icon="▤"
  trailing="↗"
  href="/docs"
  active={@current == "/docs"}
  on_tap={:pick}
/>

# The component never navigates: a node tree only describes one.
def handle_info({:tap, {:pick, href}}, socket) do
  {:noreply, Mob.Socket.assign(socket, :current, href)}
end

Pass opened and on_toggle to a row that has nested links. The screen flips opened when it receives the toggle message, so no patch or re-render can reset the group. indent sets how far the nested links sit in. Each nested link keeps its own href and on_tap.

Nav link group that the screen controls

LTR RTL

Preview

Show the whole example Show less

Left: the example as it loads. Right: after a tap. A nav link group expands to show its children.

<MishkaNavLink
  id="nav-mail"
  label="Mail"
  icon="✉"
  indent={24}
  opened={@open?}
  on_toggle={:toggle}
>
  <MishkaNavLink
    id="nav-inbox"
    label="Inbox"
    description="12 unread"
    href="inbox"
    on_tap={:pick}
  />
</MishkaNavLink>

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

default_opened is the fallback for a group that nobody controls, such as a static page. It applies only while opened is nil. This group has no handler, so tapping it changes nothing: a node tree has nowhere to keep the answer. Pass opened as soon as the group has to toggle.

Nav link group open by default

LTR RTL

Preview

Show the whole example Show less

<MishkaNavLink id="nav-team" label="Team" icon="◍" default_opened={true}>
  <MishkaNavLink id="nav-alice" label="Alice" />
</MishkaNavLink>

trailing takes a node as readily as a glyph, so a badge can sit at the end of a row. Tapping Reports marks it as active. Archive is disabled, so it has no handler and a tap on it does nothing.

A trailing node has to state its own width. A Box with no width fills its parent on both platforms, and a filling badge pushes the label off the row.

Disabled nav link and a node in the trailing slot

LTR RTL

Preview

Show the whole example Show less

# A trailing NODE must state its own width: a Box with none fills its
# parent on both bridges, and a filling badge shoves the label off the row.
<MishkaNavLink id="nav-reports" label="Reports" trailing={badge(3)}
               active={@on?} on_tap={:mark} />
<MishkaNavLink id="nav-archive" label="Archive" disabled={true} on_tap={:mark} />

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

A row shows that it is the current page with a color, and a group shows that it is open with a glyph. A device test reads neither. With id set, each node carries a tag that names its state. The label and description are text, so a test can already read them.

on_tap and on_toggle send {:tap, {tag, href}} to the screen when the row has an href, and {:tap, tag} when it does not. A disabled row sends nothing. Handle both in handle_info/2.

def handle_info({:tap, {:pick, href}}, socket) do
  {:noreply, Mob.Socket.assign(socket, :current, href)}
end

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

The Mob Nav Link does not port these parts of the headless component:

• navigate and patch. They are LiveView routing concepts. On a device your screen decides how to navigate, and the destination comes back with the tap as href.
• class, label_class, children_class and rest. There is no CSS and there are no DOM attributes.
• The inner_block label slot. The children of the tag are the nested links, so set the text with label.
• aria-current. No node type in the bridge carries accessibility semantics.

• Headless Nav Link, the web component this one ports.
• Mob Anchor, a single tappable link.
• Mob Menubar, a bar of command menus.
• Mob Navigation Menu, site navigation with shared panels.
• Mob Tabs, a strip with one visible panel.
• Mob components, the full list of native components.