Patterns

Routing add menu

The blue 'Add step' action menu on the Routing flow canvas (Figma Add_Card). It opens off a connector handle and offers the next actions for that branch, grouped semantically — a bold heading (Continue / Finalize) over a list of action rows (label + ArrowCircleRight). A dashed divider separates the groups. It is a solid-primary panel; drop it inside a Popover anchored to the connector.

Updated Aug 4, 2026 by Juan Pablo Turina

Live preview

Continue:
Finalize:
import {
  RoutingAddMenu,
  RoutingAddMenuGroup,
  RoutingAddMenuItem,
} from "@/components/patterns/routing-add-menu";

<RoutingAddMenu>
  <RoutingAddMenuGroup label="Continue">
    <RoutingAddMenuItem onClick={addStep}>Add step</RoutingAddMenuItem>
    <RoutingAddMenuItem onClick={group}>Group by decline types</RoutingAddMenuItem>
  </RoutingAddMenuGroup>
  <RoutingAddMenuGroup label="Finalize" divider>
    <RoutingAddMenuItem onClick={decline}>Decline</RoutingAddMenuItem>
  </RoutingAddMenuGroup>
</RoutingAddMenu>

Anatomy

A solid-primary panel (rounded-xl, 16px padding, 16px gap). Each group is a bold heading rendered with a trailing colon, followed by its action rows; a dashed white/40 divider sits between groups. Every row pins an ArrowCircleRight to the right edge, and the whole row is the button.

Continue:
Finalize:
  1. 1
    Panel

    The solid-primary surface (rounded-xl, 16px padding). Drop it in a Popover anchored to a connector handle.

  2. 2
    Group heading

    A bold text-base heading rendered with a trailing colon (Continue: / Finalize:).

  3. 3
    Action row

    A label with an ArrowCircleRight pinned to the right. The whole row is the clickable action.

  4. 4
    Divider

    A dashed white/40 line between groups — set `divider` on any group after the first.

States

Off a decline branch

Continue → Add step / Group by decline types; Finalize → Decline. The canonical menu on a declines output.

Continue:
Finalize:
Off an error branch

Continue adds Retry (same provider) / Retry all (error and declines); Finalize → Cancel. The menu on an Error / Paused output.

Continue:
Finalize:

Import

Copy this import line at the top of the file where you compose this molecule.

Compose the panel from its parts: a RoutingAddMenu wrapping RoutingAddMenuGroup headings, each holding RoutingAddMenuItem rows. Anchor the panel to the connector inside a Popover.

import { RoutingAddMenu, RoutingAddMenuGroup, RoutingAddMenuItem } from "@/components/patterns/routing-add-menu";

Props

The panel is a container; groups carry the heading + divider, and each item is a one-shot action.

RoutingAddMenu

PropTypeDefaultDescription
childrenReactNode—The groups. The panel is a solid-primary surface.
classNamestring—Merged onto the panel.

RoutingAddMenuGroup

PropTypeDefaultDescription
labelstring—Group heading, rendered with a trailing colon (e.g. 'Continue:').
dividerboolean—Draw the dashed separator above the group. Set it on any group after the first.
childrenReactNode—The action rows.

RoutingAddMenuItem

PropTypeDefaultDescription
childrenReactNode—The action label. An ArrowCircleRight is pinned to the right.
onClick() => void—Fires when the row is clicked (the whole row is the button).
classNamestring—Merged onto the row button.

When to use

  • As the menu that opens when a merchant clicks Add step on a connector handle.
  • To offer the next actions for a branch (add a provider, group declines, retry) plus a way to finalize it (Decline / Cancel).
  • Anchored to the connector, on the Routing canvas.

When not to use

  • As a general dropdown menu — that is DropdownMenu / ContextMenu.
  • For picking a specific provider to add — that is the provider step picker (a searchable list).
  • Outside the Routing canvas — this is the on-canvas add-step affordance.

Usage

Do
  • Group actions semantically: Continue (what extends the route) then Finalize (what ends it).
  • Anchor it to the connector in a Popover so it reads as attached to that branch.
  • Keep rows to short next-action verbs; the ArrowCircleRight signals 'proceed'.
Don't
  • Don't recolour the panel — it is solid-primary; the meaning comes from the grouping, not the colour.
  • Don't stack more than the two canonical groups (Continue / Finalize).
  • Don't use it for multi-select or form input — it is a list of one-shot actions.

Related

Cross-links to the atoms this molecule composes and sibling patterns.