How to access nested nav items?

[jdahdah]

Looking through the compiled code (such as@redocly/developer-portal/dist/engine/src/fragments.jsand @redocly/developer-portal/dist/engine/auto-graphql.d.ts) your system supports nested items in the header navigation. Example from fragments.js:

  fragment HeaderNavItemFragment on NavItem {
    type
    label
    link
    icon
    target
    external
    activateWithSidebar
  }

  fragment HeaderNavFragment on Query {
    siteConfig {
      logo {
        altText
        image
        href
      }
      nav {
        ...HeaderNavItemFragment
        items {
          ...HeaderNavItemFragment
          items {
            ...HeaderNavItemFragment
          }
        }
      }
    }
  }

I have the following structure in siteConfig.yaml:

nav:
  - search: true
  - group: Guides
    items:
      - label: Get started
        page: guides/get-started/index.md
      - label: Onboarding
        page: guides/onboarding/index.md
      - label: Feature guides
        page: guides/index.md
  - label: API reference
    # icon: ./images/redocly-icon-white.png
    page: api-reference/index.md
  - label: Training exercises
    page: developer-portal/index.md

However, when I run a query in graphiql, I get the following:

query MyQuery {
  siteConfig {
    nav {
      label
      link
      type
      target
      items {
        label
        link
        type
        target
        items {
          label
          link
          type
          target
        }
      }
    }
  }
}

Result:

{
  "data": {
    "siteConfig": {
      "nav": [
        {
          "label": "",
          "link": null,
          "type": "search",
          "target": null,
          "items": []
        },
        {
          "label": "Guides",
          "link": null,
          "type": "group",
          "target": null,
          "items": []
        },
        {
          "label": "API reference",
          "link": "/api-reference/",
          "type": "page",
          "target": null,
          "items": []
        },
        {
          "label": "Training exercises",
          "link": "/developer-portal/",
          "type": "page",
          "target": null,
          "items": []
        }
      ]
    }
  },
  "extensions": {}
}

Why are items all null? How can I access these? Is my yaml incorrectly formatted? I need to implement a dropdown menu in _override/NavBar.tsx and I'm unable to get past this barrier. Perhaps someone can point me in the right direction?

[RomanHotsiy]

You should change items to pages in siteConfig, items is internal:

I have the following structure in siteConfig.yaml:

nav:
  - search: true
  - group: Guides
    pages:
      - label: Get started
        page: guides/get-started/index.md
      - label: Onboarding
        page: guides/onboarding/index.md
      - label: Feature guides
        page: guides/index.md
  - label: API reference
    # icon: ./images/redocly-icon-white.png
    page: api-reference/index.md
  - label: Training exercises
    page: developer-portal/index.md

[jdahdah]

@RomanHotsiy That works, thank you! Would you mind pointing me to the documentation on this? I was sticking to the schema for the footer config, and it seems reasonable to me that the schema would be more consistent between the two (save for the columns key). The documentation instructs developers to use items:

footer:
  copyrightText: Copyright © Redocly LLC 2019-2020. All right reserved.
  columns:
    - group: Legal
      items:
        - label: Terms of Use
          href: 'https://redoc.ly/subscription-agreement/'
        - label: Privacy Notice
          href: 'https://redoc.ly/privacy-policy/'
        - label: Cookie Notice
          href: 'https://redoc.ly/privacy-policy/'
    - group: Support
      items:
        - label: FAQ
          page: faq.md
        - label: Contact us
          page: contact.mdx

[RomanHotsiy]

@DmitryAnansky could you please check whether we have a mistake in the docs or is this an actual inconsistency?