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

# Build and manage your Cartble storefront navigation

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

Navigation menus control how visitors move through your storefront. You can create multiple menus — one for your header, one or more for your footer columns, and any others your theme references — and populate them with links to any part of your store. The **Navigation Editor** in your admin dashboard is the central place to build and update all menus.

## Opening the Navigation Editor

In your admin sidebar, click **Navigation**. The Navigation Editor opens with a list of all existing menus on the left and an item editor on the right.

## Navigation menus

Each menu has three fields:

| Field      | Description                                                                                              |
| ---------- | -------------------------------------------------------------------------------------------------------- |
| **Name**   | A human-readable label used inside the admin (e.g., "Main Menu", "Footer Links")                         |
| **Handle** | A unique lowercase slug used to reference the menu in theme settings (e.g., `main-menu`, `footer-links`) |
| **Items**  | An ordered list of navigation items                                                                      |

Your header menu is connected to the theme by setting the **Header menu handle** in the theme configuration to match the handle of the menu you want to use.

## Navigation item types

Each item in a menu has a **type** that determines what it links to:

<CardGroup cols={2}>
  <Card title="home" icon="house">
    Links directly to your storefront homepage. No additional target required.
  </Card>

  <Card title="collection" icon="layers">
    Links to a specific product collection. Set `targetId` to the collection's ID.
  </Card>

  <Card title="category" icon="tag">
    Links to a product category page. Set `targetId` to the category's ID.
  </Card>

  <Card title="page" icon="file-text">
    Links to a CMS page (a page you created in the Pages manager). Set `targetId` to the page's ID.
  </Card>

  <Card title="custom" icon="link">
    Links to any URL you enter manually. Set the `url` field to the full destination path or external URL.
  </Card>
</CardGroup>

Every item also has a **Label** — the text displayed to your visitors in the menu.

## Nested items (multi-level dropdowns)

Any navigation item can have **children** — a nested list of items that appear as a dropdown or sub-menu when the parent is hovered or clicked. Children support the same five item types as top-level items, and each child can itself carry further nested children for deep multi-level navigation.

<Tip>
  Keep dropdown menus to two levels in most cases. Very deep nesting can be hard for mobile visitors to navigate.
</Tip>

## Design options for dropdown items

Items that have children also expose a **design** configuration block that controls how the dropdown renders:

| Option               | Type                      | Description                                                                                     |
| -------------------- | ------------------------- | ----------------------------------------------------------------------------------------------- |
| **Display type**     | `dropdown` or `mega-menu` | Controls whether children appear as a standard vertical dropdown or an expanded mega-menu panel |
| **Columns**          | Number                    | For mega-menus, sets how many columns the child items are distributed across                    |
| **Background image** | Image URL                 | Optional background image shown inside the mega-menu panel                                      |
| **Featured**         | Boolean                   | Marks this item as featured, which themes may use to apply a visual highlight                   |

<Note>
  The mega-menu display type requires your theme's **Header menu type** setting to be set to `mega` in the theme editor. If the header is in `simple` mode, all items render as standard dropdowns regardless of the per-item design setting.
</Note>

## Adding, reordering, and removing items

<Steps>
  <Step title="Select or create a menu">
    In the Navigation Editor, click an existing menu to open it, or click **New menu** to create one. Give it a name and a unique handle.
  </Step>

  <Step title="Add an item">
    Click **Add item** inside the menu. Choose the item type, enter a label, and — for collection, category, and page types — select the target from the picker. For custom items, enter the destination URL.
  </Step>

  <Step title="Nest items">
    Drag an item beneath another item and indent it to make it a child. Alternatively, use the **Add child** action on any existing item to append a nested entry directly.
  </Step>

  <Step title="Configure design options">
    Click the settings icon on any item that has children to set the display type, column count, background image, and featured flag.
  </Step>

  <Step title="Reorder items">
    Drag items up or down the list to change their order. Drag nested items within their parent group to reorder them independently.
  </Step>

  <Step title="Remove an item">
    Click the delete icon on any item to remove it. Removing a parent item also removes all of its children.
  </Step>

  <Step title="Save">
    Click **Save** to publish your changes. The updated menu appears on your storefront immediately.
  </Step>
</Steps>