Menus and Navigation

Menus and Navigation Page Elements provide structured navigation interfaces that help users move between Pages, access related functionality, and interact with application menus.

Use these elements to build application headers, navigation bars, account menus, dropdown menus, and grouped navigation actions. They can be used within Pages, Forms, and Page Slices wherever supported by the layout.

Menus are built from nested Page Elements. The parent elements define the navigation structure and appearance, while individual menu items define the destinations or actions available to users.

For standalone links and buttons, see Buttons and Actions. For navigation that requires application logic, see Page Flow.

The Page Editor provides the following menu-oriented elements:

Element	Purpose
Menubar Holder	Defines the outer navigation area and its background appearance.
Menubar Collapsible	Provides a collapsible navigation region for responsive layouts.
Menubar	Organizes a group of navigation items.
Menubar Item	Defines an individual menu entry, which can contain a link or popup menu.
Menubar Item Link	Provides the clickable link or trigger within a Menubar Item.
Popup Menu	Contains a group of navigation choices or actions displayed as a popup.
Popup Menu Item	Defines an individual clickable entry inside a Popup Menu.
Popup Menu Separator	Visually separates groups of Popup Menu Items.
Login Info	Displays information about the current user's login within a navigation area.

The Element Library also provides ready-made menu structures and styles.

These include Menubar layouts, Menubar popup menu patterns, standalone Popup Menus, Popup Menu Items, and separators.

For most common navigation requirements, start with a suitable ready-made structure and customize its contents rather than constructing every nested element individually.

Menus are hierarchical structures composed of parent and child elements.

A typical navigation menu contains:

A Menubar Holder defining the overall navigation region.
A Menubar Collapsible providing a responsive navigation area.
A Menubar containing the navigation entries.
Menubar Items defining individual entries.
Menubar Item Links providing the clickable destinations.

An example structure is:

text

Menubar Holder
  Menubar Collapsible
    Menubar
      Menubar Item
        Menubar Item Link (Home)
      Menubar Item
        Menubar Item Link (Dashboard)
      Menubar Item
        Menubar Item Link (Reports)
      Menubar Item
        Menubar Item Link (Settings)

A Menubar Item can also contain a Popup Menu.

For example:

text

Menubar Item
  Menubar Item Link (Account)
  Popup Menu
    Popup Menu Item (Profile)
    Popup Menu Item (Preferences)
    Popup Menu Separator
    Popup Menu Item (Sign Out)

In this example:

Menubar Item Link provides the visible Account menu trigger.
Popup Menu contains the choices displayed when the menu opens.
Popup Menu Items provide individual destinations or actions.
Popup Menu Separator divides related actions into visually distinct groups.

The exact structure depends on the selected menu pattern.

Each menu element has its own settings.

For example:

Selected Element	What You Configure
Menubar Holder	Overall navigation background style.
Menubar Collapsible	The responsive navigation content and its structure.
Menubar	Group alignment and scrolling behavior.
Menubar Item	Active appearance and popup menu behavior.
Menubar Item Link	Destination, action, and link presentation.
Popup Menu Item	Individual popup destination or action.

When modifying a menu, select the element corresponding to the behavior you want to change.

For example, changing the Menubar's horizontal alignment affects the arrangement of the menu group. Changing the HRef of a Menubar Item Link affects only that individual link.

For more information about selecting nested elements, see Selected Element Toolbar.

A typical workflow for adding a navigation menu is:

Open the Page or Page Slice in the Page Editor.
Select the layout area where the navigation should appear.
Open the Element Library and choose a suitable Menubar style or menu structure.
Add the menu to the selected location.
Select individual Menubar Item Links and configure their labels, destinations, or actions.
Add, remove, or rearrange menu items as required.
Configure popup menus for entries that should contain additional choices.
Adjust the Menubar appearance and responsive settings.
Save and preview the Page or Page Slice.

For example, an application header might contain:

text

Home    Dashboard    Orders    Reports    Account ▼

The first four items can use direct links to Project Pages.

The Account item can open a Popup Menu containing Profile, Preferences, and Sign Out.

The menu structure provides the interface, while the individual links and actions determine what happens when users make a selection.

Menubar Holder

