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
        name(language: $language) {
          value
        }
        slug(language: $language) {
          value
        }
        parent {
          categoryId
        }
        categoryPath {
          categoryId
          name(language: $language) {
            value
          }
          slug(language: $language) {
            value
          }
        }
      }
    }
    itemsFound
  }
}

Variables​

{
  "language": "EN"
}

Response​

{
  "data": {
    "categories": {
      "items": [
        {
          "categoryId": 1794,
          "name": [{ "value": "ICT and hardware" }],
          "slug": [{ "value": "ict-and-hardware" }],
          "parent": null,
          "categoryPath": []
        },
        {
          "categoryId": 1795,
          "name": [{ "value": "Computers / laptops" }],
          "slug": [{ "value": "computers-laptops" }],
          "parent": { "categoryId": 1794 },
          "categoryPath": [
            { "categoryId": 1794, "name": [{ "value": "ICT and hardware" }], "slug": [{ "value": "ict-and-hardware" }] }
          ]
        },
        {
          "categoryId": 1796,
          "name": [{ "value": "Business laptops" }],
          "slug": [{ "value": "business-laptops" }],
          "parent": { "categoryId": 1795 },
          "categoryPath": [
            { "categoryId": 1794, "name": [{ "value": "ICT and hardware" }], "slug": [{ "value": "ict-and-hardware" }] },
            { "categoryId": 1795, "name": [{ "value": "Computers / laptops" }], "slug": [{ "value": "computers-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 — root categories have parent: null. Build a tree on the client by grouping items by their parent. Use slug values for URL routing and categoryPath for rendering breadcrumbs on category pages.

See also​