Navigation menu

Adds a navigation bar across the top of a page, which allows you to add and organize multiple items in an app and customize the navigation between them. To add and organize the items in the navigation menu, use the Navigation item and Navigation list views.
Tip: The Navigation menu, Navigation item, and Navigation list views are available for navigation support in Application Designer only.

Configuration properties

Under Configuration, set or modify the appearance and behavior properties for the view.

Screen size
A configuration property that has the Screen Sizes icon The Screen Sizes icon beside the property name can have different values for each screen size. If you do not set a value, the screen size inherits the value of the next larger screen size as its default value.
Theme definitions
Theme definitions specify the colors and styles for a view and determine its appearance. You can preview the look and feel of views in the theme editor. See Themes.
The appearance configuration properties for Navigation menu are shown in the following table:
Table 1. Appearance configuration properties for Navigation menu
Appearance configuration property Description Data type
Alignment The Screen Sizes icon Specifies the alignment of the items in the navigation menu.
  • Left (default)
  • Center
  • Right
 NavigationBarAlignment
Color mode The Screen Sizes icon Sets the color mode of the navigation menu.
  • Light mode
  • Dark mode
 NavigationBarColorMode
Font size The Screen Sizes icon Specifies the font size of the navigation items.
  • Default
  • Large
  • Small
  • Extra-Small
 ButtonSizeStyle
Border color The Screen Sizes icon Sets the type of border color for the navigation items when selected. String
On-hover highlight color The Screen Sizes icon Sets the type of highlight color for the navigation items at hover-over. String

Events

Set or modify the event handlers for the view in the Events properties. You can set events to be triggered programmatically or when a user interacts with the view. For information about how to define and code events, see User-defined events. Navigation menu has the following types of event handlers:
  • On load: Activated when the page loads. For example:
    me.setVisible(false);

Depending on the specific event, you can use JavaScript logic to modify the effects of the view. More information on using events with views is found in the topic User-defined events.

Methods

For detailed information on the available methods for Navigation menu, see the Navigation menu JavaScript API..

Additional resources

For information about how to create a coach or page, see Building coaches.
For information about standard properties (General, Configuration, Positioning, Visibility, and HTML Attributes), see View properties.