Documentation
API
Q&A
Read
AnnouncementsArticlesWebsite tips
Learn
Getting StartedManagerMaestroAnalyticsExchangeWorkspaces
Resources
VideosDownloadsExchange PackagesRelease Notes
Ideas
Contact
Platform
Manager
Maestro
Exchange
Workspaces
Analytics
Springboard

Navigator (Avalon)

   MaestroThe UI design product.  |   Form Builder |  22.04 This feature was introduced in 22.04.

Maestro comes with an Navigator (Avalon) component that allows a form user to move between pages of a form.

Usage

  1. Open the Palette pane in the Maestro Editor.
  2. Locate the Navigator (Avalon) component within the Navigation folder.
  3. Drag the component into the View pane or the Wireframe.
  4. Configure the component's properties via the Properties pane.

Properties

The following properties are available to this component:

Show Left Hand Navigation
Boolean
leftMenu

Select this option to move navigation from the top to the left of the page

Show Mobile Menu Button
Boolean
includeMenuButton

Select this option to show the mobile menu

Accessibility

Aria Label
Text
navAriaLabel

Enter the Aria Label for this navigation element

Tab Focus
Option
tabFocus

If set to reachable, the tab index is set to 0, else it will be set to -1

The following options are available from the Tab Focus dropdown:

Label Value
Reachable 0
Not reachable -1
Disable All Non-Active Navigator Items
Boolean
disableOnNonActive

If checked, all non-active navigator items will have aria-disabled set to true

Navigator type (role)
Text
navItemGroupRole

The value entered will appear within the role attribute for navigation item group/container

Navigator item type (role)
Text
navItemRole

The value entered will appear within the role attribute for each navigation item

Left Hand Navigation

Show Second Level
Boolean
includeSecondLevel

Select this option to move navigation from the top to the left of the page

Styles

The following styles are available to this component:

Next, learn about the Second Level Navigator component.