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

# Build and customize your storefront navigation menu

> Create and manage navigation menus with links to collections, categories, pages, and custom URLs — including dropdowns and mega-menus.

Your storefront navigation is made up of one or more named **menus**, each containing an ordered list of links. Cartble's Navigation editor lets you add, reorder, nest, and configure every item visually — no code required. The menus you build here are referenced by your theme, so changes appear live on your storefront after publishing.

## Navigation menus

A **NavigationMenu** has a human-readable name and a unique **handle** — a short identifier your theme uses to pull in the right menu. Common handles include `main-menu` (rendered in the header) and `footer` (rendered in the footer). You can create additional menus for secondary navigation bars, landing pages, or any other use case your theme supports.

**To create a new menu:**

1. Go to **Online Store → Navigation** in your admin.
2. Click **Add Menu** and enter a name.
3. Cartble generates a handle from the name automatically (e.g., "Main Menu" → `main-menu`). You can edit the handle if needed.
4. Add items to the menu and save.

## Navigation item types

Each item in a menu points to a destination. You set the **type** when adding or editing an item:

| Type         | Destination                               |
| ------------ | ----------------------------------------- |
| `home`       | Links to your storefront homepage         |
| `collection` | Links to a specific collection page       |
| `category`   | Links to a specific category page         |
| `page`       | Links to a CMS page (About Us, FAQ, etc.) |
| `custom`     | Links to any URL you specify manually     |

For `collection`, `category`, and `page` items, select the target from a list of your existing content. For `custom` items, enter the full URL in the **URL** field.

## Nested items and dropdown menus

You can nest items under any top-level navigation item to create multi-level menus. Nested items appear as children when a visitor hovers over or taps the parent.

**To add a nested item:**

1. Open an existing menu in the Navigation editor.
2. Click the **Add child** button below any top-level item.
3. Configure the child item's label, type, and target.
4. Drag items using the grip handle to reorder within the same level.

Nesting depth is flexible — you can create sub-children under children for complex structures. Most themes render up to two levels deep in dropdowns and three or more in mega-menus.

## Design options per item

Each navigation item has an optional **design** configuration that controls how it renders when expanded:

| Option            | Description                                                             |
| ----------------- | ----------------------------------------------------------------------- |
| `displayType`     | `dropdown` for a standard flyout, or `mega-menu` for a full-width panel |
| `columns`         | Number of columns to use in a mega-menu layout                          |
| `backgroundImage` | URL of an image to render in the mega-menu background                   |
| `isFeatured`      | Highlights this item visually, often with a badge or accent color       |

<Info>
  Design options are rendered by your active theme. The Spark theme supports both `dropdown` and `mega-menu` display types. Check your theme documentation to confirm which options are active.
</Info>

## Managing items in the Navigation editor

The Navigation editor shows your menu as a drag-and-drop list. You can:

* **Add an item** — click **Add item**, choose the type, set the label and target, and save.
* **Reorder items** — drag the grip handle to move an item up, down, or under another item.
* **Edit an item** — click the edit icon to update the label, target, or design settings.
* **Delete an item** — click the trash icon to remove an item and all its children.

Changes are saved to the menu record when you click **Save Menu**. Your storefront reflects the new structure immediately after saving.

<Tip>
  Link your most important collections directly to the `main-menu` for maximum discoverability. Customers who can find a collection from the header are significantly more likely to browse and convert than those who rely on search alone.
</Tip>

<Warning>
  Deleting a top-level navigation item also deletes all of its nested children. Restructure your menu before removing parent items to avoid accidentally losing nested links.
</Warning>