.png?fit=max&auto=format&n=EQK5eX9kTD8NzWwA&q=85&s=878008bf159fcc4964d0c0d508b6e400)
The navigation menu element
The Navigation Menu element is available in the builder’s elements panel under the Interactive category. You can drag it onto any section of any page. For site-wide navigation, place it inside a global section so it appears and updates consistently across all pages.Adding a navigation menu
Open the page in the builder
Navigate to Sites > Websites, open your website, and click Edit Page on the page where you want to add navigation (typically the home page or a global header section).
Drag the navigation menu element
In the left panel, click Add Elements, scroll to the Interactive section, and drag the Navigation Menu element onto a section at the top of the page.
Configure navigation items
Click the navigation element to open its settings. Click Add Item to add navigation links. For each item, specify:
- Label: The text displayed in the menu (for example, “About” or “Services”)
- Link: The destination URL — use root-relative paths for internal pages (for example,
/aboutor/services) or full URLs for external links - Open in new tab: Toggle on for external links you want to open in a new browser tab
Add dropdowns (optional)
Some navigation elements support dropdown sub-menus. Click a parent item and add child items beneath it to create a nested dropdown.
Using global sections for site-wide navigation
The most efficient way to manage navigation across a multi-page site is to place the navigation menu inside a global section. A global section is a shared section that, when edited, updates automatically on every page that uses it.Build the header section
On any page, build the header layout — logo on the left, navigation menu on the right, for example.
Save as a global section
Click the green section bar to select the entire section. Click the Save icon that appears in the section toolbar. Choose Save as Global Section and give it a name like “Site Header.”
Add to all pages
On each page of the website, click Add Elements, go to Saved Sections, and drag the “Site Header” global section to the top of the page.
Internal linking
Internal links connect pages within the same website. They help visitors navigate and help search engines understand your site structure. Use root-relative paths for internal links throughout the builder:| Page | Internal link path |
|---|---|
| Home | / |
| About | /about |
| Services | /services |
| Blog | /blog |
| Contact | /contact |
- Select the element in the builder.
- In the element settings, find the Link or URL field.
- Enter the root-relative path (for example,
/services).
Breadcrumbs
For websites with many pages organized into categories, breadcrumbs help visitors understand where they are. You can create breadcrumb navigation using text elements with internal links or by using a custom code element with structured data markup.Mobile navigation
By default, the navigation menu collapses into a hamburger menu on mobile devices. The breakpoint and hamburger icon appearance can be adjusted in the navigation element’s mobile settings. Always preview your site in mobile view (using the desktop/mobile toggle in the builder toolbar) to verify that navigation is easy to use on small screens.Active page highlighting
Most navigation menu configurations support highlighting the currently active page link. This gives visitors a visual indicator of which page they are on. Enable this in the navigation element’s settings and choose the highlight color or style.When you add a new page to the website, you must also manually add a link to that page in the navigation menu. HoopAI does not automatically update navigation menus when new pages are added.