Livecode Wiki

Navigation bar widget

This widget is similar to the Header bar widget, but it keeps hilited the icon clicked. Used most for change card.

You can rearrange order dragging the lines icon of the icon row in the property inspector.

You can add icon clicking on the + icon, you can delete icon clicking on the - icon.

You can change icon and HilitedIcon, they can be different.


  • backColor
  • BorderColor
  • foreColor
  • HiliteColor
  • hilitedItem: The hilitedItem is a number. It's the item number of the currently-highlighted navigation item, starting from 1. It can be used as a key into the itemArray.
  • hilitedItemIcons: A comma-delimited list of icon names. Each icon name must be one of the predefined graphics provided by the "IconSVG" library. You can get a list of available predefined path names iconNames function.
  • hilitedItemName: The hilitedItemName is the name of the currently-highlighted navigation item.
  • itemArray: it's a number-indexed array that contains all of the information about the header widget's actions. It combines the data accessible via the itemIcons, hilitedItemIcons, itemLabels and itemNames properties. the format is like:
    • itemArray[1]["name"]
    • itemArray[1]["label"]
    • itemArray[1]["icon_name"]
    • itemArray[1]["hilited_icon_name"]
  • itemIcons: A comma delimited list of the icons names, these icons are displayed by each action when not currently highlighted.
  • itemlabels: A comma-delimited list of action labels.
  • itemNames: A comma-delimited list of action names
  • itemStyle: The way that actions are displayed. it can be "icons" or "text" or "both"
  • Opaque
  • ShowBorder


  • hiliteChanged: Sent when a navigation item is selected. You can use it this way:
on hiliteChanged
   go card the hilitedItemName of me
end hiliteChanged