Skip to content

Navigation Bar

Actions that affect browser navigation (e.g. going back or closing the editor), have global effects on the scene (e.g. undo/redo and zoom), or process the scene in some way (e.g. saving and exporting) should be placed in the navigation bar.

Show or Hide the Navigation

show: boolean is used to show or hide the complete navigation

position: string is used to set the location of the navigation bar to either top or bottom.

import CreativeEditorSDK from 'https://cdn.img.ly/packages/imgly/cesdk-js/1.51.0/index.js';


const config = {
  license: 'mtLT-_GJwMhE7LDnO8KKEma7qSuzWuDxiKuQcxHKmz3fjaXWY2lT3o3Z2VdL5twm',
  userId: 'guides-user',
  ui: {
    elements: {
      view: 'default',
      /* ... */
      navigation: {
        show: true, // 'false' to hide the navigation completely
        position: 'top', // 'top' or 'bottom'
        /* ... */
      },
      panels: {
        /* ... */
      },
      dock: {
        /* ... */
      },
      libraries: {
        /* ... */
      },
      blocks: {
        /* ... */
      },
    },
  },
  callbacks: { onUpload: 'local' }, // Enable local uploads in Asset Library.
};


CreativeEditorSDK.create('#cesdk_container', config).then(async instance => {
  // Do something with the instance of CreativeEditor SDK, for example:
  // Populate the asset library with default / demo asset sources.
  instance.addDefaultAssetSources();
  instance.addDemoAssetSources({ sceneMode: 'Design' });
  await instance.createDesignScene();
});

Configure Navigation Buttons

action configures the available buttons in the navigation and call-to-action menu.

  • close: boolean shows or hides all close buttons.
  • back: boolean shows or hides all back buttons.
  • load: boolean shows or hides all load buttons.
  • save: boolean shows or hides all save buttons.
  • export.show: boolean shows or hides all export buttons.
  • export.format: 'application/pdf' | 'image/png' an array of mime types available for export. Supported are application/pdf and image/png. If not set it will add all supported mime types.
  • download: boolean shows or hides all download buttons.
import CreativeEditorSDK from 'https://cdn.img.ly/packages/imgly/cesdk-js/1.51.0/index.js';


const config = {
  license: 'mtLT-_GJwMhE7LDnO8KKEma7qSuzWuDxiKuQcxHKmz3fjaXWY2lT3o3Z2VdL5twm',
  userId: 'guides-user',
  ui: {
    elements: {
      view: 'default',
      /* ... */
      navigation: {
        show: true, // 'false' to hide the navigation completely
        position: 'top', // 'top' or 'bottom'
        action: {
          close: true, // true or false
          back: true, // true or false
          load: true, // true or false
          save: true, // true or false
          export: {
            show: true,
            format: ['application/pdf'],
          },
          download: true, // true  or false
          /* ... */
        },
      },
      panels: {
        /* ... */
      },
      dock: {
        /* ... */
      },
      libraries: {
        /* ... */
      },
      blocks: {
        /* ... */
      },
    },
  },
  callbacks: { onUpload: 'local' }, // Enable local uploads in Asset Library.
};


CreativeEditorSDK.create('#cesdk_container', config).then(async instance => {
  // Do something with the instance of CreativeEditor SDK, for example:
  // Populate the asset library with default / demo asset sources.
  instance.addDefaultAssetSources();
  instance.addDemoAssetSources({ sceneMode: 'Design' });
  await instance.createDesignScene();
});

Custom Call-To-Action Buttons

action.custom receives an array of custom actions. These will appear as buttons in the call-to-action menu (that also contains the ‘save’, ‘export’ and ‘download’ actions). The first item in the array will be shown in the navigation bar (in place of the ‘save’ action); all other items will be listed in the dropdown menu. A custom actions has the following properties:

  • label a string, which can be an i18n key that will be looked up in the translation table.
  • iconName defines the icon shown on the button. You can use any of the icon ids found within our IMG.LY Icon Set ‘Essentials’ (see full list here), or any icon id that you’ve added yourself using the addIconSet API (see details here).
  • callback a custom callback function with the signature () => void | Promise<void>. This function is called when the button is clicked. If the function returns a promise, the button is disabled and a spinner is shown on the button until the promise resolves.
import CreativeEditorSDK from 'https://cdn.img.ly/packages/imgly/cesdk-js/1.51.0/index.js';


const config = {
  license: 'mtLT-_GJwMhE7LDnO8KKEma7qSuzWuDxiKuQcxHKmz3fjaXWY2lT3o3Z2VdL5twm',
  userId: 'guides-user',
  ui: {
    elements: {
      view: 'default',
      /* ... */
      navigation: {
        show: true, // 'false' to hide the navigation completely
        position: 'top', // 'top' or 'bottom'
        action: {
          /* ... */
          custom: [
            {
              label: 'common.custom', // string or i18n key
              iconName: '@imgly/icons/Essentials/Download', // icon id from our 'Essentials' set, or a custom icon id
              callback: () => {
                // callback signature is `() => void | Promise<void>`
                // place custom functionality here
              },
            },
          ],
        },
      },
      panels: {
        /* ... */
      },
      dock: {
        /* ... */
      },
      libraries: {
        /* ... */
      },
      blocks: {
        /* ... */
      },
    },
  },
  callbacks: { onUpload: 'local' }, // Enable local uploads in Asset Library.
};


CreativeEditorSDK.create('#cesdk_container', config).then(async instance => {
  // Do something with the instance of CreativeEditor SDK, for example:
  // Populate the asset library with default / demo asset sources.
  instance.addDefaultAssetSources();
  instance.addDemoAssetSources({ sceneMode: 'Design' });
  await instance.createDesignScene();
});

Rearrange Components

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']);

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

Layout Helpers

Component IDDescription
ly.img.separatorAdds 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.
ly.img.spacerAdds 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
ly.img.title.navigationBarTitle:
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' }
ly.img.back.navigationBarBack 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.
ly.img.close.navigationBarClose 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.
ly.img.undoRedo.navigationBarUndo/Redo controls:
Two buttons for un-doing and re-doing recent changes.
ly.img.zoom.navigationBarZoom 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).
ly.img.preview.navigationBarPreview 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.
ly.img.actions.navigationBarCall 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',
];