Menu & Navigation Menu

The Menu block renders a vertical list of clickable items — each with a label, optional caption, start/end icon or image, and a default or danger style. It works in two modes: Static (you compose the item list by hand) and Mapped (items are generated from a bound data source). Items can be plain Label items or Confirmation items that require a second click before acting. A new Menu arrives with three starter items at full width.

Tip: When to use Menu: Offer a flat list of actions or choices — row actions, quick links, a settings list. Build the list from data with Mapped mode. Add inline confirmation for destructive actions. For hierarchical navigation with nested items and links, use Navigation Menu instead.

Properties

Content

Per-Item Settings (Static Mode)

Each item in the Static list opens a detail panel with its own settings:

Appearance

Events

Methods

Exposed State

Behavior & Gotchas

Warning: The whole menu disappears when it has no items to show. A Static menu whose items are all hidden and a Mapped menu with an empty data source render nothing at all — no placeholder.

Warning: Click events are wired differently in the two modes. Static: each item has its own On Click. Mapped: one block-level On Menu Item Click fires for all items. Switching modes means re-wiring events.

Note: A confirmation item stays confirming — there is no timeout. The item's text changes to its Confirmation Label and waits for a second click. There is no automatic revert.

Note: selectMenuListItem fires no event. It updates state but does not fire On Click or On Menu Item Click.

Navigation Menu

The Navigation Menu block (shown as "Navigation" in the block picker) renders a list of navigation items — a vertical sidebar or a horizontal top bar — and tracks which one is currently active. Each item is either a leaf (a single selectable tab drawn as a Custom entry or a Page link) or a Group that nests other items. Pair it with a Navigation Container and the container swaps its content whenever the menu's selection changes.

Tip: When to use Navigation Menu: Build the primary navigation for an interface — left sidebar or top bar — where one item stays highlighted as the active section. Group related destinations under a collapsible parent. Link items directly to static pages, or keep them Custom and drive your own content region.

This block is navigation inside a page. For the app-level navigation menu that links your app's pages, see Navigation Overview.

Properties

Content

Appearance

Events

Methods

Per-Item Settings

Exposed State

Behavior & Gotchas

Note: Pair with Navigation Container for content switching. The menu is the control; the container is the content area it drives. A new Navigation Container arrives already linked to its own Navigation Menu. See Navigation Container below.

Warning: Group items don't themselves have click actions. Groups are collapsible parent nodes — clicking them expands or collapses nested items rather than selecting the group itself.

Navigation Container

The Navigation Container block renders different content depending on the selected item in a Navigation Menu. When the menu's active item changes, the container swaps the visible page or block to match. It is the content region paired with the Navigation Menu control.

Tip: When to use Navigation Container: Build a tabbed or routed content area whose visible pane changes when the user selects a nav item. The container handles the swap; the Navigation Menu handles the selection tracking.

Properties

Set up a Navigation Container

1. Drag Navigation Container onto the page. It arrives with its own Navigation Menu as its header, already set in Navigation Menu.

2. Select the menu and add its items. A Custom item gets its own content slot in the container. A Page item loads an interface page in place.

3. On the canvas, select each Custom item in the menu and fill its content slot with blocks.

4. Preview the page and click each item. Only the selected item's content is loaded at a time.

Related Blocks