Creating sub-menus for page sections allows you to organize and structure your sections effectively. This feature ensures that your section menus are visually appealing, easy to navigate, and accessible to all users. In this guide, you will learn how to create sub-menus, control menu item hierarchy, and understand the behavior of vertical and horizontal section menus.

To ensure good design and accessibility, menus are structured with a maximum of three hierarchical levels.

The top level pages in a section are the parent items. They can have up to two levels of sub items.

Parent items: These are the top-level pages in the section.

Sub-menu item 1: These are nested within the parent items.

Sub-menu item 2: These are nested within secondary menu items (or sub-menu item 1).

Change the order of items by dragging and dropping using the six dots icon to the left.

To move pages in or out of submenus, you may also use the drag-and-drop feature. Click and hold the six dots icon of the page or sub-item, then move it to the desired location within your Pages structure.

Keep an eye on the blue line that appears as it serves as a helpful guide, indicating the exact placement of the page.

When moving pages you’ll see a gray background highlighting the submenu your page will be added to if it is dropped there.

Hierarchical changes can also be made from the action menu (or three dots on the right) by selecting “Make parent item” or “Make sub item”.

Representations of the section menu in the page editor won't display sub items outside the current page's submenu. Pages that have sub items are indicated by a plus icon.

In the page editor, only the parent items are shown in horizontal section menus. Pages that have sub items are indicated by a down-chevron icon.

The current page that you are viewing will be automatically highlighted within the section menu.

This helps you quickly identify your current location within the menu and navigate effectively.

When you’re viewing a page that is a sub item within a horizontal menu, the parent item associated with that sub item will be highlighted.

When you’re viewing a page that is a sub item within a vertical menu, the parent item is expanded to reveal its sub-menu items, and the sub item corresponding to the page you’re viewing is highlighted.

Interaction plus and minus icons in vertical section menus ➕➖

On vertical section menus, pages with sub items have a ➕(plus) icon you can use to expand the submenu. Expanded menus have a ➖ (minus) icon you can use to collapse the submenu, making navigation more intuitive and efficient.

Chevron icon indicators in horizontal section menus

On horizontal section menus, pages with sub items display dropdown icons to help you quickly find the menus. To access and view the sub items, simply hover your cursor over the parent item or its

icon . This reveals the sub items in a dropdown menu, allowing you to explore and navigate through the submenu.

Visual hierarchy

When you open a submenu by hovering over the parent item, you’ll notice that the submenus within the menu are displayed indented and with a smaller text size. This helps maintain a clear visual hierarchy of the pages within the dropdown.

Expanding and Collapsing

Simply hover over or hover out of the menu to expand and view, or collapse the submenu.

Both horizontal and vertical menus can be navigated seamlessly using keyboard controls. This ensures that all users, including those who rely on assistive technologies, can easily explore and interact with the sub menus.