{"ast":{"$$mdtype":"Tag","name":"article","attributes":{},"children":[{"$$mdtype":"Tag","name":"Heading","attributes":{"level":1,"id":"navigation-tabs","__idx":0},"children":["Navigation tabs"]},{"$$mdtype":"Tag","name":"ConfigOptionRequirements","attributes":{"products":["Redoc","Revel","Reef","Realm"],"plans":["Pro","Enterprise","Enterprise+"]},"children":[]},{"$$mdtype":"Tag","name":"p","attributes":{},"children":["Navigation tabs split a large site into sections, such as guides, API reference, and changelog."," ","Each tab appears in a row under the navbar and has its own sidebar."," ","Readers switch sections with one click, and the sidebar lists only the pages of the current section."]},{"$$mdtype":"Tag","name":"Heading","attributes":{"level":2,"id":"add-navigation-tabs","__idx":1},"children":["Add navigation tabs"]},{"$$mdtype":"Tag","name":"p","attributes":{},"children":["Define navigation tabs as the top-level entries of a ",{"$$mdtype":"Tag","name":"code","attributes":{},"children":["sidebars.yaml"]}," file."," ","Each tab either opens a landing ",{"$$mdtype":"Tag","name":"code","attributes":{},"children":["page"]}," and shows a sidebar from its ",{"$$mdtype":"Tag","name":"code","attributes":{},"children":["items"]},", or opens a dropdown ",{"$$mdtype":"Tag","name":"code","attributes":{},"children":["menu"]}," of pages."]},{"$$mdtype":"Tag","name":"p","attributes":{},"children":["The following example organizes product documentation into three tabs:"]},{"$$mdtype":"Tag","name":"CodeBlock","attributes":{"data-language":"yaml","data-title":"sidebars.yaml","header":{"title":"sidebars.yaml","controls":{"copy":{}}},"source":"- tab: Guides\n  page: guides/index.md\n  icon: book\n  items:\n    - page: guides/quickstart.md\n    - group: Integrate\n      items:\n        - page: guides/authentication.md\n        - page: guides/webhooks.md\n    - group: Tutorials\n      directory: guides/tutorials\n\n- tab: API reference\n  icon: code\n  menu:\n    - page: apis/payments.yaml\n      label: Payments API\n    - page: apis/accounts.yaml\n      label: Accounts API\n      items:\n        - page: apis/accounts/migrate-to-v2.md\n    - page: apis/events/index.md\n      label: Webhook events\n      items:\n        - page: apis/events/retries.md\n\n- tab: Changelog\n  page: changelog.md\n","lang":"yaml"},"children":[]},{"$$mdtype":"Tag","name":"p","attributes":{},"children":["In this example:"]},{"$$mdtype":"Tag","name":"ul","attributes":{},"children":[{"$$mdtype":"Tag","name":"li","attributes":{},"children":[{"$$mdtype":"Tag","name":"strong","attributes":{},"children":["Guides"]}," opens ",{"$$mdtype":"Tag","name":"code","attributes":{},"children":["guides/index.md"]},", and the sidebar displays the quickstart and the ",{"$$mdtype":"Tag","name":"strong","attributes":{},"children":["Integrate"]}," and ",{"$$mdtype":"Tag","name":"strong","attributes":{},"children":["Tutorials"]}," groups."]},{"$$mdtype":"Tag","name":"li","attributes":{},"children":[{"$$mdtype":"Tag","name":"strong","attributes":{},"children":["API reference"]}," opens a dropdown with three entries."," ","The two API entries display the generated API navigation in the sidebar, and ",{"$$mdtype":"Tag","name":"strong","attributes":{},"children":["Accounts API"]}," adds a migration guide after it."," ",{"$$mdtype":"Tag","name":"strong","attributes":{},"children":["Webhook events"]}," is a Markdown page with its own sidebar."]},{"$$mdtype":"Tag","name":"li","attributes":{},"children":[{"$$mdtype":"Tag","name":"strong","attributes":{},"children":["Changelog"]}," opens a single page and has no sidebar items."]}]},{"$$mdtype":"Tag","name":"Heading","attributes":{"level":2,"id":"navigation-tabs-configuration-options","__idx":2},"children":["Navigation tabs configuration options"]},{"$$mdtype":"Tag","name":"Heading","attributes":{"level":3,"id":"tab-options","__idx":3},"children":["Tab options"]},{"$$mdtype":"Tag","name":"div","attributes":{"className":"md-table-wrapper"},"children":[{"$$mdtype":"Tag","name":"table","attributes":{"className":"md"},"children":[{"$$mdtype":"Tag","name":"thead","attributes":{},"children":[{"$$mdtype":"Tag","name":"tr","attributes":{},"children":[{"$$mdtype":"Tag","name":"th","attributes":{"data-label":"Option"},"children":["Option"]},{"$$mdtype":"Tag","name":"th","attributes":{"data-label":"Type"},"children":["Type"]},{"$$mdtype":"Tag","name":"th","attributes":{"data-label":"Description"},"children":["Description"]}]}]},{"$$mdtype":"Tag","name":"tbody","attributes":{},"children":[{"$$mdtype":"Tag","name":"tr","attributes":{},"children":[{"$$mdtype":"Tag","name":"td","attributes":{},"children":["tab"]},{"$$mdtype":"Tag","name":"td","attributes":{},"children":["string"]},{"$$mdtype":"Tag","name":"td","attributes":{},"children":[{"$$mdtype":"Tag","name":"strong","attributes":{},"children":["REQUIRED."]}," ","Label displayed in the tab row."]}]},{"$$mdtype":"Tag","name":"tr","attributes":{},"children":[{"$$mdtype":"Tag","name":"td","attributes":{},"children":["page"]},{"$$mdtype":"Tag","name":"td","attributes":{},"children":["string"]},{"$$mdtype":"Tag","name":"td","attributes":{},"children":["Path to the tab's landing page."," ","The page can be a Markdown file or an OpenAPI, AsyncAPI, or GraphQL description."," ",{"$$mdtype":"Tag","name":"strong","attributes":{},"children":["Mutually exclusive"]}," with ",{"$$mdtype":"Tag","name":"code","attributes":{},"children":["menu"]},"."]}]},{"$$mdtype":"Tag","name":"tr","attributes":{},"children":[{"$$mdtype":"Tag","name":"td","attributes":{},"children":["items"]},{"$$mdtype":"Tag","name":"td","attributes":{},"children":["[",{"$$mdtype":"Tag","name":"Link","attributes":{"href":"/docs/realm/navigation/sidebars#sidebars-configuration-options"},"children":["Sidebar item"]},"]"]},{"$$mdtype":"Tag","name":"td","attributes":{},"children":["Sidebar displayed while the tab is active."," ","Accepts links, groups, separators, directories, and ",{"$$mdtype":"Tag","name":"code","attributes":{},"children":["$ref"]}," to other sidebar files."," ","Use together with ",{"$$mdtype":"Tag","name":"code","attributes":{},"children":["page"]},"."]}]},{"$$mdtype":"Tag","name":"tr","attributes":{},"children":[{"$$mdtype":"Tag","name":"td","attributes":{},"children":["menu"]},{"$$mdtype":"Tag","name":"td","attributes":{},"children":["[",{"$$mdtype":"Tag","name":"Link","attributes":{"href":"/docs/realm/navigation/navigation-tabs#menu-entry-options"},"children":["Menu entry"]},"]"]},{"$$mdtype":"Tag","name":"td","attributes":{},"children":["Dropdown of pages for the tab."," ","Each entry opens its own page and displays its own sidebar."," ",{"$$mdtype":"Tag","name":"strong","attributes":{},"children":["Mutually exclusive"]}," with ",{"$$mdtype":"Tag","name":"code","attributes":{},"children":["page"]}," and ",{"$$mdtype":"Tag","name":"code","attributes":{},"children":["items"]},"."]}]},{"$$mdtype":"Tag","name":"tr","attributes":{},"children":[{"$$mdtype":"Tag","name":"td","attributes":{},"children":["icon"]},{"$$mdtype":"Tag","name":"td","attributes":{},"children":["string or ",{"$$mdtype":"Tag","name":"Link","attributes":{"href":"/docs/realm/navigation/sidebars#icon-object"},"children":["srcSet"]}]},{"$$mdtype":"Tag","name":"td","attributes":{},"children":["Icon displayed next to the tab label."," ","Accepts a ",{"$$mdtype":"Tag","name":"Link","attributes":{"href":"https://fontawesome.com/icons"},"children":["Font Awesome"]}," icon name or a relative path to an icon image file."]}]},{"$$mdtype":"Tag","name":"tr","attributes":{},"children":[{"$$mdtype":"Tag","name":"td","attributes":{},"children":["tabTranslationKey"]},{"$$mdtype":"Tag","name":"td","attributes":{},"children":["string"]},{"$$mdtype":"Tag","name":"td","attributes":{},"children":["Sets the translation key for the tab label."," ","Used for ",{"$$mdtype":"Tag","name":"Link","attributes":{"href":"/docs/realm/content/localization/localize-labels#localize-user-defined-ui-elements"},"children":["localization"]},"."]}]},{"$$mdtype":"Tag","name":"tr","attributes":{},"children":[{"$$mdtype":"Tag","name":"td","attributes":{},"children":["rbac"]},{"$$mdtype":"Tag","name":"td","attributes":{},"children":["object"]},{"$$mdtype":"Tag","name":"td","attributes":{},"children":["Access controls for the tab."," ","See ",{"$$mdtype":"Tag","name":"Link","attributes":{"href":"/docs/realm/access/links-and-groups-permissions#in-the-sidebar"},"children":["Configure RBAC in sidebar"]}," for more information."]}]}]}]}]},{"$$mdtype":"Tag","name":"Heading","attributes":{"level":3,"id":"menu-entry-options","__idx":4},"children":["Menu entry options"]},{"$$mdtype":"Tag","name":"p","attributes":{},"children":["A menu entry accepts the same options as a ",{"$$mdtype":"Tag","name":"Link","attributes":{"href":"/docs/realm/navigation/sidebars#link-options"},"children":["sidebar link"]},", plus ",{"$$mdtype":"Tag","name":"code","attributes":{},"children":["items"]},"."," ","The most common options are:"]},{"$$mdtype":"Tag","name":"div","attributes":{"className":"md-table-wrapper"},"children":[{"$$mdtype":"Tag","name":"table","attributes":{"className":"md"},"children":[{"$$mdtype":"Tag","name":"thead","attributes":{},"children":[{"$$mdtype":"Tag","name":"tr","attributes":{},"children":[{"$$mdtype":"Tag","name":"th","attributes":{"data-label":"Option"},"children":["Option"]},{"$$mdtype":"Tag","name":"th","attributes":{"data-label":"Type"},"children":["Type"]},{"$$mdtype":"Tag","name":"th","attributes":{"data-label":"Description"},"children":["Description"]}]}]},{"$$mdtype":"Tag","name":"tbody","attributes":{},"children":[{"$$mdtype":"Tag","name":"tr","attributes":{},"children":[{"$$mdtype":"Tag","name":"td","attributes":{},"children":["page"]},{"$$mdtype":"Tag","name":"td","attributes":{},"children":["string"]},{"$$mdtype":"Tag","name":"td","attributes":{},"children":[{"$$mdtype":"Tag","name":"strong","attributes":{},"children":["REQUIRED."]}," ","Path to the page the entry opens."," ","The page can be a Markdown file or an OpenAPI, AsyncAPI, or GraphQL description."]}]},{"$$mdtype":"Tag","name":"tr","attributes":{},"children":[{"$$mdtype":"Tag","name":"td","attributes":{},"children":["label"]},{"$$mdtype":"Tag","name":"td","attributes":{},"children":["string"]},{"$$mdtype":"Tag","name":"td","attributes":{},"children":["Link text displayed in the dropdown."," ","Default: the title of the page."]}]},{"$$mdtype":"Tag","name":"tr","attributes":{},"children":[{"$$mdtype":"Tag","name":"td","attributes":{},"children":["items"]},{"$$mdtype":"Tag","name":"td","attributes":{},"children":["[",{"$$mdtype":"Tag","name":"Link","attributes":{"href":"/docs/realm/navigation/sidebars#sidebars-configuration-options"},"children":["Sidebar item"]},"]"]},{"$$mdtype":"Tag","name":"td","attributes":{},"children":["Sidebar displayed while the entry is active."," ","Accepts links, groups, separators, directories, and ",{"$$mdtype":"Tag","name":"code","attributes":{},"children":["$ref"]}," to other sidebar files."]}]},{"$$mdtype":"Tag","name":"tr","attributes":{},"children":[{"$$mdtype":"Tag","name":"td","attributes":{},"children":["icon"]},{"$$mdtype":"Tag","name":"td","attributes":{},"children":["string or ",{"$$mdtype":"Tag","name":"Link","attributes":{"href":"/docs/realm/navigation/sidebars#icon-object"},"children":["srcSet"]}]},{"$$mdtype":"Tag","name":"td","attributes":{},"children":["Icon displayed next to the entry label."," ","Accepts a ",{"$$mdtype":"Tag","name":"Link","attributes":{"href":"https://fontawesome.com/icons"},"children":["Font Awesome"]}," icon name or a relative path to an icon image file."]}]},{"$$mdtype":"Tag","name":"tr","attributes":{},"children":[{"$$mdtype":"Tag","name":"td","attributes":{},"children":["labelTranslationKey"]},{"$$mdtype":"Tag","name":"td","attributes":{},"children":["string"]},{"$$mdtype":"Tag","name":"td","attributes":{},"children":["Sets the translation key for the entry label."," ","Used for ",{"$$mdtype":"Tag","name":"Link","attributes":{"href":"/docs/realm/content/localization/localize-labels#localize-user-defined-ui-elements"},"children":["localization"]},"."]}]},{"$$mdtype":"Tag","name":"tr","attributes":{},"children":[{"$$mdtype":"Tag","name":"td","attributes":{},"children":["rbac"]},{"$$mdtype":"Tag","name":"td","attributes":{},"children":["object"]},{"$$mdtype":"Tag","name":"td","attributes":{},"children":["Access controls for the entry."," ","See ",{"$$mdtype":"Tag","name":"Link","attributes":{"href":"/docs/realm/access/links-and-groups-permissions#in-the-sidebar"},"children":["Configure RBAC in sidebar"]}," for more information."]}]}]}]}]},{"$$mdtype":"Tag","name":"Heading","attributes":{"level":2,"id":"how-readers-navigate-navigation-tabs","__idx":5},"children":["How readers navigate navigation tabs"]},{"$$mdtype":"Tag","name":"p","attributes":{},"children":["The tab row appears under the navbar on screens 960px and wider."," ","A tab with a ",{"$$mdtype":"Tag","name":"code","attributes":{},"children":["menu"]}," opens a dropdown of its entries."]},{"$$mdtype":"Tag","name":"Image","attributes":{"src":"/content-assets/navigation-tabs-wide-8eba0f33576c69aa.png","alt":"Screenshot of navigation tabs","framed":true,"withLightbox":true},"children":[]},{"$$mdtype":"Tag","name":"p","attributes":{},"children":["On mobile devices, the mobile menu shows the tabs in a dropdown above the sidebar of the current tab."]},{"$$mdtype":"Tag","name":"Image","attributes":{"src":"/content-assets/navigation-tabs-mobile-ffc9f58672571cb2.png","alt":"Screenshot of navigation tabs on a mobile device","framed":true,"withLightbox":true},"children":[]},{"$$mdtype":"Tag","name":"p","attributes":{},"children":["The tab that contains the current page stays highlighted while readers move between its pages."," ","The sidebar displays only the items listed in that tab, or the ",{"$$mdtype":"Tag","name":"code","attributes":{},"children":["items"]}," of the active menu entry."]},{"$$mdtype":"Tag","name":"p","attributes":{},"children":["When a tab or menu entry opens an API description, the page displays the API reference."," ","The sidebar lists the navigation generated from the description, followed by any ",{"$$mdtype":"Tag","name":"code","attributes":{},"children":["items"]}," you add."]},{"$$mdtype":"Tag","name":"Heading","attributes":{"level":2,"id":"limitations","__idx":6},"children":["Limitations"]},{"$$mdtype":"Tag","name":"p","attributes":{},"children":["The build fails if a ",{"$$mdtype":"Tag","name":"code","attributes":{},"children":["sidebars.yaml"]}," file breaks one of these rules:"]},{"$$mdtype":"Tag","name":"ul","attributes":{},"children":[{"$$mdtype":"Tag","name":"li","attributes":{},"children":[{"$$mdtype":"Tag","name":"strong","attributes":{},"children":["All top-level entries are tabs, or none are."]}," ","To display a plain link or group, put it in a tab's ",{"$$mdtype":"Tag","name":"code","attributes":{},"children":["items"]},"."," ","Every versioned copy of a sidebar also uses tabs, or none of them do."]},{"$$mdtype":"Tag","name":"li","attributes":{},"children":[{"$$mdtype":"Tag","name":"strong","attributes":{},"children":["A page belongs to one tab only."]}," ","If two tabs or two menu entries list the same page, the error message names both."]},{"$$mdtype":"Tag","name":"li","attributes":{},"children":[{"$$mdtype":"Tag","name":"strong","attributes":{},"children":["Tabs don't nest."]}," ","A tab can't contain another tab, and ",{"$$mdtype":"Tag","name":"code","attributes":{},"children":["menu"]}," works only directly on a tab."," ","This rule also applies to sidebar files included with ",{"$$mdtype":"Tag","name":"code","attributes":{},"children":["$ref"]},"."]},{"$$mdtype":"Tag","name":"li","attributes":{},"children":[{"$$mdtype":"Tag","name":"strong","attributes":{},"children":["A tab has ",{"$$mdtype":"Tag","name":"code","attributes":{},"children":["page"]}," or ",{"$$mdtype":"Tag","name":"code","attributes":{},"children":["menu"]},", not both."]}," ","A tab with ",{"$$mdtype":"Tag","name":"code","attributes":{},"children":["menu"]}," can't have ",{"$$mdtype":"Tag","name":"code","attributes":{},"children":["items"]},", and every menu entry needs a ",{"$$mdtype":"Tag","name":"code","attributes":{},"children":["page"]},"."," ","Put ",{"$$mdtype":"Tag","name":"code","attributes":{},"children":["directory"]},", ",{"$$mdtype":"Tag","name":"code","attributes":{},"children":["group"]},", ",{"$$mdtype":"Tag","name":"code","attributes":{},"children":["href"]},", and ",{"$$mdtype":"Tag","name":"code","attributes":{},"children":["$ref"]}," entries in ",{"$$mdtype":"Tag","name":"code","attributes":{},"children":["items"]},", not on the tab itself."]},{"$$mdtype":"Tag","name":"li","attributes":{},"children":[{"$$mdtype":"Tag","name":"strong","attributes":{},"children":["Tab and menu entry pages don't accept anchors."]}," ","Set ",{"$$mdtype":"Tag","name":"code","attributes":{},"children":["page"]}," to a file path such as ",{"$$mdtype":"Tag","name":"code","attributes":{},"children":["guides/index.md"]},", not ",{"$$mdtype":"Tag","name":"code","attributes":{},"children":["guides/index.md#setup"]},"."," ","Links in a tab's ",{"$$mdtype":"Tag","name":"code","attributes":{},"children":["items"]}," can still use anchors."]}]},{"$$mdtype":"Tag","name":"Heading","attributes":{"level":2,"id":"resources","__idx":7},"children":["Resources"]},{"$$mdtype":"Tag","name":"ul","attributes":{},"children":[{"$$mdtype":"Tag","name":"li","attributes":{},"children":[{"$$mdtype":"Tag","name":"strong","attributes":{},"children":[{"$$mdtype":"Tag","name":"Link","attributes":{"href":"/docs/realm/navigation/sidebars"},"children":["Configure sidebars"]}]}," - Configure the links, groups, and referenced sidebar files that go into a tab's ",{"$$mdtype":"Tag","name":"code","attributes":{},"children":["items"]}]},{"$$mdtype":"Tag","name":"li","attributes":{},"children":[{"$$mdtype":"Tag","name":"strong","attributes":{},"children":[{"$$mdtype":"Tag","name":"Link","attributes":{"href":"/docs/realm/navigation"},"children":["Build navigation"]}]}," - Overview of navigation areas and how they work together"]},{"$$mdtype":"Tag","name":"li","attributes":{},"children":[{"$$mdtype":"Tag","name":"strong","attributes":{},"children":[{"$$mdtype":"Tag","name":"Link","attributes":{"href":"/docs/realm/branding/css-variables/component#navigation-tabs"},"children":["Component CSS variables"]}]}," - Full list of variables that style the navigation tabs row"]},{"$$mdtype":"Tag","name":"li","attributes":{},"children":[{"$$mdtype":"Tag","name":"strong","attributes":{},"children":[{"$$mdtype":"Tag","name":"Link","attributes":{"href":"/docs/realm/content/versions"},"children":["Version content"]}]}," - Organize versioned folders and their sidebars"]}]}]},"frontmatter":{"products":["Redoc","Revel","Reef","Realm"],"plans":["Pro","Enterprise","Enterprise+"],"keywords":{"includes":["sidebar","sidebars","navigation tabs"]}},"tagList":["configOptionRequirements","img","partial","table"],"title":"Navigation tabs","lastModified":"2026-10-01T23:00:57.000Z"}