{"ast":{"$$mdtype":"Tag","name":"article","attributes":{},"children":[{"$$mdtype":"Tag","name":"Heading","attributes":{"level":1,"id":"navbar","__idx":0},"children":[{"$$mdtype":"Tag","name":"code","attributes":{},"children":["navbar"]}]},{"$$mdtype":"Tag","name":"ConfigOptionRequirements","attributes":{"products":["Redoc","Revel","Reef","Realm"],"plans":["Pro","Enterprise","Enterprise+"]},"children":[]},{"$$mdtype":"Tag","name":"p","attributes":{},"children":["Configure a navbar for your project."," ","The navbar appears across the top of the published project."," ","You can configure the links and groups of links that appear on the navbar of your site, or hide the navbar altogether."," ","The navbar is a good location for top-level category or frequently-used links."]},{"$$mdtype":"Tag","name":"Heading","attributes":{"level":2,"id":"options","__idx":1},"children":["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":["items"]},{"$$mdtype":"Tag","name":"td","attributes":{},"children":[{"$$mdtype":"Tag","name":"Link","attributes":{"href":"#item-object"},"children":["Item"]}," | ",{"$$mdtype":"Tag","name":"Link","attributes":{"href":"#group-object"},"children":["Group"]}]},{"$$mdtype":"Tag","name":"td","attributes":{},"children":["List of items in the Navbar."]}]},{"$$mdtype":"Tag","name":"tr","attributes":{},"children":[{"$$mdtype":"Tag","name":"td","attributes":{},"children":[{"$$mdtype":"Tag","name":"p","attributes":{},"children":["hide"]}]},{"$$mdtype":"Tag","name":"td","attributes":{},"children":[{"$$mdtype":"Tag","name":"p","attributes":{},"children":["boolean"]}]},{"$$mdtype":"Tag","name":"td","attributes":{},"children":[{"$$mdtype":"Tag","name":"p","attributes":{},"children":["Specifies if the navbar should be hidden."," ","Default: ",{"$$mdtype":"Tag","name":"code","attributes":{},"children":["false"]},"."]},{"$$mdtype":"Tag","name":"p","attributes":{},"children":["The ",{"$$mdtype":"Tag","name":"code","attributes":{},"children":["navbar.hide"]}," option also supports page-level configuration using front matter."]}]}]}]}]}]},{"$$mdtype":"Tag","name":"Heading","attributes":{"level":3,"id":"group-object","__idx":2},"children":["Group object"]},{"$$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":["group"]},{"$$mdtype":"Tag","name":"td","attributes":{},"children":["string"]},{"$$mdtype":"Tag","name":"td","attributes":{},"children":[{"$$mdtype":"Tag","name":"strong","attributes":{},"children":["REQUIRED."]}," ","Name of the group."]}]},{"$$mdtype":"Tag","name":"tr","attributes":{},"children":[{"$$mdtype":"Tag","name":"td","attributes":{},"children":["groupTranslationKey"]},{"$$mdtype":"Tag","name":"td","attributes":{},"children":["string"]},{"$$mdtype":"Tag","name":"td","attributes":{},"children":["Specifies the group name key used for ",{"$$mdtype":"Tag","name":"Link","attributes":{"href":"/docs/realm/config/l10n"},"children":["localization"]},"."]}]},{"$$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":"#item-object"},"children":["Item"]}]},{"$$mdtype":"Tag","name":"td","attributes":{},"children":[{"$$mdtype":"Tag","name":"strong","attributes":{},"children":["REQUIRED."]}," ","List of items."," ","The navbar for the default theme may only have one level of depth to groups."]}]},{"$$mdtype":"Tag","name":"tr","attributes":{},"children":[{"$$mdtype":"Tag","name":"td","attributes":{},"children":["linkedSidebars"]},{"$$mdtype":"Tag","name":"td","attributes":{},"children":["[string]"]},{"$$mdtype":"Tag","name":"td","attributes":{},"children":["List of relative paths to sidebar files."," ","This option adds the navbar item to a sidebar's breadcrumbs."," ","Only effective for top-level navbar items."]}]},{"$$mdtype":"Tag","name":"tr","attributes":{},"children":[{"$$mdtype":"Tag","name":"td","attributes":{},"children":["external"]},{"$$mdtype":"Tag","name":"td","attributes":{},"children":["boolean"]},{"$$mdtype":"Tag","name":"td","attributes":{},"children":["Open link in new browser tab."," ","Default: ",{"$$mdtype":"Tag","name":"code","attributes":{},"children":["false"]},"."]}]},{"$$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":["Relative or absolute path to the file (extension included) which represents the page to link to."," ",{"$$mdtype":"Tag","name":"strong","attributes":{},"children":["Mutually exclusive"]}," with the ",{"$$mdtype":"Tag","name":"code","attributes":{},"children":["href"]}," option."]}]},{"$$mdtype":"Tag","name":"tr","attributes":{},"children":[{"$$mdtype":"Tag","name":"td","attributes":{},"children":["href"]},{"$$mdtype":"Tag","name":"td","attributes":{},"children":["string"]},{"$$mdtype":"Tag","name":"td","attributes":{},"children":["URL to link to."," ",{"$$mdtype":"Tag","name":"strong","attributes":{},"children":["Mutually exclusive"]}," with the ",{"$$mdtype":"Tag","name":"code","attributes":{},"children":["page"]}," option."]}]}]}]}]},{"$$mdtype":"Tag","name":"Heading","attributes":{"level":3,"id":"item-object","__idx":3},"children":["Item object"]},{"$$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":["label"]},{"$$mdtype":"Tag","name":"td","attributes":{},"children":["string"]},{"$$mdtype":"Tag","name":"td","attributes":{},"children":["Link text displayed for the item."]}]},{"$$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":["Link text key for the item used for internationalization."]}]},{"$$mdtype":"Tag","name":"tr","attributes":{},"children":[{"$$mdtype":"Tag","name":"td","attributes":{},"children":["external"]},{"$$mdtype":"Tag","name":"td","attributes":{},"children":["boolean"]},{"$$mdtype":"Tag","name":"td","attributes":{},"children":["Open link in new browser tab."," ","Default: ",{"$$mdtype":"Tag","name":"code","attributes":{},"children":["false"]},"."]}]},{"$$mdtype":"Tag","name":"tr","attributes":{},"children":[{"$$mdtype":"Tag","name":"td","attributes":{},"children":["linkedSidebars"]},{"$$mdtype":"Tag","name":"td","attributes":{},"children":["[string]"]},{"$$mdtype":"Tag","name":"td","attributes":{},"children":["List of relative paths to sidebar files."," ","This option adds navbar item to sidebar's breadcrumbs."," ","Only effective for top-level navbar items."]}]},{"$$mdtype":"Tag","name":"tr","attributes":{},"children":[{"$$mdtype":"Tag","name":"td","attributes":{},"children":["additionalProps"]},{"$$mdtype":"Tag","name":"td","attributes":{},"children":["object"]},{"$$mdtype":"Tag","name":"td","attributes":{},"children":["Additional properties for the navbar item."," ","Pass arbitrary data that can be accessed in custom theme components."," ","To learn how to customize theme components, see: ",{"$$mdtype":"Tag","name":"Link","attributes":{"href":"/docs/realm/customization/eject-components"},"children":["Eject components"]},"."]}]}]}]}]},{"$$mdtype":"Tag","name":"Heading","attributes":{"level":3,"id":"icon-object","__idx":4},"children":["Icon object"]},{"$$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":["srcSet"]},{"$$mdtype":"Tag","name":"td","attributes":{},"children":["string"]},{"$$mdtype":"Tag","name":"td","attributes":{},"children":["Comma-separated list of icon file paths and corresponding color modes."," ","When configured, the icon changes when the user switches between color modes."]}]}]}]}]},{"$$mdtype":"Tag","name":"Heading","attributes":{"level":2,"id":"examples","__idx":5},"children":["Examples"]},{"$$mdtype":"Tag","name":"Heading","attributes":{"level":3,"id":"simple-navigation","__idx":6},"children":["Simple navigation"]},{"$$mdtype":"Tag","name":"p","attributes":{},"children":["The following is an example configuration for a simple flat navbar."]},{"$$mdtype":"Tag","name":"CodeBlock","attributes":{"data-language":"yaml","data-title":"redocly.yaml","header":{"title":"redocly.yaml","controls":{"copy":{}}},"source":"navbar:\n  items:\n    - page: index.md\n      label: Home\n    - page: docs/getting-started.md\n      label: Getting Started\n    - page: api-reference.yaml\n      label: API Reference\n    - label: Support\n      href: https://support.example.com\n      external: true\n","lang":"yaml"},"children":[]},{"$$mdtype":"Tag","name":"p","attributes":{},"children":["The following is a screenshot of that navbar."]},{"$$mdtype":"Tag","name":"Image","attributes":{"src":"/content-assets/1-level-navbar-6f7849ba51391ad0.png","alt":"1 level Navbar","framed":true,"withLightbox":true},"children":[]},{"$$mdtype":"Tag","name":"Heading","attributes":{"level":3,"id":"complete-navigation-setup","__idx":7},"children":["Complete navigation setup"]},{"$$mdtype":"Tag","name":"p","attributes":{},"children":["The following example shows a comprehensive navbar configuration for a documentation site with multiple sections, localization support, and external links:"]},{"$$mdtype":"Tag","name":"CodeBlock","attributes":{"data-language":"yaml","data-title":"redocly.yaml","header":{"title":"redocly.yaml","controls":{"copy":{}}},"source":"navbar:\n  items:\n    - page: index.md\n      label: Home\n      labelTranslationKey: nav.home\n    - group: Documentation\n      groupTranslationKey: nav.docs\n      items:\n        - page: docs/getting-started.md\n          label: Getting Started\n          labelTranslationKey: nav.getting-started\n        - page: docs/guides/index.md\n          label: Guides\n          labelTranslationKey: nav.guides\n        - page: docs/tutorials/index.md\n          label: Tutorials\n    - group: API Reference\n      items:\n        - page: users-api.yaml\n          label: Users API\n        - page: orders-api.yaml\n          label: Orders API\n        - page: webhooks-api.yaml\n          label: Webhooks API\n    - page: changelog.md\n      label: Changelog\n    - label: Support\n      href: https://support.example.com\n      external: true\n      icon: ./images/support-icon.svg\n","lang":"yaml"},"children":[]},{"$$mdtype":"Tag","name":"Heading","attributes":{"level":3,"id":"multi-product-navigation","__idx":8},"children":["Multi-product navigation"]},{"$$mdtype":"Tag","name":"p","attributes":{},"children":["For sites with multiple products, organize content using groups and linked sidebars:"]},{"$$mdtype":"Tag","name":"CodeBlock","attributes":{"data-language":"yaml","data-title":"redocly.yaml","header":{"title":"redocly.yaml","controls":{"copy":{}}},"source":"navbar:\n  items:\n    - page: index.md\n      label: Home\n    - group: Products\n      items:\n        - page: product-a/index.md\n          label: Product A\n          linkedSidebars:\n            - product-a/sidebars.yaml\n        - page: product-b/index.md\n          label: Product B\n          linkedSidebars:\n            - product-b/sidebars.yaml\n    - page: support.md\n      label: Support\n","lang":"yaml"},"children":[]},{"$$mdtype":"Tag","name":"Heading","attributes":{"level":3,"id":"dropdown-menu-with-separators","__idx":9},"children":["Dropdown menu with separators"]},{"$$mdtype":"Tag","name":"p","attributes":{},"children":["The following is an example of a dropdown menu with visual separators for better organization:"]},{"$$mdtype":"Tag","name":"CodeBlock","attributes":{"data-language":"yaml","data-title":"redocly.yaml","header":{"title":"redocly.yaml","controls":{"copy":{}}},"source":"navbar:\n  items:\n    - group: Products\n      items:\n        - page: platform/index.md\n          label: Platform\n        - page: api-gateway/index.md\n          label: API Gateway\n        - separator: Developer Tools\n        - page: cli/index.md\n          label: CLI\n        - page: sdk/index.md\n          label: SDK\n    - label: Pricing\n      page: pricing.md\n    - label: Enterprise\n      page: enterprise.md\n","lang":"yaml"},"children":[]},{"$$mdtype":"Tag","name":"p","attributes":{},"children":["The following is the screenshot of the navbar."]},{"$$mdtype":"Tag","name":"Image","attributes":{"src":"/content-assets/dropdown-menu-144656fcae75b04c.png","alt":"Dropdown menu","framed":true,"withLightbox":true},"children":[]},{"$$mdtype":"Tag","name":"Heading","attributes":{"level":3,"id":"hide-navbar","__idx":10},"children":["Hide navbar"]},{"$$mdtype":"Tag","name":"p","attributes":{},"children":["To hide the navbar globally or on specific pages:"]},{"$$mdtype":"Tag","name":"CodeBlock","attributes":{"data-language":"yaml","data-title":"redocly.yaml","header":{"title":"redocly.yaml","controls":{"copy":{}}},"source":"# Hide navbar on all pages\nnavbar:\n  hide: true\n","lang":"yaml"},"children":[]},{"$$mdtype":"Tag","name":"p","attributes":{},"children":["Or in page front matter:"]},{"$$mdtype":"Tag","name":"CodeBlock","attributes":{"data-language":"yaml","header":{"controls":{"copy":{}}},"source":"---\nnavbar:\n  hide: true\n---\n","lang":"yaml"},"children":[]},{"$$mdtype":"Tag","name":"Heading","attributes":{"level":3,"id":"additional-properties","__idx":11},"children":["Additional properties"]},{"$$mdtype":"Tag","name":"p","attributes":{},"children":["Use ",{"$$mdtype":"Tag","name":"code","attributes":{},"children":["additionalProps"]}," to add custom data to navbar items:"]},{"$$mdtype":"Tag","name":"CodeBlock","attributes":{"data-language":"yaml","data-title":"redocly.yaml","header":{"title":"redocly.yaml","controls":{"copy":{}}},"source":"navbar:\n  items:\n    - page: index.md\n      label: Home\n      additionalProps:\n        description: Main landing page\n","lang":"yaml"},"children":[]},{"$$mdtype":"Tag","name":"p","attributes":{},"children":["Custom theme components can access these properties to display additional information or implement custom behavior."]},{"$$mdtype":"Tag","name":"Heading","attributes":{"level":2,"id":"resources","__idx":12},"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"},"children":["Build navigation"]}]}," - Overview of all navigation components and patterns for creating comprehensive site navigation structures"]},{"$$mdtype":"Tag","name":"li","attributes":{},"children":[{"$$mdtype":"Tag","name":"strong","attributes":{},"children":[{"$$mdtype":"Tag","name":"Link","attributes":{"href":"/docs/realm/config/footer"},"children":["Footer configuration"]}]}," - Configure the footer navigation with links, copyright information, and organizational elements"]},{"$$mdtype":"Tag","name":"li","attributes":{},"children":[{"$$mdtype":"Tag","name":"strong","attributes":{},"children":[{"$$mdtype":"Tag","name":"Link","attributes":{"href":"/docs/realm/config/logo"},"children":["Logo configuration"]}]}," - Configure the logo that appears in the navbar with brand customization and display options"]},{"$$mdtype":"Tag","name":"li","attributes":{},"children":[{"$$mdtype":"Tag","name":"strong","attributes":{},"children":[{"$$mdtype":"Tag","name":"Link","attributes":{"href":"/docs/realm/config/l10n"},"children":["Localization"]}]}," - Configure navbar labels and text for multiple languages to support international audiences"]},{"$$mdtype":"Tag","name":"li","attributes":{},"children":[{"$$mdtype":"Tag","name":"strong","attributes":{},"children":[{"$$mdtype":"Tag","name":"Link","attributes":{"href":"/docs/realm/config/front-matter-config"},"children":["Front matter configuration options"]}]}," - Use front matter to show or hide the navbar on individual pages for custom page layouts"]},{"$$mdtype":"Tag","name":"li","attributes":{},"children":[{"$$mdtype":"Tag","name":"strong","attributes":{},"children":[{"$$mdtype":"Tag","name":"Link","attributes":{"href":"/docs/realm/config"},"children":["Configuration options"]}]}," - Explore other project configuration options for comprehensive documentation and platform customization"]}]}]},"frontmatter":{"products":["Redoc","Revel","Reef","Realm"],"plans":["Pro","Enterprise","Enterprise+"],"description":"Configure a navbar for your project."},"tagList":["configOptionRequirements","html","img","partial","table"],"title":"navbar","lastModified":"2026-10-01T23:00:57.000Z"}