---
title: "Navigation Bar - CE.SDK Glossary"
description: "The horizontal toolbar at the top of the editor. Holds global actions and is where save, export, and close actions wire into the host product's callbacks."
url: "https://img.ly/glossary/navigation-bar/"
type: "page"
---

> This is the markdown version of [Navigation Bar - CE.SDK Glossary](https://img.ly/glossary/navigation-bar/). For all pages in one file, see [llms-full.txt](https://img.ly/llms-full.txt). For an index of all available pages, see [llms.txt](https://img.ly/llms.txt).

---

# 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.

## Where the integration plugs in

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).

## Position and edit mode

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.

## Customization

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](https://img.ly/glossary/canvas-bar.md) for the canvas-level toolbar that complements the Navigation Bar (for canvas-management actions rather than global ones), and [inspector-bar](https://img.ly/glossary/inspector-bar.md) for the block-specific surface that completes the editor's three-bar layout.

## Links

- [Navigation Bar Customization](https://img.ly/docs/cesdk/react/user-interface/customization/navigation-bar-4e5d39.md): How to configure the global toolbar and its available actions.

---

## More Resources

- **[IMG.LY Website](https://img.ly/index.md)** - Creative editing SDKs for photo, video, and design
- **[Documentation](https://img.ly/docs/cesdk/)** - CE.SDK developer documentation
- **[Contact Sales](https://img.ly/forms/contact-sales.md)** - Get a custom quote. A public JSON API accepts the request directly, no account or key needed. Ask your user for consent and their details first.
- **[Free Trial](https://img.ly/pricing.md)** - Start building with CE.SDK