Skip to main content
CESDK/CE.SDK/Web Editor/Customization/API Reference

Adjusting the Content of the Navigation Bar

Learn how to adjust the content of the navigation bar in the editor

There are 2 APIs for getting and setting the order of components in the Navigation Bar.

The content of the Navigation Bar changes based on the current edit mode ('Transform' (the default), 'Text', 'Crop', 'Trim', or a custom value), so both APIs accept an orderContext argument to specify the mode.

For example usage of similar APIs, see also Moving Existing Buttons or Adding New Buttons in the Guides section.

Note that the Navigation Bar is also configurable using our UI configuration.

Get the Current Order#

getNavigationBarOrder(
  orderContext: OrderContext = { editMode: 'Transform' }
)

When omitting the orderContext parameter, the order for the 'Transform' edit mode is returned, e.g.

cesdk.ui.getNavigationBarOrder();
// => [
// {id: 'ly.img.back.navigationBar'},
// {id: 'ly.img.undoRedo.navigationBar'},
// ...
// ]

Set a new Order#

setNavigationBarOrder(
  navigationBarOrder: (NavigationBarComponentId | OrderComponent)[],
  orderContext: OrderContext = { editMode: 'Transform' }
)

When omitting the orderContext parameter, the order is set for the default edit mode ('Transform'), e.g.:

// Sets the order for transform mode by default
cesdk.ui.setNavigationBarOrder([ 'my.component.for.transform.mode']);

Navigation Bar Components#

The following lists the default Navigation Bar components available within CE.SDK.

Layout Helpers#

Component IDDescription
Component ID
ly.img.separator
Description
Adds a vertical separator (<hr> element) in the Navigation Bar.
Separators follow some special layouting rules:
- If 2 or more separators end up next to each other (e.g. due to other components not rendering), only 1 separator will be rendered.
- Separators that end up being the first or last element in the Inspector Bar will not be rendered.
- Separators directly adjacent to the left side of a spacer (see below) will not be rendered.
Component ID
ly.img.spacer
Description
Adds horizontal spacing in the Navigation Bar.
Spacers will try to fill all available whitespace, by distributing the available space between all spacers found in the Navigation Bar.

Common Controls#

Component IDDescription
Component ID
ly.img.title.navigationBar
Description
Title:
A section displaying the title of the currently opened scene file.

The title displayed on the UI is set by the config.ui.elements.navigation.title parameter. If this parameter is not specified, the system will instead check the component’s payload. To define a payload, rather than adding the ID directly to the order, insert an object structured like this: { id: 'ly.img.title.navigationBar', title: 'My Scene' }
Component ID
ly.img.back.navigationBar
Description
Back button:
A button used to navigate to the previous page. Note that this button is hidden by default, and can be configured using the UI Elements configuration.
Component ID
ly.img.close.navigationBar
Description
Close button:
A button used to close the editor. Note that this button is hidden by default, and can be configured using the UI Elements configuration.
Component ID
ly.img.undoRedo.navigationBar
Description
Undo/Redo controls:
Two buttons for un-doing and re-doing recent changes.
Component ID
ly.img.zoom.navigationBar
Description
Zoom controls:
Two buttons for zooming the view in and out, separated by a third button showing the current zoom level and opening a dropdown offering common zoom operations (Auto-Fit Page, Fit Page, Fit Selection, 200% Zoom, 100% Zoom, 50% Zoom, Zoom In, Zoom Out).
Component ID
ly.img.preview.navigationBar
Description
Preview button:
Toggles Preview mode, which allows viewing and editing the scene like an Adopter would (e.g. with all Placholder constraints enforced). Changes made in Preview are not saved and will be discarded when leaving Preview.
Component ID
ly.img.actions.navigationBar
Description
Call To Action buttons:
A prominent "Save" Button, next to a smaller Button opening a dropdown offering various operations for exporting and loading scene files (Export Images, Export PDF, Export Design File, Export Archive, Import Design File, Import Archive). The prominent Button as well as the contents of the Menu can be customized extensively using our UI Elements Configuration. You can even add custom buttons and callbacks here.

Default Order#

The default order of the Navigation Bar is the following:

[
  'ly.img.back.navigationBar',
  'ly.img.undoRedo.navigationBar',


  'ly.img.spacer',


  'ly.img.title.navigationBar',


  'ly.img.spacer',


  'ly.img.zoom.navigationBar',
  'ly.img.preview.navigationBar',
  'ly.img.actions.navigationBar',
  'ly.img.close.navigationBar'
]