---
title: "How to build a custom navigation menu"
description: "Build a navigation menu above the map with links, modals, other maps, and portal shortcuts. Items appear to viewers in list order."
sidebar:
  label: "Build a navigation menu"
---

A custom navigation menu appears above the map with up to seven link types: external URL, email, modal, terms modal, other maps, the map portal, or the data portal. Open the map's `Configuration` page, go to `Layout & navigation`, turn on `Use navigation`, and add items to the list; every change saves at once, and items appear to viewers in the order of the list.

## Before you start

- You need edit access to the map.
- Decide what each menu item should do. The type table below shows the seven options. You can edit or delete an item later.
- For `Maps` items, you'll pick from the maps that already exist in your account. For `Map portal` and `Data portal` items, the link is auto-generated from the account's portal URL.

## Open the map's `Configuration` page

Open the map you want to configure, and click `Configuration` in the sidebar. In the page's side nav, click `Layout & navigation`.

## Turn on `Use navigation`

Turn on the `Use navigation` switch. The `Navigation Items` list and the `Add item` button appear below it.

<img src="/_assets/map-settings/build-custom-navigation-menu--items.png" alt="Layout & navigation section of the Configuration page with Display title block and Use navigation switched on, and the Navigation Items list with an Add item button and one Map portal item" width="1600" height="960" />

## Add a navigation item

{/* video-content: id=build-custom-navigation-menu
Start: Fully loaded Map settings at the top of Map details, with the settings navigation visible.

Show:

1. Click Layout & navigation and reveal the navigation settings.
2. Focus and click Add item to open the Add Navigation Item dialog.
3. Type "Natural Earth data" in Item Label.
4. Select "Link" as Navigation Type.
5. Type "https://www.naturalearthdata.com" in URL.
6. Check Open in new tab.
7. Turn Enable this navigation item off and back on so it ends enabled.

End: The completed Add Navigation Item dialog remains open for review; do not submit it.

Exclude: Authentication, loading screens, fixture setup, unrelated settings,

submitting the item, or changing the saved map configuration.

*/}
{/* walkthrough: id=build-custom-navigation-menu */}
<video
  src="/_assets/walkthroughs/build-custom-navigation-menu.webm"
  controls muted playsInline width="960">
  <track kind="captions" src="/_assets/walkthroughs/build-custom-navigation-menu.vtt" srclang="en" default />
</video>

{/* /walkthrough */}
Click `Add item`. In the `Add Navigation Item` dialog:

1. In `Item Label`, type the text viewers see in the menu.
2. In `Navigation Type`, choose one of the seven types (table below). The `Configuration` fields change to the ones that type needs.
3. Fill in the `Configuration` fields.
4. Leave `Enable this navigation item` on to show the item to viewers, or turn it off to keep the item hidden for now.
5. Click `Add Item`. The item appears at the end of the `Navigation Items` list.

<img src="/_assets/map-settings/build-custom-navigation-menu--add-item.png" alt="Add Navigation Item dialog with Item Label Natural Earth data, Navigation Type Link, a URL field, and the Open in new tab and Enable this navigation item switches on" width="1600" height="960" />

### Item types

| Type           | Use for                                                   | What you configure                                  |
| -------------- | --------------------------------------------------------- | --------------------------------------------------- |
| `Link`         | An external website                                       | URL, `Open in new tab` toggle                       |
| `Email Link`   | A pre-filled email                                        | Email address, subject, body                        |
| `Modal`        | A custom dialog with rich text                            | Modal title, modal content (rich text editor)       |
| `Terms Modal`  | A terms-of-service or legal-notice dialog                 | Terms version, terms content (rich text editor)     |
| `Maps`         | Links to one or more other maps in your account           | Pick maps from a multi-select                       |
| `Map portal`   | A link to your account's public map portal                | None — auto-generated                               |
| `Data portal`  | A link to your account's public data portal               | None — auto-generated                               |

## Edit, reorder, enable, or delete items

Each row in the `Navigation Items` list (in the first image on this page) has these controls:

- **Drag handle** (the dots on the left) — drag the row to a new position. Viewers see the items in the list order.
- **Switch** — turn it off to hide the item from viewers without deleting it.
- **Pencil** — opens the item's values for editing.
- **Trash** — deletes the item after you confirm.

Every change saves immediately when you confirm in the dialog or drop the row.

## Verify the result

Open the map (or refresh it). On a computer, the enabled items show on the right of the bar above the map, in the order you set:

<img src="/_assets/map-settings/build-custom-navigation-menu--viewer.png" alt="World Atlas as a visitor sees it, with the Map portal navigation item on the right of the bar above the map, next to the map title and description" width="1600" height="960" />

Click each item to confirm it does what you expect:

- `Link` opens the URL (in a new tab if you set the toggle).
- `Email Link` opens the viewer's email client with the address, subject, and body pre-filled.
- `Modal` and `Terms Modal` open in-page with the rich text content.
- `Maps` opens the picker / target map.
- `Map portal` and `Data portal` send the viewer to the corresponding account portal.

If an item doesn't appear, check that its switch in the list is on and that `Use navigation` is on.

## When to use which type

- **`Link`** — for any external destination (your company website, a documentation page, a GitHub repo).
- **`Email Link`** — when viewers should be able to contact you about the map; pre-fill the subject so replies are easier to triage.
- **`Modal`** — for in-context information you don't want to send viewers off-page for, like a legend explanation, methodology notes, or a contact form.
- **`Terms Modal`** — for the terms or legal notice viewers should accept before using the map. The version field is for tracking which terms a given map points to.
- **`Maps`** — to direct viewers between related maps in the same account (a collection of city maps, before/after pairs, or themed series).
- **`Map portal`** / **`Data portal`** — to give viewers a link to the account portal.
