TopMenu panel stays in the top of Admin area interface. It will contains global functionality items like Page Options, Publish, Undo & Redo buttons, etc. It can be look on two different ways based on the current user mode - "admin" and "preview" mode. This user interface gives us the opportunity to manipulate with the menu items - add/remover, show/hide, enable/disable menu item or to change its text label.



The instances of the Top Menu is kept as references in SK.Singletons.top_menu:

  • SK.Singletons.top_menu.admin - This is the "regular" menu, visible in all Admin UI states except "Preview".
  • SK.Singletons.top_menu.preview - This instance is displayed when the user clicks the [Preview] button; it's item configuration includes buttons for changing device preview mode, etc.


Name Description Parameters Returns
configure Configures (& re-draws) Menu. The parameter is hash of items of this type: Item Properties ObjectHash of items -
enable Enables the Menu: sets "enabled" visibility state, all enabled menu items are clickable - -
disable Disables the Menu: sets "disabled" visibility state, all menu items are not clickable - -
show Shows the Menu - -
hide Hides the Menu - -
getItem Returns menu item (instance) by ID StringItem ID Object
addItem Adds new menu item (in case the Menu has not yet been injected in DOM, only registers the item) Object StringItem ID
removeItem Removes existing menu item (in case the Menu has not yet been injected in DOM - just removes it from the configuration) StringItem ID -
enableItem Enables menu item (visually & functionally) StringItem ID -
disableItem Disables menu item (visually & functionally) StringItem ID -
showItem Shows menu item StringItem ID -
hideItem Hides menu item StringItem ID -


NOTE: Item object properties can be found here: Item Properties
Button styles are set by class name in the item_options['class'] property (see SK.UI.Buttons)
Handlers - each Top Menu (Toolbar) item has a "handler" - constructor, responsible for creating the instance:

  • SK.UI.Buttons (default) Produces buttons
  • SK.UI.Properties.DropdownButton Produces drop-down buttons
  • SK.UI.Text Produces a simple text node





Add an item to the admin top menu.

   id:  'test_top_menu_button',
   item_options: {
      caption     : 'Top Menu Button',
      tooltip     : 'Button tooltip',
      'class'     : 'btn-secondary btn-icon btn-icon-gear',
      handler     : SK.UI.Buttons
   area  : 'home',
   order : 1,
   onclick     : function () {
      console.log( 'Button is clicked.' )


Remove an item from the admin top menu.

SK.Singletons.top_menu.admin.removeItem( 'test_top_menu_button' );


Show or hide Menu Item.

SK.Singletons.top_menu.hideItem( 'undoredo' );
SK.Singletons.top_menu.showItem( 'undoredo' );


Updating text label of Text Menu Item.

// get the Text item by ID
SK.Singletons.top_menu.preview.getItem( 'preview_mode' ).set( ' );