Skip to main content

Menu

Overview​

Menus are assembly structures that group and organize entities in your store. They create hierarchical relationships between categories, collections, and pages. The most common use case is storefront navigation.

You can create menus in the Saleor Dashboard in the Configuration → Navigation page.

Lifecycle​

info

Menu operations require the MANAGE_MENUS permission.

Creating a Menu​

A menu requires a name and can optionally have a slug. You can create a menu with or without items with the menuCreate mutation:

mutation CreateMenu($input: MenuCreateInput!) {
  menuCreate(input: $input) {
    menu {
      id
      name
      slug
      items {
        id
        name
        level
      }
    }
    errors {
      field
      message
      code
    }
  }
}
Expand â–¼

A menu item can link to one of the following entities:

  • Category
  • Collection
  • Page
  • URL

Here is an example input for creating a menu:

{
  "name": "Example Menu Item",
  "slug": "example-menu-item",
  "items": [
    {
      "name": "Category Menu Item",
      "category": "Q2F0ZWdvcnk6MjY="
    },
    {
      "name": "Collection Menu Item",
      "collection": "Q29sbGVjdGlvbjozMjA="
    },
    {
      "name": "Page Menu Item",
      "page": "UGFnZToxMjM="
    },
    {
      "name": "URL Menu Item",
      "url": "https://www.saleor.io"
    }
  ]
}
Expand â–¼

You can also create the menu item itself through the menuItemCreate mutation:

mutation CreateMenuItem($input: MenuItemCreateInput!) {
  menuItemCreate(input: $input) {
    menuItem {
      id
      name
      slug
      children {
        id
        name
        level
      }
    }
  }
}

Menu items can be nested to create a hierarchy. For example, the following input creates a menu item as a child of another menu item:

{
  "name": "Parent Menu Item",
  "url": "https://www.saleor.io",
  "parent": "Q2F0ZWdvcnk6MjY=",
}

Getting Menus​

To retrieve all menus, use the menus query:

  menus(first: $first) {
    edges {
      node {
        id
        name
        slug
        items {
          id
          name
          level
          category {
            id
            name
          }
          collection {
            id
            name
          }
          page {
            id
            title
          }
          children {
            id
            name
            level
          }
        }
      }
    }
  }
Expand â–¼

To get a specific menu by ID, name, or slug, use the menu query:

query GetMenu($id: ID, $name: String, $slug: String) {
  menu(id: $id, name: $name, slug: $slug) {
    id
    name
    slug
    items {
      id
      name
      level
      category {
        id
        name
      }
      collection {
        id
        name
      }
      page {
        id
        title
      }
    }
  }
}
Expand â–¼

Deleting a Menu​

To remove a menu and all its items, use the menuDelete mutation:

mutation DeleteMenu($id: ID!) {
  menuDelete(id: $id) {
    menu {
      id
      name
      slug
    }
    errors {
      field
      message
      code
    }
  }
}

Webhooks​

Here are the webhooks that are available for menus: