Navigation Bar

The Navigation Bar is the horizontal toolbar at the top of the editor that holds global actions: things that apply to the entire scene rather than to a specific selected block. Back, undo, redo, scene title, zoom controls, preview, save, export, close. If an action is not tied to a selected block and is not about the canvas structure itself, it belongs in the Navigation Bar.

The default Navigation Bar layout, left to right: back navigation, undo/redo, spacer, scene title, spacer, zoom controls, preview, actions (save/export), close. The two spacers around the title center it between the left-side navigation controls and the right-side action controls.

The Navigation Bar is where editor actions connect to the host product’s backend. Action buttons (save, export, close) are wired to the Callbacks API. When a button is present in the bar and the corresponding callback is registered, clicking the button triggers that callback.

This is what makes Save mean something useful to a host application. The save button triggers onSave, which the integration implements to send the scene back to the product’s storage layer. The export button triggers onExport, which the integration implements to receive the rendered output. The close button triggers onClose, which the integration uses to dismiss the editor and return to the surrounding flow.

Custom onClick handlers can also be provided directly on individual components, which is the right pattern when a button needs behavior other than the default callback (for example, an export that should also kick off a tracking event).

The Navigation Bar can be positioned at the top or bottom of the editor via configuration. Top is the default and the standard layout for all Starter Kits.

Like the Dock and Inspector Bar, the Navigation Bar is edit-mode-aware. Its contents can be configured differently per mode (Transform, Text, Crop, Trim, or custom) using the orderContext parameter. In practice, most integrations keep the Navigation Bar consistent across modes, but the option is there.

The Navigation Bar Order API provides six methods for getting, setting, updating, removing, and inserting components, all accepting an optional orderContext. Custom components can be registered and inserted alongside built-in ones. Integrations often trim the default set to match their context. A Photo Editor integration might drop the back button and scene title in favor of a simpler close-and-export strip.

The Navigation Bar is also partially configurable via the UI configuration object at initialization. The show and position properties control visibility and placement without needing the Order API at all.

See canvas-bar for the canvas-level toolbar that complements the Navigation Bar (for canvas-management actions rather than global ones), and inspector-bar for the block-specific surface that completes the editor’s three-bar layout.