A Menubar Holder defines the outer region containing a navigation menu.

It provides a structural area for navigation content and controls the menu region's background appearance.

Typical uses include:

Main application headers.
Website navigation bars.
Navigation areas within Header Page Slices.
Headers combining branding, navigation links, and account-related information.
Reusable navigation sections.

Menubar Holder Settings

The following setting is available in Element Settings:

Setting	Purpose
Background Style	Controls the background appearance of the navigation region.

Background Style

Background Style determines the visual treatment of the Menubar Holder.

Available options include:

Option	Description
Default	Uses the default background styling.
Light	Applies a light background treatment.
Dark	Applies a dark background treatment.

Choose a background style that fits the surrounding layout and provides sufficient contrast for menu text, icons, and interactive states.

For example, a dark application header may use Dark, while a white website header may use Light.

The Menubar Holder controls the outer navigation region. Individual menu item settings control properties specific to those items.

Menubar Collapsible

A Menubar Collapsible provides a navigation region that can expand or collapse as part of a responsive menu structure.

It is particularly useful for navigation bars that need to adapt to different screen sizes.

For example, a desktop layout may display navigation items horizontally:

text

Logo    Home    Products    Reports    Account

On a narrow screen, the navigation may instead use a compact menu control:

text

Logo                         ☰

The collapsible content provides the navigation choices when the compact menu is opened.

Working with Collapsible Menus

Menubar Collapsible is commonly included within ready-made Menubar patterns.

When customizing a collapsible menu:

Start with an appropriate responsive menu structure from the Element Library.
Locate the Menubar Collapsible element.
Configure the nested Menubar Items and Menubar Item Links.
Preserve the relationships between the collapsible region and its associated menu controls.
Preview the menu at desktop, tablet, and mobile screen sizes.

The responsive behavior depends on the selected menu structure and its configuration.

Avoid removing structural elements from a ready-made collapsible menu unless you understand their role in the navigation pattern.

Some menu content may be hidden or collapsed in the editor's current view.

For supported elements, the Selected Element Toolbar provides actions such as Toggle View or Toggle Target to access alternate editing views or associated content.

Use these controls when available to work with nested navigation content that is not currently visible.

Menubar

A Menubar contains and organizes a group of Menubar Items.

It controls how the navigation entries are arranged within the available menu area.

Typical uses include:

Main application navigation.
Header navigation.
Footer navigation.
Groups of related destinations.
Account and administration navigation.

Menubar Settings

The following settings are available in Element Settings:

Setting	Purpose
Horizontal Align	Controls the horizontal alignment of menu items for supported screen sizes.
Scrollable Content	Allows menu content to scroll when it exceeds the available area.

Horizontal Align

Horizontal Align determines how Menubar Items are positioned within the Menubar.

Alignment can be configured for supported screen sizes, allowing the same menu to use different arrangements on desktop, tablet, and mobile layouts.

For example:

Screen Size	Example Configuration
Desktop	Align menu items to the right of the navigation area.
Tablet	Center the navigation items.
Mobile	Align items to the start for a compact or expanded mobile menu.

The alignment setting affects the menu group rather than the destination or behavior of individual menu items.

When changing alignment, preview the entire navigation header to ensure that menu items remain positioned correctly relative to logos, buttons, and other content.

Scrollable Content

Scrollable Content allows the menu region to accommodate navigation items that exceed its available space.

This can be useful for:

Navigation bars containing many destinations.
Menus displayed in constrained layout areas.
Responsive layouts where the available width is reduced.
Navigation sections that need to remain usable without expanding the surrounding layout.

Scrollable Content controls overflow behavior. It does not replace the need to organize navigation clearly.

For primary application navigation, consider using a collapsible menu or grouping related destinations when the number of top-level items becomes too large.

For shorter menus, disabling scrolling generally provides a simpler navigation experience.

Menubar Item

A Menubar Item represents an individual entry within a Menubar.

It acts as a container for the entry's visible link, popup menu, or other supported menu content.

A Menubar Item may contain:

A Menubar Item Link for direct navigation.
A Menubar Item Link used as a popup trigger.
A Popup Menu containing additional choices.
Login Info or other supported menu-related content.

Menubar Item Settings

