Firstly, we will create a new stack and name the first card 'contacts'. This matches the first selection option for the navigation bar, when using the default options.

We will now add the navigation widget to the stack by dragging it from the tools palette (1). Once we have the control, we will place it in a group (2) which is set to behave like a background (backgroundBehavior is set to true) (3). This will cause the navigation bar to be created automatically on every new card we create in the stack, which is usually the desired behavior of a navigation bar. Once this has been done, we will create three other cards named "favourites", "music", and "search".

Navigating around cards with the widget is very simple. Each option on the navigation bar is assigned a name (1). This name corresponds to the hilitedItemName property of each option button on the navigation bar. Therefore, the following code added to the navigation bar allows us to use it to switch between the cards in the stack, which have the same names as are assigned to each button on the navigation bar:

on hiliteChanged
    go to card the hilitedItemName of me
end hiliteChanged

Using the widget's property inspector, it is simple to customize the navigation controls:

1. Delete item

2. Set item label

3. Set item's icon

4. Set item's hilited icon

5. Add new item

6. Drag to reorder

In order to set the colors used by the navigation bar, set the foreColor, backColor, borderColor, and hiliteColor properties as usual for LiveCode controls.

Aside from responding to a change in the highlight using the hiliteChanged message, there is generally not very much that requires scripting when using the navigation bar. However, each of the various aspects of the navigation bar items’ display (icon, highlighted icon, label) can be set individually from script using the itemLabels, itemIcons and hilitedItemIcons properties. The values of these properties are just comma-delimited lists. It can be handy to write utility functions to set these if you are going to do so often, for example:

command setLabelAtIndex pLabel, pIndex
  local tLabels
  put the itemLabels of widget "navbar" into tLabels
  put pLabel into item pIndex of tLabels
  set the itemLabels of widget "navbar" to tLabels
end setLabelAtIndex

Alternatively, it is possible to set all the data of the navbar at once, using the itemArray property.

local tNavItems
put "Contacts" into tNavItems[1]["label"]
put "contacts" into tNavItems[1]["name"]
put "user" into tNavItems[1]["icon_name"]
put "user" into tNavItems[1]["hilited_icon_name"]
...
set the itemArray of widget "navbar" to tNavItems