Menu element

The Menu element is a container for navigation links. Unlike individual Link elements, the Menu element groups multiple items together, handling alignment, spacing, and layout (horizontal vs. vertical) automatically. It is essential for headers, footers, and sidebars.

This page covers how to create structured navigation bars or sidebars to help users move through your application.

Overview

The Menu element helps users move through different parts of your application smoothly. It creates an organized structure that makes navigation intuitive and efficient.

  • Structure: Organizes multiple navigation items in a list.
  • Orientation: Can be displayed Horizontally (Top Bar) or Vertically (Sidebar).
  • Items: Each item can link to an internal page or external URL.
  • Styling: Visual properties for Buttons and Links are managed via Theme Overrides.

Add a menu

  1. Open the Elements panel (click the + icon).
  2. Select Menu.
  3. Drag and drop the element onto your canvas (typically into a Column or Header/Footer container).

Configuration

Click the menu element to open the General properties tab.

1. Menu Items

This is where you define the links, buttons, separators, or spacers.

  • Add Item: Click + Add menu item to create a new link.
  • Label: Enter the text displayed to the user (e.g., “Home”, “Profile”, “Log Out”).
  • Destination: Configure the link target:
    • Page: Select an internal application page (and map parameters if needed).
    • Custom URL: Enter an external web address.
  • Variant: Choose if this specific item should look like a Link (text) or a Button (boxed).

Tip: You can drag and drop items in the list to reorder them.

2. Orientation

Define the layout flow of the menu.

  • Horizontal: Items are placed side-by-side. Best for top navigation bars.
  • Vertical: Items are stacked on top of each other. Best for sidebars or mobile drawers.

3. Alignment

Control how the items sit within the container.

  • Left/Start: Items group to the left.
  • Center: Items group in the middle.
  • Right/End: Items group to the right.

Styling and Theme Overrides

To customize fonts, colors, and spacing, use Theme Overrides.

  1. In the General tab, click the Style/Settings icon (slider icon) next to the configuration fields.
  2. This opens the Menu Styling modal.
  3. You will see two specific tabs for customizing the different item variants:

Customize items set to the Link variant.

  • Typography: Font, size, and weight for text links.
  • States: Define colors for Default, Hover, and Active (current page) states.

The “Button” Tab

Customize items set to the Button variant.

  • Background & Border: Define the shape and color of the button box.
  • Typography: Style the text inside the button.
  • States: distinct styles for Hover and Active states.

Why two tabs? This allows you to mix styles in a single menu. For example, you can have “Home” and “About” look like simple Links, while “Sign Up” looks like a prominent Button.

Frequently asked questions (FAQ)

How do I indicate the current page?

The Menu element automatically detects the active page based on the URL. You can style this “Active State” in the Theme Overrides menu (e.g., making the current link bold or blue) so users know where they are.

Can I create a dropdown menu?

Currently, the Menu element supports a single level of links. To create a dropdown, you may need to use a container with visibility logic or check for updates to the Menu component.

Does the menu collapse on mobile?

The Menu element itself simply lists items. For a responsive mobile experience (like a hamburger menu), you typically place the Menu element inside a container that is hidden on Desktop and visible on Mobile (using Visibility settings).

Related content

Still need help? If you’re looking for something else, please feel free to make recommendations or ask us questions; we’re ready to assist you.