COMPONENT PATTERNS

A place for every next step.

Navigation, commands, contextual details, and progressive disclosure—with keyboard access built in.

Navigation position

Command menu

Grouped actions with a nested export menu. Arrow keys navigate; Escape closes.

Application menubar

Use for persistent application commands. Ordinary website links should remain normal navigation.

Context menu

Right-click or use Shift+F10 on the focused surface. A visible action menu keeps the same options reachable on touch.

Sample analytics card

Popover & hover details

Short passive hints belong in tooltips. Details containing links or buttons belong in a popover.

Accordion

Keep detailed guidance nearby without hiding the primary task.

When should a panel be modal?

Use a modal when an action must be completed or dismissed before continuing. Keep background content inert, contain focus, support Escape, and restore focus to the trigger.

What about mobile navigation?

Prefer a few clear destinations. Keep touch targets generous and provide labels with icons. Move secondary destinations into a labelled menu.

Selection feedback

Choose an action to see its result.

Announce completed actions without moving the interface or stealing focus.

Nested command menu

<Menu
  label="Actions"
  items={[
    { id: "inspect", label: "Inspect" },
    { id: "export", label: "Export", children: [
      { id: "json", label: "JSON" }
    ] }
  ]}
  onAction={handleAction}
/>