The following settings are available in Element Settings:

Setting	Purpose
Activated Look	Applies an active visual appearance to the menu item.
Contains Popup Menu	Identifies the item as containing a popup menu.
Popup Menu Direction	Controls the direction in which the popup menu opens.

Activated Look

Activated Look gives a Menubar Item an active or selected visual appearance.

It is commonly used to indicate the user's current page or navigation section.

For example, an application might contain:

text

Dashboard    Orders    Reports    Settings
                         ^ Active

When the user is viewing Reports, the Reports menu item can use Activated Look.

Activated Look is a visual setting. Do not assume that manually enabling it automatically tracks the current page or updates other menu items.

If the active state needs to change based on application state or navigation, coordinate the menu appearance with the appropriate page configuration or supported Page Flow behavior.

Use active styling consistently so users can distinguish the current destination from other available choices.

Contains Popup Menu identifies a Menubar Item that provides a popup menu.

Enable this setting when the item should expose several related destinations or actions through a single visible menu entry.

Typical examples include:

Account and profile options.
Administration tools.
Report categories.
Application settings.
Related actions for a particular feature.

For example:

text

Reports ▼
  Sales Reports
  Inventory Reports
  Customer Reports

The parent Menubar Item defines the popup relationship.

The Menubar Item Link provides the visible menu trigger, while the Popup Menu contains the individual choices.

Configure the trigger's behavior and the Popup Menu Items separately.

Popup Menu Direction controls the preferred direction in which a popup menu opens relative to its parent menu item.

Available options include:

Option	Description
Default	Uses the default popup positioning behavior.
Right	Opens the popup toward the right.
Left	Opens the popup toward the left.
Up	Opens the popup upward.

Choose a direction based on the menu's position and available space.

For example:

A menu near the right edge of the page may work better when opening toward the left.
A menu near the bottom of the page may need to open upward.
A typical header dropdown can use the default direction.

Preview popup menus near screen edges and at mobile widths to ensure that their contents remain visible and usable.

Menubar Item Link

A Menubar Item Link provides the clickable navigation or interaction control inside a Menubar Item.

It can be used to:

Navigate to another Project Page.
Open an external website or resource.
Trigger a supported link action.
Act as the visible trigger for a Popup Menu.

A Menubar Item Link is designed for use within a menu structure.

For standalone navigation within ordinary page content, use the Link element described in Buttons and Actions.

Menubar Item Link Settings

The following settings are available in Element Settings:

Setting	Purpose
HRef	Specifies the destination URL or page path.
Target	Determines whether the destination opens in the current tab or a separate tab/window.
Link Action	Configures a supported action associated with the link.
Action Target	Identifies the target used by the configured Link Action.
Popup Menu Icon	Displays an indicator for menu-style interactions.
Split Look	Applies a split-style presentation for supported menu interactions.

HRef

HRef specifies the destination of the menu link.

A destination can be:

A Page URL within the Project.
A full external URL.
Another supported link destination.

For example:

Menu Label	Example HRef
Dashboard	`/dashboard`
Orders	`/orders`
Reports	`/reports`
Documentation	`https://docs.example.com`

The Project page paths above are examples. Use the actual Page URLs configured for your Project.

Page URLs are managed through Page Settings.

When linking between Project Pages, use the intended page path rather than assuming that the Page's display name or internal ID is its published URL.

Target

Target determines where the linked destination opens.

Target	Behavior
Default	Opens the destination in the current browser tab.
Separate Tab/Window	Opens the destination in another browser tab or window, depending on browser behavior.

For normal navigation between Project Pages, use the default target.

A separate tab or window is generally more appropriate for external resources such as documentation, support websites, or third-party tools when users may need to keep the application open.

Link Action and Action Target

Link Action defines a supported interaction for the menu link.

Action Target identifies the element or target associated with that action when required.

These settings can be used for supported menu-style behaviors and other available link interactions.

When configuring a Menubar Item Link:

Determine whether it should navigate directly or perform an action.
Use HRef for ordinary navigation.
Configure Link Action when a supported interaction is required.
Configure Action Target when the selected action requires one.
Verify the resulting behavior in Preview.

For application-specific logic, use Page Flow.

