Menu

Menu

In a nutshell

The Menu element renders a repeating list of navigation links on a portal page. You configure the menu list entries, control their order and visibility, and style the menu items across Default, Hover, and Active states.

1. Overview

The Menu element is a composite navigation bar that renders one repeating menu item template for every visible entry in the menu's listing. It displays them either in a horizontal row or a vertical column, making it suitable for both top navigation bars and sidebar navigation panels.

Clicking a menu item navigates the portal user to that entry's pre-configured URL. This navigation is built into the element and does not require a separate mapping or Deluge action. Each menu item exists in one of the below three interaction states at any given time.

  1. Default - The item is visible but neither focused nor selected
  2. Hover - The item is highlighted as the user moves their pointer over it
  3. Active - The item is visually distinguished to indicate that its URL matches the page the portal user is currently on.

All three states are independently styleable from the Style pane, giving full control over how the menu element communicates selection and interaction to portal users.


NotesInfo: Header is a preset variation of the Menu element that comes pre-styled as a top navigation bar. It uses the same Menu element underneath and exposes the same configuration options.

Ideal for:

  1. Navigation bars where a persistent menu is needed for cross-navigation across multiple pages.

2. Display properties

Property Description
Element Name The internal identifier for this Menu element. This name is auto-generated on placing within the designer and can be customized as required.
Menu List entries The list of navigational portal pages displayed in the Menu. This section has a set of manage actions for the menu items:
  1. Reordering tab items - A specific menu item can be dragged vertically to change the tab sequence using the reorder icon ().
  2. Visibility - You can show or hide the menu item from the live portal page using the eye icon ().

3. Styling properties

The Menu element has two independently styleable layers:

  1. Container*link*
  2. Menu item*link*

You can select each layer separately in the designer to style it.

Container styling:
  1. Stack styling *link*
  2. Alignment *link*
  3. Layout *link*
  4. Background *link*
  5. Padding *link*
  6. Margin *link*
  7. Corner Radius *link*
  8. Border *link*
  9. Shadow *link*
  10. Opacity *link*

The container also exposes one property unique to this layer:

Property Description
Spacing Controls the spacing between consecutive menu items within the menu. The property accepts named spacing presets or a custom px value.

Menu items are the individual selectable labels within the Menu element. Each menu item can be styled across three interaction states, Default, Hover, and Active. These are accessible through the interactive state tabs at the top of the Menu Item section in the Style pane. The same set of properties is available for all three states, allowing each to have a fully distinct appearance.


The state-wise styling applies consistently to all menu items in the component. Therefore, individual tab items cannot be styled differently from one another.
  1. Font *link*
  2. Background *link*
  3. Padding *link*
  4. Margin *link*
  5. Corner radius *link*
  6. Border *link*
  7. Shadow *link*
  8. Opacity *link*

4. Try it yourself

Add a Menu element and try the following:

  1. Set Stack Type to H-Stack and place the Menu inside an H-Stack with a Hero element. Set Align components on the outer H-Stack to Edge to Edge to push the logo to the left and the navigation links to the right.
  2. Style the Default state with a muted text color, the Hover state with a slightly lighter background, and the Active state with a distinct background and text color so the current page is immediately identifiable.
  3. Switch Stack Type to V-Stack and set the Menu width to a fixed px value to build a sidebar navigation panel.
  1. Configuring and managing portal pages *link*