Pages 2.0 | Edit a Page Group’s Navigation

This article explains what page group navigation is and how you can customize its appearance and features.

Pages 2.0 refers to the new version of Happeo Pages, released on April 2, 2025. All Happeo accounts created from this date onward use the new page editor by default.

What is page group navigation?

Page group navigation is a customizable set of elements that helps users move through the pages within a page group in Happeo.

This navigation bar's appearance, including color and placement, can be adjusted. Additionally, it can include features like a subpage list, a page outline, and breadcrumbs to enhance user orientation and ease of movement within the page group.

How to edit a page group’s navigation

To edit a page group’s navigation:

1. Click the Pages menu from Happeo’s main navigation.
2. Navigate to a page group.
3. Click the edit icon at the top-right.
4. Go to Navigation.

Configure

The Configure tab allows you to set up the layout and display of the navigation, such as the position of the navigation bar, subpage lists, page outline, breadcrumbs, and header image.

• Navigation type – Choose between Above header or Below header to determine the placement of the navigation bar relative to the header image.
• Show list of subpages– Toggle this option to show a sidebar containing subpages of the currently viewed page. If a page does not have subpages, this list will not be displayed.
• Show page outline– Enable this option to display an outline of your page, organized by section headers on each page. When this option is enabled, users viewing the page can find a collapsed page outline at the top right corner of the page that can be expanded and interacted with.
• Show breadcrumbs – Enable this option to display a trail of links at the top of the page, indicating the user's current location within the page hierarchy. This allows users to easily navigate back to parent pages or higher-level sections within the page group.
• Show header – Toggle this option to show or hide the header image at the top of each page.

Note: The list of subpages and page outline will not be visible when viewing the page in the page editor. You can click Preview to see what this list looks like.

Style

The Style tab enables you to customize the visual appearance of the navigation, including colors for active items and backgrounds, item alignment, and spacing.

• Active item color: This is the color for the currently selected item in your navigation menu, indicating which page the user is viewing.
• Alternative active color: Toggle this option on to set a secondary active color. This is useful for ensuring your active navigation state is always visible, regardless of the background color it appears on - For example, if your primary active color is a light blue, but you have a section of your site with a very light background, that light blue might be hard to see. By setting an alternative active color (e.g., a dark blue), the system can automatically switch to the more visible color for those light backgrounds.
• Primary navigation background color: Choose the background color for the main navigation bar that appears across all pages in your page group.
• Primary navigation alignment: This controls how your navigation items are positioned within the navigation bar. You can set them to align to the Left, Center, Right, or Fill - Fill means the navigation items will expand to evenly distribute themselves across the entire width of the navigation bar, taking up all available space.
• Primary navigation spacing: Adjust the amount of space between individual items in your navigation menu. You can use the slider (0-32px) or manually input the spacing value in the input field.
• Dark active color: Enable this option when your chosen "Active Item Color" is light. This ensures that if the active item appears on a light background, a darker, more readable color will be used instead.