# Using Navigation

This guide is for editors who build site menus and owners deciding how menus are structured. Every step uses the labels you see on screen.

## Using Navigation (editor how-to)

### How to build a menu

1. Go to **Navigation**.
2. Create a new menu and give it a name.
3. Choose a **Key**. Use **Main**, **Footer**, or **Sub-footer** when your theme renders that built-in menu location. A key can be used once for the same site and language.
4. Choose the site and, when needed, the language for this menu.
5. Add links to your pages, or add an **External link** to another site.
6. Save the menu.

<span class="theme-aware-image">
  <img class="theme-aware-image__light" src="/packages/navigation/screenshots/navigation-admin-index.png" alt="An editor reviews site navigation records and their scope and status." loading="lazy" />
  <img class="theme-aware-image__dark" src="/packages/navigation/screenshots/navigation-admin-index-dark.png" alt="An editor reviews site navigation records and their scope and status." loading="lazy" />
</span>

### How to reorder and nest links

1. Open the menu in the editor.
2. Drag a link up or down to change its order.
3. Drag a link underneath another to nest it. Nested links become a dropdown.
4. Save the menu.

### How to make a dropdown or mega menu

1. Nest links under a parent item.
2. On the parent item, choose how its children open: **Standard dropdown** or **Mega menu**.
3. Save the menu.

### How to make a menu appear in a theme location

1. Check which menu key the theme renders. The built-in keys are **Main**, **Footer**, and **Sub-footer**.
2. Open or create the menu for that site and language.
3. Set its **Key** to the matching value and save.
4. Preview the public page. The theme decides where that key appears; there is no separate Header or Footer assignment control.

### How to manage menus from a site

1. Open the site you are working on.
2. Use the navigations area on the site to add or edit the menus that belong to it.
3. Save. This keeps each site's menus together in one place.

<span class="theme-aware-image">
  <img class="theme-aware-image__light" src="/packages/navigation/screenshots/site-relation-manager-for-navigations.png" alt="An editor manages navigations directly from the site edit screen." loading="lazy" />
  <img class="theme-aware-image__dark" src="/packages/navigation/screenshots/site-relation-manager-for-navigations-dark.png" alt="An editor manages navigations directly from the site edit screen." loading="lazy" />
</span>

### How to set page-level navigation options

1. Open the page you want to control.
2. Go to its navigation tab.
3. Set how that page behaves in menus, then save.

<span class="theme-aware-image">
  <img class="theme-aware-image__light" src="/packages/navigation/screenshots/page-form-navigation-tab.png" alt="An editor controls page-level navigation options from the page form." loading="lazy" />
  <img class="theme-aware-image__dark" src="/packages/navigation/screenshots/page-form-navigation-tab-dark.png" alt="An editor controls page-level navigation options from the page form." loading="lazy" />
</span>

## Rolling out Navigation (for owners)

### Turn on first

- **A header menu with your main pages.** Get the primary navigation right before adding footer menus or dropdowns.

### Add when needed

| Need                                   | Enable                                 |
| -------------------------------------- | -------------------------------------- |
| Group related pages under one heading  | Nested links (a **Standard dropdown**) |
| A large menu with sections and columns | A **Mega menu**                        |
| Links at the bottom of every page      | A **Footer navigation** menu           |

### Don't enable yet

- Avoid mega menus until you have enough pages to fill them. A simple dropdown is clearer for small sites.

### Who does what

| Role       | First useful screen                                                  |
| ---------- | -------------------------------------------------------------------- |
| Editor     | The menu editor: add, nest, and reorder links                        |
| Site owner | **Navigations**: review each menu's site, language, and rendered key |

## Troubleshooting for editors

| What you see                         | What it means                                                                                   | What to do                                                                                                    |
| ------------------------------------ | ----------------------------------------------------------------------------------------------- | ------------------------------------------------------------------------------------------------------------- |
| A new menu isn't showing on the site | Its key is not one the theme renders, or the menu is not eligible for the current site/language | Match the menu **Key** to the theme's rendered key, check the site and language, then preview the public page |
| A link goes to the wrong place       | The page reference or external URL is wrong                                                     | Open the link and fix its target                                                                              |
| A dropdown isn't opening             | Its child links aren't nested, or the layout isn't set                                          | Nest the links under the parent and set **Standard dropdown** or **Mega menu**                                |
| A menu item points to a deleted page | The page it linked to no longer exists                                                          | Remove or repoint the link, then save                                                                         |