For example, a menu entry that must validate application state, save information, or execute an operation before navigating generally requires more than a direct HRef.

Popup Menu Icon provides a visual indication that a menu entry has popup behavior.

A common example is a downward indicator:

text

Account ▼

This helps users distinguish entries that reveal additional choices from ordinary navigation links.

The icon is a presentation setting. The actual popup structure and behavior must also be configured correctly.

Split Look

Split Look applies a split visual treatment to supported menu-style interactions.

This can help visually distinguish a primary link area from an associated menu interaction.

Use Split Look when the selected menu pattern is intended to provide that presentation.

The appearance alone does not define the complete interaction. Configure the associated link action, popup relationship, and targets as required by the selected pattern.

A Popup Menu groups related destinations or actions under a single menu trigger.

Popup menus help keep navigation compact without requiring every destination to appear as a top-level menu item.

Typical uses include:

Account and profile menus.
Settings menus.
Groups of related pages.
Record action menus.
Secondary application navigation.
Compact action menus within cards or other interface areas.

For example:

text

Account ▼
  My Profile
  Preferences
  ----------------
  Sign Out

A Popup Menu normally contains one or more Popup Menu Items and may include Popup Menu Separators.

Popup menus can be used within supported Menubar structures or as part of standalone popup menu patterns available in the Element Library.

A typical popup menu configuration involves:

Adding a ready-made popup menu pattern or creating the supported nested structure.
Configuring the visible menu trigger.
Adding Popup Menu Items for the required destinations or actions.
Configuring the HRef or supported action for each item.
Adding Popup Menu Separators where useful.
Setting the popup direction through the applicable parent element.
Previewing the interaction.

For a popup contained within a Menubar Item, configure Contains Popup Menu on the parent item.

Keep popup menus focused on related choices. If a popup contains many unrelated destinations, consider separating them into clearer navigation groups.

A Popup Menu Item defines an individual clickable entry inside a Popup Menu.

Each item represents a destination or supported action.

For example:

text

Manage ▼
  View Details
  Edit Record
  Duplicate
  -------------
  Archive

Each selectable entry is configured independently.

The following settings are available in Element Settings:

Setting	Purpose
HRef	Specifies the destination URL or page path.
Target	Determines where the linked destination opens.
Link Action	Configures a supported action behavior.
Action Target	Identifies the target associated with the Link Action.

For direct navigation, configure HRef and the appropriate Target.

For supported actions, configure Link Action and Action Target as required.

For custom application behavior, use Page Flow.

Use concise, descriptive labels that communicate the destination or action.

Examples include:

My Profile
Account Settings
Billing
View Details
Edit
Archive
Sign Out

Avoid vague labels such as Action 1 or More when the specific destination or action can be identified.

Destructive actions should be clearly labeled and should use an appropriate confirmation workflow when necessary.

A Popup Menu Separator provides a visual division between groups of Popup Menu Items.

It does not represent a navigation destination or action.

For example:

text

Account ▼
  Profile
  Preferences
  -------------
  Help Center
  -------------
  Sign Out

Separators make menus easier to scan when they contain distinct groups of options.

Typical uses include separating:

Navigation destinations from account actions.
Routine actions from destructive actions.
Primary options from secondary options.
Different categories of related functionality.

Use separators sparingly. Too many separators can make a menu harder to read rather than clearer.

Login Info displays information associated with the current user's login within a navigation area.

It is useful for application headers and account-related menus where users need to recognize their signed-in identity.

Typical placements include:

The end of a main navigation bar.
An account menu area.
A header section dedicated to the current user.
A navigation region containing profile or account-related options.

For example, an application header may contain:

text

Dashboard    Reports    Settings    [Login Info]

Login Info provides the login-related display element. Other menu elements can be used to provide destinations or actions such as Profile, Account Settings, or Sign Out.

The available login information depends on the Project's authentication context and the element's supported behavior.

Project Users are the people who use the published application. They are different from Creators who collaborate on building the Project through the Project Editor.

When using Login Info in an application that has restricted pages or authenticated functionality, coordinate the surrounding navigation with the Project's user and access configuration.

For example, an application may need different navigation choices for public visitors and authenticated users.

