Page-Based Navigation

Page-Based Navigation Inspector


Create automatic horizontal or vertical navigation based on the page tree.


A page-based navigation creates nested menus based off of the pages in your project. The links update automatically when you make changes to the page tree. Refer to Creating Pages to learn how to create pages.

You cannot switch between horizontal and vertical orientations, you will need to drag a new navigation component from the Palette and configure it to match the old one.

Tip: A link to the current page is referred to as an “active” link. You can style it to look different from the others using the Active mode button in the toolbar of the Appearance section of the Inspector.

Useful Design Patterns


Name Description
Attached Pages The page-based navigation can select its starting pages automatically based on a “preset”. You can choose to display the direct children of the project home page (the “top-level” pages), the siblings of current page, or the children of the current page.

You can manually choose the starting pages by choosing “Custom…”  Several new settings appear below the Attached Pages setting for choosing custom pages.

Custom Level * Enter the level at which you would like the navigation to start.

Each layer of pages in the page tree is referred to as a level, with the home page being level 1, its children being level 2, and so on.

In addition, you can specify pages above the current page using negative numbers, with its parent page being level -1, its parent’s parent page being level -2, and so on. This can be useful when adding navigation to a Master or Template.

Custom Pages * Choose a custom set of starting pages. This setting overrides any Custom Level setting.
Use Children * Whether to start with the children of the pages from the custom level/pages, rather than the pages themselves. This can be useful for showing the children of a specific page, without needing to select each child page by hand.
Maximum Levels The maximum number of levels of pages to show in the navigation. Leave this field blank to show all levels.

Each layer of pages in the page tree is referred to as a level, so a value of 1 will show just the starting pages, 2 will show just the starting pages and their children, and so on.

List Style ** Controls the appearance of sub-menus. You can choose to display sub-level menus as floating “fly-out” menus, or to nest them into an indented outline. Note: The indentation is controlled by the Padding setting.
Hide Inactive Pages ** Whether to only show pages that are part of the active path, rather than all pages. The active path comprises the current page, and all of its parent pages, up to the project home page. This is commonly used in conjunction with the “NestedList Style to simulate an accordion style navigation.

* These settings are only available when Attached Pages is set to “Custom…
** These settings are only available for vertical navigation.