{"componentChunkName":"component---src-templates-simple-markdown-js","path":"/developer-portal/sidebar-nav/","matchPath":"","result":{"data":{"markdownRemark":{"html":"

Sidebar training exercises

\n

It's hard to dive in without reading the sidebar docs.\nDo that before continuing to the exercises.

\n

Add/remove a page to the sidebar

\n

When a page is linked from the sidebar, it will render with the sidebar.\nWhen a page is not linked from the sidebar, it will render without any sidebar.

\n

Open the upgrade page in a new tab.

\n

Notice it renders without any sidebar.

\n

Add the upgrade page to the sidebar

\n\n
\n
\n BeforeAfter\n
\n
\n
\n
\n
Copy
\n
Copied
\n
\n 
training:\n  - group: Developer portal starter\n    expanded: true\n    pages:\n      - label: Training exercises\n        page: developer-portal/index.md\n      - separator: This is a separator\n      - label: Setup\n        page: developer-portal/setup.md\n      - label: Markdown\n        page: developer-portal/markdown.md
\n
\n
\n
Copy
\n
Copied
\n
\n 
training:\n  - group: Developer portal starter\n    expanded: true\n    pages:\n      - label: Training exercises\n        page: developer-portal/index.md\n      - separator: This is a separator\n      - label: Setup\n        page: developer-portal/setup.md\n      - label: Upgrade\n        page: developer-portal/upgrade.md\n      - label: Markdown\n        page: developer-portal/markdown.md
\n
\n
\n \n

Now, load the upgrade screen and see the sidebar.

\n

Sidebar nesting-levels

\n

Sidebar nesting is controlled by the group keyword.\nGroups can be nested within each other.

\n

Move the upgrade page to display at the very bottom of the sidebar on the left-most side underneath the Petstore reference section.

\n
attention

Pay attention to the indentation spacing

\n
\n
\n
Copy
\n
Copied
\n
\n 
  - group: Petstore reference\n    expanded: false\n    pages:\n      - page: openapi/reference.page.yaml/*\n  - label: Upgrade\n    page: developer-portal/upgrade.md
\n
\n

Changing labels

\n

Let's change the label on that from Upgrade to Upgrade instructions.

\n
\n
\n
Copy
\n
Copied
\n
\n 
  - label: Upgrade instructions\n    page: developer-portal/upgrade.md
\n
\n

Adding a separator

\n

Add a separator above the upgrade instructions page.

\n
\n
\n
Copy
\n
Copied
\n
\n 
  - separator: Admin\n  - label: Upgrade instructions\n    page: developer-portal/upgrade.md
\n
\n

Add deep nesting in the sidebar

\n

Let's move the upgrade instructions into nested groups.\nAn important thing to note is that changing the sidebar nesting does not change the URL path structure.

\n

We will change it to this here.\nIt shows us how we can nest groups.\nGroups can contain groups and pages.\nThis is deeper nesting than you will ever need.

\n
\n
\n
Copy
\n
Copied
\n
\n 
  - group: Admin\n    expanded: true\n    pages:\n      - group: Routine\n        expanded: true\n        pages:\n          - group: Rock\n            expanded: true\n            pages:\n              - group: Paper\n                expanded: true\n                pages:\n                  - group: Scissors\n                    expanded: true\n                    pages:\n                      - group: 1-2-3\n                        expanded: true\n                        pages:\n                          - group: Go\n                            expanded: true\n                            pages:\n                              - label: Upgrading\n                                page: developer-portal/upgrade.md
\n
\n

Add another sidebar

\n

A page should appear in zero or one sidebars.

\n

At the top-level of the sidebar is a key (training in our starter project here).

\n

Your developer portal may have more than one sidebar.

\n

See that demo in the sidebars.yaml.

\n
\n
\n
Copy
\n
Copied
\n
\n 
alternative:\n  - page: developer-portal/sidebar-alternative.md\n    label: Alternative sidebar example
\n
\n

Visit the sidebar alternatives page to see it.

","headings":[{"value":"Sidebar training exercises","depth":1},{"value":"Add/remove a page to the sidebar","depth":2},{"value":"Add the upgrade page to the sidebar","depth":3},{"value":"Sidebar nesting-levels","depth":2},{"value":"Changing labels","depth":2},{"value":"Adding a separator","depth":2},{"value":"Add deep nesting in the sidebar","depth":2},{"value":"Add another sidebar","depth":2}]},"contentItem":{"data":{"lastModified":"2025-12-17T21:55:39.000Z","enableToc":null,"disableLastModified":null,"tocMaxDepth":null,"requestLogin":false}},"siteConfig":{"enableToc":true,"disableLastModified":false,"tocMaxDepth":4}},"pageContext":{"matchPath":"","id":"1b2486f7-3744-55be-952a-cb89ec97b7db__redocly content/developer-portal/sidebar-nav/","seo":{"title":"Control your left sidebar navigation","description":null,"image":"","keywords":null,"jsonLd":null,"lang":null},"pageId":"developer-portal/sidebar-nav.md","pageBaseUrl":"/developer-portal/sidebar-nav","type":"markdown","toc":{"enable":true,"maxDepth":4,"headings":[{"depth":1,"value":"Sidebar training exercises","id":"sidebar-training-exercises"},{"depth":2,"value":"Add/remove a page to the sidebar","id":"addremove-a-page-to-the-sidebar"},{"depth":3,"value":"Add the upgrade page to the sidebar","id":"add-the-upgrade-page-to-the-sidebar"},{"depth":2,"value":"Sidebar nesting-levels","id":"sidebar-nesting-levels"},{"depth":2,"value":"Changing labels","id":"changing-labels"},{"depth":2,"value":"Adding a separator","id":"adding-a-separator"},{"depth":2,"value":"Add deep nesting in the sidebar","id":"add-deep-nesting-in-the-sidebar"},{"depth":2,"value":"Add another sidebar","id":"add-another-sidebar"}]},"data":{"title":"Control your left sidebar navigation"},"catalogInfo":null,"link":"/developer-portal/sidebar-nav/","sidebarName":"","isLanding":false,"showPrevButton":null,"showNextButton":null,"apiVersions":null,"apiVersionId":null,"isDefaultApiVersion":null}},"staticQueryHashes":["1123603147","1180902673","1302185487","1344209882","1398840060","1520077861","1975142765","2667623876","2950305614","3743992808","561138138"]}