For access configuration, see Page Settings.

Linking to Project Pages and External URLs

Menu items commonly navigate to either Pages within the Project or external resources.

Linking to Project Pages

Use the destination Page's configured URL path in HRef.

For example, a Project may have the following Page URLs:

Page	Page URL	Menu Label
Dashboard	`dashboard`	Dashboard
Orders	`orders`	Orders
Reports	`reports`	Reports
Settings	`settings`	Settings

The corresponding menu links could use /dashboard, /orders, /reports, and /settings.

The Project domain is configured separately from the Page URL.

For example, if the published Project uses:

https://app.example.com

A menu item configured with:

/reports

would navigate to:

https://app.example.com/reports

provided that the Reports Page is published and available at that path.

Use stable destinations and verify links whenever Page URLs are changed.

Linking to External URLs

Use a complete URL when the destination is outside the Project.

For example:

https://docs.example.com

Consider configuring Target to open external resources in a separate tab/window when users should be able to return easily to the application.

Use labels that describe destinations from the application user's perspective.

Good examples include:

Dashboard
Customers
Orders
Reports
Account Settings
Help Center

Avoid exposing internal development terminology unless it is meaningful to the application's users.

For example, a published application should generally use Customers rather than an internal database table name such as tblCustomers.

Menus and Page Flow

Menu Elements define navigation controls and their visible presentation.

Page Flow provides browser-side application logic when an interaction requires behavior beyond ordinary navigation.

Use a direct link when selecting a menu item should simply open another destination.

Use Page Flow when navigation depends on application logic.

Examples include:

Checking application state before navigating.
Saving pending changes before leaving a page.
Opening a Form in a modal.
Retrieving or refreshing data.
Displaying a confirmation message.
Selecting a destination dynamically.
Performing a supported operation before continuing.

Requirement	Recommended Approach
Open another Project Page	HRef on a menu link.
Open an external website	HRef and Target.
Open a related destination from a Popup Menu	Popup Menu Item with HRef.
Trigger a supported built-in interaction	Link Action and Action Target, as applicable.
Validate state before navigating	Page Flow.
Save data before navigation	Page Flow.
Open a Form in a modal	Supported action configuration or Page Flow.
Execute a custom workflow	Page Flow.

Consider an application with an Edit Customer page and a menu item that returns users to the customer list.

If navigation should occur immediately, a direct link may be sufficient.

However, if the application must save pending changes before leaving:

The user selects the navigation control.
Page Flow handles the interaction.
The application validates and saves the required data.
The workflow checks whether the operation succeeded.
On success, the user is navigated to the destination.
On failure, the application can display an appropriate message instead of continuing.

The visible menu element provides the control, while Page Flow coordinates the application behavior.

Keep simple navigation as direct links. Use Page Flow when the interaction genuinely requires additional logic.

For more information, see Page Flow.

Navigation menus should remain usable across desktop, tablet, and mobile screen sizes.

A menu that works well on a wide desktop header may become crowded or difficult to use on a narrow screen.

ioLoop provides navigation elements and responsive configuration options to support different layouts.

Key considerations include:

Feature	Responsive Consideration
Menubar Collapsible	Provides a compact navigation pattern for smaller screens.
Horizontal Align	Allows supported alignment settings to vary by screen size.
Scrollable Content	Helps accommodate overflowing navigation items.
Popup Menu Direction	Helps position popup content within the available screen area.
Menu Item Labels	Short labels reduce crowding and improve readability.

Desktop layouts can typically display more top-level navigation items.

For example:

text

Logo    Dashboard    Customers    Orders    Reports    Account ▼

Use consistent spacing and alignment so the navigation is easy to scan.

On smaller screens, a collapsible navigation pattern is often more appropriate.

For example:

text

Logo                                   ☰

The expanded mobile menu can present destinations in a more compact arrangement.

When designing mobile navigation:

Keep important destinations easy to find.
Avoid excessively deep popup menu hierarchies.
Ensure labels remain readable.
Verify that popup menus do not extend outside the visible area.
Check that menu controls are practical to tap.
Test the expanded and collapsed states.

Responsive appearance and interaction should be verified in Preview rather than inferred from the desktop editor layout alone.

