Skip to main content

Build a category navigation tree

Query the full category hierarchy and render it as a nested menu with slugs for routing.

Query​

query GetCategories($language: String) {
  categories {
    items {
      ... on Category {
        categoryId
        names(language: $language) {
          value
        }
        slugs(language: $language) {
          value
        }
        parent {
          categoryId
        }
        categoryPath {
          categoryId
          names(language: $language) {
            value
          }
          slugs(language: $language) {
            value
          }
        }
      }
    }
    itemsFound
  }
}

Variables​

{
  "language": "EN"
}

Response​

{
  "data": {
    "categories": {
      "items": [
        {
          "categoryId": 1794,
          "names": [{ "value": "ICT and hardware" }],
          "slugs": [{ "value": "ict-and-hardware" }],
          "parent": null,
          "categoryPath": [
            { "categoryId": 1794, "names": [{ "value": "ICT and hardware" }], "slugs": [{ "value": "ict-and-hardware" }] }
          ]
        },
        {
          "categoryId": 1795,
          "names": [{ "value": "Computers / laptops" }],
          "slugs": [{ "value": "computers-laptops" }],
          "parent": { "categoryId": 1794 },
          "categoryPath": [
            { "categoryId": 1794, "names": [{ "value": "ICT and hardware" }], "slugs": [{ "value": "ict-and-hardware" }] },
            { "categoryId": 1795, "names": [{ "value": "Computers / laptops" }], "slugs": [{ "value": "computers-laptops" }] }
          ]
        },
        {
          "categoryId": 1796,
          "names": [{ "value": "Business laptops" }],
          "slugs": [{ "value": "business-laptops" }],
          "parent": { "categoryId": 1795 },
          "categoryPath": [
            { "categoryId": 1794, "names": [{ "value": "ICT and hardware" }], "slugs": [{ "value": "ict-and-hardware" }] },
            { "categoryId": 1795, "names": [{ "value": "Computers / laptops" }], "slugs": [{ "value": "computers-laptops" }] },
            { "categoryId": 1796, "names": [{ "value": "Business laptops" }], "slugs": [{ "value": "business-laptops" }] }
          ]
        }
      ],
      "itemsFound": 3
    }
  }
}

How it works​

The response is a flat list of all categories. Each item has a parent.categoryId that tells you where it sits in the hierarchy, and root categories have parent: null. Build a tree on the client by grouping items by their parent. Use the slugs values for URL routing and categoryPath for rendering breadcrumbs on category pages. categoryPath runs from the root down to the category itself, so its last entry is the current category.

See also​