Logo
Query WordPress data
Query WordPress dataMenus

Menus

These are examples of queries to fetch menu data.

Fetching menus

Fetch a specific menu, and the raw data of its entries:

{
  menu(by: { id: 176 }) {
    itemDataEntries
  }
}

Filtering menu item properties via include or exclude:

{
  menu(by: { id: 176 }) {
    itemDataEntries(propertiesBy: { exclude: ["localURLPath", "rawLabel"] })
  }
}

Fetch all menus, nesting queries to select the properties from the items:

{
  menus {
    id
    name
    slug
    count
    locations
    items {
      ...MenuItemData
      children {
        ...MenuItemData
        children {
          ...MenuItemData
        }
      }
    }
  }
}
fragment MenuItemData on MenuItem {
  id
  itemType
  objectType
  objectID
  parentID
  localURLPath
  label
  rawLabel
  titleAttribute
  url
  cssClasses
  target
  description
  linkRelationship
}

Filtering and paginating menus:

{
  menus(pagination: { limit: 1, offset: 1}, filter: { search: "all" }) {
    id
    name
    slug
  }
  menuCount(filter: { search: "all" })
}

Creating menus

Only admin users (or those with the capability edit_theme_options) can create or update menus.

mutation CreateMenu {
  createMenu(input: {
    name: "Header menu"
    locations: ["header"]
    itemsBy: { json: [
      {
        label: "Custom parent (nested)",
        itemType: custom,
        url: "https://www.example.com/parent",
        titleAttribute: "Parent title attribute",
        description: "Parent menu item description",
        cssClasses: ["menu-item", "menu-item-parent"],
        target: "_blank",
        linkRelationship: "nofollow",
        children: [
          {
            label: "Custom child",
            itemType: custom,
            url: "https://www.example.com/parent/child",
            description: "Child menu item description",
            cssClasses: ["menu-item", "menu-item-child"],
            target: "_self",
            linkRelationship: "follow"
          },
          {
            label: "Page child",
            itemType: post_type,
            objectType: "page",
            objectID: 2,
            titleAttribute: "Go to sample page",
            description: "Page child description",
            cssClasses: ["menu-item", "menu-item-page"],
            target: "_blank",
            linkRelationship: "nofollow"
          },
          {
            label: "Category child",
            itemType: taxonomy,
            objectType: "category",
            objectID: 3
          }
        ]
      },
      {
        label: "Root page item",
        itemType: post_type,
        objectType: "page",
        objectID: 2
      },
      {
        label: "Root category item",
        itemType: taxonomy,
        objectType: "category",
        objectID: 5
      },
      {
        label: "Custom root item",
        itemType: custom,
        url: "https://www.example.com/2",
        description: "Custom root item description",
        cssClasses: ["menu-item", "menu-item-root"],
        target: "_self",
        linkRelationship: "follow",
        children: [
          {
            label: "Custom grandchild",
            itemType: custom,
            url: "https://www.example.com/2/grandchild",
            description: "Custom grandchild description",
            cssClasses: ["menu-item", "menu-item-grandchild"],
            target: "_blank",
            linkRelationship: "nofollow"
          }
        ]
      }
    ] }
  }) {
    status
    errors {
      __typename
      ...on ErrorPayload {
        message
      }
    }
    menu {
      id
      name
      slug
      count
      locations
      itemDataEntries
      items {
        ...MenuItemData
        children {
          ...MenuItemData
          children {
            ...MenuItemData
            children {
              ...MenuItemData
            }
          }
        }
      }
    }
  }
}
 
fragment MenuItemData on MenuItem {
  id
  itemType
  objectType
  objectID
  parentID
  localURLPath
  label
  rawLabel
  titleAttribute
  url
  cssClasses
  target
  description
  linkRelationship
}

Updating menus

Update the menu locations:

mutation UpdateMenu {
  updateMenu(input: {
    id: 176
    locations: ["footer", "footer-mobile"]
  }) {
    status
    errors {
      __typename
      ...on ErrorPayload {
        message
      }
    }
    menu {
      id
      locations
    }
  }
}

This query uses nested mutations to update the menu's name:

mutation {
  menu(by: { id: 176 }) {
    originalName: name
    update(input: {
      name: "Mobile header menu"
    }) {
      status
      errors {
        __typename
        ...on ErrorPayload {
          message
        }
      }
      menu {
        newName: name
      }
    }
  }
}