For Structured Pages, navigation menus are often placed in a shared Header Page Slice.

This allows multiple Structured Pages to use the same navigation header without independently maintaining copies of the menu.

For example, a Project may have:

text

Home
Products
Services
Contact

Each Structured Page can reference a common Header Page Slice containing the main navigation.

When a new menu destination is added or an existing label is changed in that shared slice, the update is reflected wherever the same Page Slice is used after publication.

This makes it easier to maintain consistent navigation across the Project.

When using navigation within a shared Page Slice:

Use destinations that work correctly from every Page using the slice.
Consider root-relative paths for internal navigation.
Verify that popup and responsive menu behavior works on each relevant Page.
Review Page Flow interactions that depend on the current Page or its state.
Be aware that changing the shared menu affects every Structured Page that references the slice.

Shared navigation content does not mean that the Pages themselves share identical Page Settings.

For example, two Structured Pages may use the same header while having different URLs and access restrictions.

For more information, see Editing Structured Pages.

Navigation and access control serve different purposes.

Navigation determines which destinations and actions are presented to users. Access control determines what users are authorized to open or perform.

For example, an application may contain:

text

Public Navigation
  Home
  Products
  Contact

Authenticated Navigation
  Dashboard
  My Orders
  Account

Administration Navigation
  User Management
  Reports
  Settings

These are examples of navigation arrangements, not automatically enforced access configurations.

Pages intended only for authenticated users or particular User Groups must have appropriate access restrictions.

Page Access

Page access restrictions are configured through Page Settings.

These settings control whether a Page is public or restricted to the appropriate Project Users or User Groups.

Hiding a menu item does not prevent someone from attempting to access its destination directly.

Backend Authorization

Page-level access restrictions do not automatically secure every Database operation, Cloud Flow function, or other Backend capability used by the Page.

For protected functionality:

Configure the appropriate Page access restrictions.
Apply Database access rules where required.
Enforce sensitive authorization checks through trusted Backend operations such as Cloud Flow.
Do not rely exclusively on hidden menu items or browser-side Page Flow logic to protect restricted data.

Page Flow runs in the browser and can coordinate user-interface behavior, but it should not be the sole enforcement mechanism for sensitive permissions.

For more information, see Page Settings and Cloud Flow.

Choose an element based on whether the interface requires a navigation structure, a direct link, or an application action.

Requirement	Recommended Element
Main application header	Menubar Holder with a Menubar.
Responsive header navigation	Menubar Collapsible within a supported Menubar structure.
Group of top-level navigation choices	Menubar.
Individual entry within a Menubar	Menubar Item.
Clickable navigation entry	Menubar Item Link.
Several destinations under one menu trigger	Popup Menu.
Individual destination inside a Popup Menu	Popup Menu Item.
Visual grouping inside a Popup Menu	Popup Menu Separator.
Display current-user login information	Login Info.
Standalone text link within page content	Link.
Prominent navigation control	Link Button.
Action that starts a workflow	Button with the appropriate action or Page Flow.
Navigation requiring custom logic	Supported menu control coordinated with Page Flow.

Using the appropriate element helps keep navigation consistent and avoids unnecessary complexity.

Good Practices

Use clear labels. Name menu items according to the destinations or actions users recognize.
Keep primary navigation focused. Place the most important destinations at the top level and group secondary choices where appropriate.
Use direct links for ordinary navigation. Avoid unnecessary Page Flow logic when HRef is sufficient.
Group related popup items. Keep each popup focused on a recognizable category of destinations or actions.
Use separators meaningfully. Separate distinct groups without cluttering menus.
Maintain consistent active states. Ensure that active styling accurately represents the current navigation context.
Design for smaller screens. Use collapsible navigation patterns and suitable alignment or scrolling behavior when needed.
Reuse shared headers where appropriate. Place common navigation in shared Header Page Slices for Structured Pages.
Keep links current. Review navigation references whenever Page URLs are renamed or changed.
Coordinate navigation with access settings. Present appropriate destinations while enforcing restrictions through the correct security mechanisms.
Test interactions in Preview. Verify navigation, popup menus, responsive behavior, and associated Page Flow logic.

Common Mistakes

Avoid these patterns:

