> ## Documentation Index
> Fetch the complete documentation index at: https://help.hoopai.com/llms.txt
> Use this file to discover all available pages before exploring further.

# Multi-page navigation

> Build website navigation menus, internal links, and page structures for multi-page websites in HoopAI.

Navigation is what turns a collection of pages into a coherent website. HoopAI provides a Navigation Menu element that you can place anywhere on a page — typically in the header — along with global sections that keep the navigation consistent across every page on the site.

## 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

<Steps>
  <Step title="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).
  </Step>

  <Step title="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.
  </Step>

  <Step title="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, `/about` or `/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
  </Step>

  <Step title="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.
  </Step>

  <Step title="Style the navigation">
    Use the element's styling settings to adjust font, color, padding, mobile behavior, and active link highlighting.
  </Step>
</Steps>

## 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.

<Steps>
  <Step title="Build the header section">
    On any page, build the header layout — logo on the left, navigation menu on the right, for example.
  </Step>

  <Step title="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."
  </Step>

  <Step title="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.
  </Step>

  <Step title="Update site-wide from one place">
    Whenever you need to change the navigation — adding a new page link, updating the logo, or adjusting styling — edit the section on any page and click **Update Global Section**. The change propagates to every page automatically.
  </Step>
</Steps>

## 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`         |

To add an internal link to a button, text, or image:

1. Select the element in the builder.
2. In the element settings, find the **Link** or **URL** field.
3. 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.

<Tip>
  Keep your main navigation menu to five or six items maximum. If you have more pages, group related pages under dropdown categories or create a secondary navigation for less important pages like legal documents and privacy policies.
</Tip>

## Mega navigation menu

A mega menu is an expanded dropdown that displays multiple columns of links, categories, and even images — ideal for websites with many pages or product categories.

### Building a mega menu

1. Add a **Navigation Menu** element to your header section.
2. Click a parent navigation item and enable **Mega Menu** in its settings.
3. Configure the mega menu layout with columns. Each column can contain:
   * A group heading (e.g., "Services", "Resources", "Company")
   * A list of child links beneath the heading
   * An optional image or icon for visual emphasis
4. Style the mega menu dropdown width, background color, padding, and column spacing.

### Prebuilt mega menu headers

The builder includes prebuilt header templates with mega menus already configured:

1. Click **Add Elements** in the left panel.
2. Browse the **Headers** section under element templates.
3. Look for headers labeled with "Mega Menu" or multi-column navigation.
4. Drag the prebuilt header onto your page and customize the links, colors, and content.

Using a prebuilt mega menu header saves significant setup time compared to building one from scratch.

### Category navigation

For websites with many content categories (e-commerce, directories, knowledge bases), use category-based navigation:

* Group pages by category in the mega menu columns (e.g., "Men's Clothing", "Women's Clothing", "Accessories")
* Add a "View All" link at the bottom of each column to link to the full category page
* Use icons or thumbnails next to category names for visual scanning
* On mobile, category navigation collapses into an accordion-style dropdown within the hamburger menu

<Tip>
  Limit mega menus to a maximum of four columns and twenty total links. Menus with too many options create decision paralysis — group related pages under clear category headings to keep navigation scannable.
</Tip>

<Note>
  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.
</Note>