Too many top-level items. An overloaded navigation bar becomes difficult to scan, especially on smaller screens.
Unrelated popup choices. Grouping unrelated destinations makes navigation less predictable.
Incorrect nested structure. Removing or rearranging structural menu elements without understanding their relationships can affect popup or collapsible behavior.
Placeholder HRef values. Leaving destinations such as # in published navigation can produce confusing interactions.
Incorrect active states. Marking unrelated menu items as active makes it difficult for users to identify their current location.
Conflicting link and action behavior. Configuring a direct destination alongside an intended menu interaction without verifying how the selected pattern handles both.
Unnecessary Page Flow logic. Using custom browser-side logic for ordinary navigation creates avoidable maintenance dependencies.
Missing mobile testing. A menu that looks correct on desktop may become crowded or difficult to operate on mobile.
Broken shared navigation. Changing a menu inside a shared Page Slice without checking other Structured Pages that use it.
Treating hidden navigation as security. Removing a menu entry does not secure its destination or the Backend operations behind it.
Ignoring changes to Page URLs. Updating Page URLs without reviewing menu links can leave broken navigation in the published application.

Menus and Navigation are most effective when they provide a clear and predictable way for users to understand where they are, where they can go, and which related actions are available.

Page Editor

Page Elements

Widgets

Data Design

Forms

Page Flow

Menus and Navigation ​

Available Menu and Navigation Elements ​

Understanding Menu Structure ​

Selecting Elements Within a Menu ​

Creating a Navigation Menu ​

Menubar Holder ​

Menubar Holder Settings ​

Background Style ​

Menubar Collapsible ​

Working with Collapsible Menus ​

Editing Collapsed Menu Content ​

Menubar ​

Menubar Settings ​

Horizontal Align ​

Scrollable Content ​

Menubar Item ​

Menubar Item Settings ​

Activated Look ​

Contains Popup Menu ​

Popup Menu Direction ​

Menubar Item Link ​

Menubar Item Link Settings ​

HRef ​

Target ​

Link Action and Action Target ​

Popup Menu Icon ​

Split Look ​

Popup Menus ​

Creating a Popup Menu ​

Popup Menu Item ​

Popup Menu Item Settings ​

Configuring Popup Menu Items ​

Popup Menu Separator ​

Login Info ​

Login Info and Project Users ​

Linking to Project Pages and External URLs ​

Linking to Project Pages ​

Linking to External URLs ​

Navigation Labels ​

Menus and Page Flow ​

Direct Navigation vs. Page Flow ​

Example: Navigation After Saving Data ​

Responsive Navigation ​

Desktop Navigation ​

Mobile Navigation ​

Reusing Navigation with Page Slices ​

Considerations for Shared Navigation ​

Navigation and Access Control ​

Page Access ​

Backend Authorization ​

Choosing the Right Navigation Element ​

Good Practices ​

Common Mistakes ​

Related Topics ​

Available Menu and Navigation Elements

Understanding Menu Structure

Selecting Elements Within a Menu

Creating a Navigation Menu

Menubar Holder

Menubar Holder Settings

Background Style

Menubar Collapsible

Working with Collapsible Menus

Editing Collapsed Menu Content

Menubar

Menubar Settings

Horizontal Align

Scrollable Content

Menubar Item

Menubar Item Settings

Activated Look

Contains Popup Menu

Popup Menu Direction

Menubar Item Link

Menubar Item Link Settings

HRef

Target

Link Action and Action Target

Popup Menu Icon

Split Look

Popup Menus

Creating a Popup Menu

Popup Menu Item

Popup Menu Item Settings

Configuring Popup Menu Items

Popup Menu Separator

Login Info

Login Info and Project Users

Linking to Project Pages and External URLs

Linking to Project Pages

Linking to External URLs

Navigation Labels

Menus and Page Flow

Direct Navigation vs. Page Flow

Example: Navigation After Saving Data

Responsive Navigation

Desktop Navigation

Mobile Navigation

Reusing Navigation with Page Slices

Considerations for Shared Navigation

Navigation and Access Control

Page Access

Backend Authorization

Choosing the Right Navigation Element

Good Practices

Common Mistakes

Related Topics