{"ast":{"$$mdtype":"Tag","name":"article","attributes":{},"children":[{"$$mdtype":"Tag","name":"Heading","attributes":{"level":1,"id":"customize-navbars-and-footers","__idx":0},"children":["Customize navbars and footers"]},{"$$mdtype":"Tag","name":"Admonition","attributes":{"type":"danger","name":"Deprecated docs"},"children":[{"$$mdtype":"Tag","name":"p","attributes":{},"children":["The developer portal beta is ",{"$$mdtype":"Tag","name":"Link","attributes":{"href":"/product-timelines"},"children":["approaching end of life"]},"."]},{"$$mdtype":"Tag","name":"p","attributes":{},"children":["Use Realm and Reunite instead. Read the ",{"$$mdtype":"Tag","name":"Link","attributes":{"href":"/docs-legacy/developer-portal/migrate-from-legacy-portal"},"children":["migration guide"]},"."]}]},{"$$mdtype":"Tag","name":"p","attributes":{},"children":["Redocly Developer portal supports optional navbar and footer elements that you can customize to help your readers access the information they need. You can control the two main aspects of these elements:"]},{"$$mdtype":"Tag","name":"ol","attributes":{},"children":[{"$$mdtype":"Tag","name":"li","attributes":{},"children":[{"$$mdtype":"Tag","name":"strong","attributes":{},"children":["Navbar and footer contents"]}," - by modifying the ",{"$$mdtype":"Tag","name":"Link","attributes":{"href":"/docs-legacy/developer-portal/configuration/siteconfig"},"children":["siteConfig.yaml file"]}]},{"$$mdtype":"Tag","name":"li","attributes":{},"children":[{"$$mdtype":"Tag","name":"strong","attributes":{},"children":["Navbar and footer appearance"]}," - by modifying the ",{"$$mdtype":"Tag","name":"Link","attributes":{"href":"/docs-legacy/developer-portal/configuration/theme"},"children":["theme.ts file"]}]}]},{"$$mdtype":"Tag","name":"p","attributes":{},"children":["This guide covers the basic customization steps for your portal navbar and footer."]},{"$$mdtype":"Tag","name":"Heading","attributes":{"level":2,"id":"portal-navbar","__idx":1},"children":["Portal navbar"]},{"$$mdtype":"Tag","name":"p","attributes":{},"children":["To display a top navigation bar in your portal, you must define its contents in the ",{"$$mdtype":"Tag","name":"Link","attributes":{"href":"/docs-legacy/developer-portal/configuration/siteconfig/nav"},"children":[{"$$mdtype":"Tag","name":"code","attributes":{},"children":["nav"]}," section of the siteConfig.yaml file"]},". If this section is not present in your ",{"$$mdtype":"Tag","name":"code","attributes":{},"children":["siteConfig.yaml"]}," file, the navbar is not visible in the portal."]},{"$$mdtype":"Tag","name":"Heading","attributes":{"level":3,"id":"modify-navbar-contents","__idx":2},"children":["Modify navbar contents"]},{"$$mdtype":"Tag","name":"p","attributes":{},"children":["The contents of your portal navbar are displayed in the same order as they are listed in the ",{"$$mdtype":"Tag","name":"code","attributes":{},"children":["siteConfig.yaml"]}," file, from left to right."]},{"$$mdtype":"Tag","name":"p","attributes":{},"children":["Your portal navbar can contain links to internal portal pages or to any external resource. To create internal links, use the ",{"$$mdtype":"Tag","name":"code","attributes":{},"children":["page"]}," key with the path to an internal file as the value. For external links, use the ",{"$$mdtype":"Tag","name":"code","attributes":{},"children":["href"]}," key with the external page URL as the value. It's recommended to enclose the URLs in quotation marks."]},{"$$mdtype":"Tag","name":"p","attributes":{},"children":["Every link in the navbar must have a ",{"$$mdtype":"Tag","name":"code","attributes":{},"children":["label"]}," assigned to it. The ",{"$$mdtype":"Tag","name":"code","attributes":{},"children":["label"]}," contents are displayed in the navbar as the link text."]},{"$$mdtype":"Tag","name":"p","attributes":{},"children":[{"$$mdtype":"Tag","name":"strong","attributes":{},"children":["Example siteConfig.yaml file with a ",{"$$mdtype":"Tag","name":"code","attributes":{},"children":["nav"]}," section"]}]},{"$$mdtype":"Tag","name":"CodeBlock","attributes":{"data-language":"yaml","header":{"controls":{"copy":{}}},"source":"seo:\n  title: Example Developer Portal\n  description: Learn how to work with Example APIs\nnav:\n  - label: Training exercises\n    page: developer-portal/index.md\n  - label: Example page\n    page: developer-portal/markdown.md\n  - label: External docs\n    href: 'https://google.com'\n","lang":"yaml"},"children":[]},{"$$mdtype":"Tag","name":"p","attributes":{},"children":["The result looks as follows:"]},{"$$mdtype":"Tag","name":"p","attributes":{},"children":[{"$$mdtype":"Tag","name":"Image","attributes":{"src":"/content-assets/portal-navbar-d425d051a0fb46d3.png","alt":"Portal navbar"},"children":[]}]},{"$$mdtype":"Tag","name":"Heading","attributes":{"level":3,"id":"enable-portal-search","__idx":3},"children":["Enable portal search"]},{"$$mdtype":"Tag","name":"p","attributes":{},"children":["To enable the search functionality in your portal, set ",{"$$mdtype":"Tag","name":"code","attributes":{},"children":["search"]}," to ",{"$$mdtype":"Tag","name":"code","attributes":{},"children":["true"]}," anywhere within the ",{"$$mdtype":"Tag","name":"code","attributes":{},"children":["nav"]}," section. Removing this option or setting it to ",{"$$mdtype":"Tag","name":"code","attributes":{},"children":["false"]}," disables the search functionality altogether."]},{"$$mdtype":"Tag","name":"CodeBlock","attributes":{"data-language":"yaml","header":{"controls":{"copy":{}}},"source":"nav:\n  - label: Training exercises\n    page: developer-portal/index.md\n  - label: Example page\n    page: developer-portal/markdown.md\n  - label: External docs\n    href: 'https://google.com'\n  - search: true\n","lang":"yaml"},"children":[]},{"$$mdtype":"Tag","name":"p","attributes":{},"children":[{"$$mdtype":"Tag","name":"Image","attributes":{"src":"/content-assets/portal-navbar-search-c5f36cd28aee43ea.png","alt":"Portal navbar with the search bar on the right"},"children":[]}]},{"$$mdtype":"Tag","name":"p","attributes":{},"children":["In the example above, ",{"$$mdtype":"Tag","name":"code","attributes":{},"children":["search"]}," is placed at the end of the ",{"$$mdtype":"Tag","name":"code","attributes":{},"children":["nav"]}," list, so that it is shown to the right of the links in the navbar."]},{"$$mdtype":"Tag","name":"p","attributes":{},"children":["Place it in the beginning for it to appear on the left:"]},{"$$mdtype":"Tag","name":"CodeBlock","attributes":{"data-language":"yaml","header":{"controls":{"copy":{}}},"source":"nav:\n  - search: true\n  - label: Training exercises\n    page: developer-portal/index.md\n  - label: Example page\n    page: developer-portal/markdown.md\n  - label: External docs\n    href: 'https://google.com'\n","lang":"yaml"},"children":[]},{"$$mdtype":"Tag","name":"p","attributes":{},"children":[{"$$mdtype":"Tag","name":"Image","attributes":{"src":"/content-assets/portal-navbar-search-left-02df0eaa2fd0082f.png","alt":"Portal navbar with the search bar on the left"},"children":[]}]},{"$$mdtype":"Tag","name":"Heading","attributes":{"level":3,"id":"add-custom-icons-to-navbar-links","__idx":4},"children":["Add custom icons to navbar links"]},{"$$mdtype":"Tag","name":"p","attributes":{},"children":["Every link in the navbar can have an optional custom icon. This icon is displayed inline in the navbar, before the link text."]},{"$$mdtype":"Tag","name":"p","attributes":{},"children":["To add a custom icon to a link, use the ",{"$$mdtype":"Tag","name":"code","attributes":{},"children":["icon"]}," key and provide the path to the icon file in ",{"$$mdtype":"Tag","name":"code","attributes":{},"children":["siteConfig.yaml"]}," like in the following example:"]},{"$$mdtype":"Tag","name":"CodeBlock","attributes":{"data-language":"yaml","header":{"controls":{"copy":{}}},"source":"nav:\n  - label: Training exercises\n    page: developer-portal/index.md\n  - label: Example page\n    page: developer-portal/markdown.md\n  - label: Example with an icon\n    page: developer-portal/search.md\n    icon: images/redocly-icon-white.png\n  - label: External docs\n    href: 'https://google.com'\n  - search: true\n","lang":"yaml"},"children":[]},{"$$mdtype":"Tag","name":"p","attributes":{},"children":[{"$$mdtype":"Tag","name":"Image","attributes":{"src":"/content-assets/portal-navbar-link-custom-icon-22ad0b0ed87aa6bc.png","alt":"Portal navbar with a custom icon link"},"children":[]}]},{"$$mdtype":"Tag","name":"Heading","attributes":{"level":3,"id":"add-a-logo-to-the-navbar","__idx":5},"children":["Add a logo to the navbar"]},{"$$mdtype":"Tag","name":"p","attributes":{},"children":["To display your logo in the portal navbar, you must:"]},{"$$mdtype":"Tag","name":"ul","attributes":{},"children":[{"$$mdtype":"Tag","name":"li","attributes":{},"children":[{"$$mdtype":"Tag","name":"p","attributes":{},"children":["add some links to the navbar ",{"$$mdtype":"Tag","name":"Link","attributes":{"href":"/docs-legacy/developer-portal/configuration/siteconfig/nav"},"children":["in the ",{"$$mdtype":"Tag","name":"code","attributes":{},"children":["nav"]}," section of the siteConfig.yaml file"]}]}]},{"$$mdtype":"Tag","name":"li","attributes":{},"children":[{"$$mdtype":"Tag","name":"p","attributes":{},"children":["provide the path to the logo image file ",{"$$mdtype":"Tag","name":"Link","attributes":{"href":"/docs-legacy/developer-portal/configuration/siteconfig/logo"},"children":["in the top level of the siteConfig.yaml file"]}]}]}]},{"$$mdtype":"Tag","name":"p","attributes":{},"children":["By default, the logo is displayed in the left side of the navbar, above the sidebar."]},{"$$mdtype":"Tag","name":"p","attributes":{},"children":[{"$$mdtype":"Tag","name":"strong","attributes":{},"children":["Example siteConfig.yaml file with a logo and ",{"$$mdtype":"Tag","name":"code","attributes":{},"children":["nav"]}," section"]}]},{"$$mdtype":"Tag","name":"CodeBlock","attributes":{"data-language":"yaml","header":{"controls":{"copy":{}}},"source":"seo:\n  title: Example Developer Portal\n  description: Learn how to work with Example APIs\nlogo:\n  image: ./images/logos/logo-example.png\nnav:\n  - label: Training exercises\n    page: developer-portal/index.md\n  - label: Example page\n    page: developer-portal/markdown.md\n  - label: Example with an icon\n    page: developer-portal/search.md\n    icon: images/redocly-icon-white.png\n  - label: External docs\n    href: 'https://google.com'\n  - search: true\n","lang":"yaml"},"children":[]},{"$$mdtype":"Tag","name":"p","attributes":{},"children":[{"$$mdtype":"Tag","name":"Image","attributes":{"src":"/content-assets/portal-navbar-logo-e22ede9aaed9aaf7.png","alt":"Portal navbar with the logo displayed"},"children":[]}]},{"$$mdtype":"Tag","name":"Heading","attributes":{"level":3,"id":"customize-the-navbar-theme","__idx":6},"children":["Customize the navbar theme"]},{"$$mdtype":"Tag","name":"p","attributes":{},"children":["To change the appearance of your portal navbar, modify the theming options ",{"$$mdtype":"Tag","name":"Link","attributes":{"href":"/docs-legacy/developer-portal/configuration/theme"},"children":["in the theme.ts file"]}," in the root of your developer portal project."]},{"$$mdtype":"Tag","name":"p","attributes":{},"children":["All color values in the ",{"$$mdtype":"Tag","name":"code","attributes":{},"children":["theme.ts"]}," file can be provided in any of the common color formats (hexadecimal value, RGB, HSL, human-friendly color names)."]},{"$$mdtype":"Tag","name":"Heading","attributes":{"level":4,"id":"change-the-navbar-background-color","__idx":7},"children":["Change the navbar background color"]},{"$$mdtype":"Tag","name":"p","attributes":{},"children":["The portal navbar supports three types of background color customization:"]},{"$$mdtype":"Tag","name":"ul","attributes":{},"children":[{"$$mdtype":"Tag","name":"li","attributes":{},"children":["plain color"]},{"$$mdtype":"Tag","name":"li","attributes":{},"children":["single-color gradient"]},{"$$mdtype":"Tag","name":"li","attributes":{},"children":["two-color gradient"]}]},{"$$mdtype":"Tag","name":"p","attributes":{},"children":["For a plain navbar background, set the same value for ",{"$$mdtype":"Tag","name":"code","attributes":{},"children":["colors.navbar.main"]}," and ",{"$$mdtype":"Tag","name":"code","attributes":{},"children":["colors.navbar.gradient"]}," theming options. This disables the gradient."]},{"$$mdtype":"Tag","name":"CodeBlock","attributes":{"data-language":"ts","header":{"controls":{"copy":{}}},"source":"export const defaultTheme = {\n  colors: {\n    tonalOffset: 0.2,\n    navbar: {\n      main: '#227a88',\n      gradient: '#227a88',\n    },\n  },\n};\n","lang":"ts"},"children":[]},{"$$mdtype":"Tag","name":"p","attributes":{},"children":["For a single-color gradient, set only the ",{"$$mdtype":"Tag","name":"code","attributes":{},"children":["colors.navbar.main"]},". This generates a left-to-right linear gradient from the specified color."]},{"$$mdtype":"Tag","name":"p","attributes":{},"children":["For a gradient transition from one color to another, set different values for ",{"$$mdtype":"Tag","name":"code","attributes":{},"children":["colors.navbar.main"]}," and ",{"$$mdtype":"Tag","name":"code","attributes":{},"children":["colors.navbar.gradient"]},". Specified colors are used as color stops in a left-to-right linear gradient."]},{"$$mdtype":"Tag","name":"Tabs","attributes":{"size":"medium"},"children":[{"$$mdtype":"Tag","name":"TabItemFragment","attributes":{"label":"Before - single-color","disable":false},"children":[{"$$mdtype":"Tag","name":"CodeBlock","attributes":{"data-language":"ts","header":{"controls":{"copy":{}}},"source":"export const defaultTheme = {\n  colors: {\n    tonalOffset: 0.2,\n    navbar: {\n      main: '#227a88',\n    },\n  },\n};\n","lang":"ts"},"children":[]}]},{"$$mdtype":"Tag","name":"TabItemFragment","attributes":{"label":"After - two-color","disable":false},"children":[{"$$mdtype":"Tag","name":"CodeBlock","attributes":{"data-language":"ts","header":{"controls":{"copy":{}}},"source":"export const defaultTheme = {\n  colors: {\n    tonalOffset: 0.2,\n    navbar: {\n      main: 'black',\n      gradient: 'blue',\n    },\n  },\n};\n","lang":"ts"},"children":[]}]}]},{"$$mdtype":"Tag","name":"p","attributes":{},"children":[{"$$mdtype":"Tag","name":"Image","attributes":{"src":"/content-assets/portal-navbar-background-21740b686efb4f6d.png","alt":"Before and after comparison of navbar background color"},"children":[]}]},{"$$mdtype":"Tag","name":"Heading","attributes":{"level":4,"id":"change-the-color-and-font-of-navbar-items","__idx":8},"children":["Change the color and font of navbar items"]},{"$$mdtype":"Tag","name":"p","attributes":{},"children":["The option ",{"$$mdtype":"Tag","name":"code","attributes":{},"children":["colors.navbar.contrastText"]}," controls the color of navbar links. Use the options ",{"$$mdtype":"Tag","name":"code","attributes":{},"children":["navbar.activeBgColor"]}," and ",{"$$mdtype":"Tag","name":"code","attributes":{},"children":["navbar.activeTextColor"]}," to change the background and text colors of active (selected) links in the navbar."]},{"$$mdtype":"Tag","name":"p","attributes":{},"children":["The ",{"$$mdtype":"Tag","name":"code","attributes":{},"children":["navbar.activeTextDecoration"]}," option lets you add emphasis to selected links in the navbar by using ",{"$$mdtype":"Tag","name":"Link","attributes":{"href":"https://developer.mozilla.org/en-US/docs/Web/CSS/text-decoration"},"children":["standard text-decoration CSS property syntax"]},"."]},{"$$mdtype":"Tag","name":"CodeBlock","attributes":{"data-language":"ts","header":{"controls":{"copy":{}}},"source":"export const defaultTheme = {\n  colors: {\n    navbar: {\n      main: 'black',\n      contrastText: 'white',\n    },\n  },\n  navbar: {\n    activeBgColor: 'orange',\n    activeTextColor: 'white',\n    activeTextDecoration: 'dashed underline',\n  },\n};\n","lang":"ts"},"children":[]},{"$$mdtype":"Tag","name":"p","attributes":{},"children":[{"$$mdtype":"Tag","name":"Image","attributes":{"src":"/content-assets/portal-navbar-colors-faf26004e932fa7e.png","alt":"Before and after comparison of navbar link styling"},"children":[]}]},{"$$mdtype":"Tag","name":"p","attributes":{},"children":["Navbar links don't have dedicated font-related theming options, so you can't control their fonts directly. By default, navbar links inherit the font family from the ",{"$$mdtype":"Tag","name":"code","attributes":{},"children":["typography.headings.fontFamily"]}," option. Modifying this option changes the navbar link font, but it also affects other elements in the portal."]},{"$$mdtype":"Tag","name":"CodeBlock","attributes":{"data-language":"ts","header":{"controls":{"copy":{}}},"source":"export const defaultTheme = {\n  typography: {\n    headings: {\n      fontFamily: 'Ubuntu',\n    },\n  },\n};\n","lang":"ts"},"children":[]},{"$$mdtype":"Tag","name":"Heading","attributes":{"level":4,"id":"adjust-the-spacing-between-navbar-items","__idx":9},"children":["Adjust the spacing between navbar items"]},{"$$mdtype":"Tag","name":"p","attributes":{},"children":["The options ",{"$$mdtype":"Tag","name":"code","attributes":{},"children":["navbar.marginHorizontal"]}," and ",{"$$mdtype":"Tag","name":"code","attributes":{},"children":["navbar.marginVertical"]}," control the spacing between items in the navbar (links, search bar - if enabled)."]},{"$$mdtype":"Tag","name":"p","attributes":{},"children":["Use the option ",{"$$mdtype":"Tag","name":"code","attributes":{},"children":["navbar.borderRadius"]}," to set rounded corners for selected navbar links and for the search bar."]},{"$$mdtype":"Tag","name":"p","attributes":{},"children":["To add more space between the navbar and the text in the main content area, use the ",{"$$mdtype":"Tag","name":"code","attributes":{},"children":["components.contentWrapper.paddingVertical"]}," option. Keep in mind that this option also controls the spacing between the main content area and the footer."]},{"$$mdtype":"Tag","name":"CodeBlock","attributes":{"data-language":"ts","header":{"controls":{"copy":{}}},"source":"export const defaultTheme = {\n  components: {\n    contentWrapper: {\n      paddingVertical: '70px',\n    },\n  },\n  navbar: {\n    borderRadius: '20px',\n    marginHorizontal: '10px',\n    marginVertical: '10px',\n  },\n};\n","lang":"ts"},"children":[]},{"$$mdtype":"Tag","name":"p","attributes":{},"children":[{"$$mdtype":"Tag","name":"Image","attributes":{"src":"/content-assets/portal-navbar-spacing-8513240f03386581.png","alt":"Before and after comparison of navbar item spacing"},"children":[]}]},{"$$mdtype":"Tag","name":"Heading","attributes":{"level":4,"id":"modify-the-search-icon","__idx":10},"children":["Modify the search icon"]},{"$$mdtype":"Tag","name":"p","attributes":{},"children":["The ",{"$$mdtype":"Tag","name":"code","attributes":{},"children":["components.search"]}," object lets you change the search icon color and replace the default search icon with a custom one. You must format your custom icon as a set of SVG properties inside ",{"$$mdtype":"Tag","name":"code","attributes":{},"children":["<svg> ... </svg>"]}," tags. The search functionality must be enabled in the portal for these theming options to apply."]},{"$$mdtype":"Tag","name":"CodeBlock","attributes":{"data-language":"ts","header":{"controls":{"copy":{}}},"source":"export const defaultTheme = {\n  components: {\n    search: {\n      icon: '<svg xmlns=\"http://www.w3.org/2000/svg\" fill=\"#000\" viewBox=\"0 0 451.847 451.847\" width=\"12px\" height=\"12px\" ><path d=\"M225.923 354.706c-8.098 0-16.195-3.092-22.369-9.263L9.27 151.157c-12.359-12.359-12.359-32.397 0-44.751 12.354-12.354 32.388-12.354 44.748 0l171.905 171.915 171.906-171.909c12.359-12.354 32.391-12.354 44.744 0 12.365 12.354 12.365 32.392 0 44.751L248.292 345.449c-6.177 6.172-14.274 9.257-22.369 9.257z\" /></svg>',\n      iconColor: 'orange',\n    },\n  },\n};\n","lang":"ts"},"children":[]},{"$$mdtype":"Tag","name":"p","attributes":{},"children":[{"$$mdtype":"Tag","name":"Image","attributes":{"src":"/content-assets/portal-navbar-search-icon-0be8f59816447419.png","alt":"Before and after comparison of search icon styling"},"children":[]}]},{"$$mdtype":"Tag","name":"Heading","attributes":{"level":4,"id":"adjust-the-logo-image-size","__idx":11},"children":["Adjust the logo image size"]},{"$$mdtype":"Tag","name":"p","attributes":{},"children":["The ",{"$$mdtype":"Tag","name":"code","attributes":{},"children":["logo"]}," object lets you control how the logo image scales within the navbar. Note that modifying these options may result in distortion of the logo image. Changing the logo image height also affects the total height of the navbar."]},{"$$mdtype":"Tag","name":"CodeBlock","attributes":{"data-language":"ts","header":{"controls":{"copy":{}}},"source":"export const defaultTheme = {\n  logo: {\n    height: '100px',\n    maxHeight: '100%',\n    maxWidth: '120%',\n    }\n  }\n}\n","lang":"ts"},"children":[]},{"$$mdtype":"Tag","name":"p","attributes":{},"children":[{"$$mdtype":"Tag","name":"Image","attributes":{"src":"/content-assets/portal-navbar-logo-size-2e3ef191ec6f6c62.png","alt":"Before and after comparison of logo image size"},"children":[]}]},{"$$mdtype":"Tag","name":"Heading","attributes":{"level":2,"id":"portal-footer","__idx":12},"children":["Portal footer"]},{"$$mdtype":"Tag","name":"p","attributes":{},"children":["To display a footer (bottom navigation bar) in your portal, you must define the footer contents in the ",{"$$mdtype":"Tag","name":"Link","attributes":{"href":"/docs-legacy/developer-portal/configuration/siteconfig/footer"},"children":[{"$$mdtype":"Tag","name":"code","attributes":{},"children":["footer"]}," section of the siteConfig.yaml file"]},". If this section is not present in your ",{"$$mdtype":"Tag","name":"code","attributes":{},"children":["siteConfig.yaml"]}," file, the footer is not visible in the portal."]},{"$$mdtype":"Tag","name":"Heading","attributes":{"level":3,"id":"modify-footer-contents","__idx":13},"children":["Modify footer contents"]},{"$$mdtype":"Tag","name":"p","attributes":{},"children":["The contents of your portal footer are displayed in the same order as they are listed in the ",{"$$mdtype":"Tag","name":"code","attributes":{},"children":["siteConfig.yaml"]}," file."]},{"$$mdtype":"Tag","name":"p","attributes":{},"children":["Your portal footer can contain:"]},{"$$mdtype":"Tag","name":"ul","attributes":{},"children":[{"$$mdtype":"Tag","name":"li","attributes":{},"children":["links to internal portal pages or to any external resource."]},{"$$mdtype":"Tag","name":"li","attributes":{},"children":["custom copyright text. By default, this text is always displayed at the very bottom of the footer, under the links."]}]},{"$$mdtype":"Tag","name":"p","attributes":{},"children":["To create internal links, use the ",{"$$mdtype":"Tag","name":"code","attributes":{},"children":["page"]}," key with the path to an internal file as the value. For external links, use the ",{"$$mdtype":"Tag","name":"code","attributes":{},"children":["href"]}," key with the external page URL as the value. It's recommended to enclose the URLs in quotation marks."]},{"$$mdtype":"Tag","name":"p","attributes":{},"children":["Every link in the footer must have a ",{"$$mdtype":"Tag","name":"code","attributes":{},"children":["label"]}," assigned to it. The ",{"$$mdtype":"Tag","name":"code","attributes":{},"children":["label"]}," contents are displayed in the footer as the link text."]},{"$$mdtype":"Tag","name":"p","attributes":{},"children":["Footer links should be grouped into columns. Each ",{"$$mdtype":"Tag","name":"code","attributes":{},"children":["group"]}," is displayed as one column, and can have a custom title."]},{"$$mdtype":"Tag","name":"p","attributes":{},"children":[{"$$mdtype":"Tag","name":"strong","attributes":{},"children":["Example siteConfig.yaml file with a ",{"$$mdtype":"Tag","name":"code","attributes":{},"children":["footer"]}," section"]}]},{"$$mdtype":"Tag","name":"CodeBlock","attributes":{"data-language":"yaml","header":{"controls":{"copy":{}}},"source":"footer:\n  copyrightText: Copyright © Redocly 2019-2021. All rights reserved.\n  columns:\n    - group: Legal\n      items:\n        - label: Terms of Use\n          href: 'https://redocly.com/subscription-agreement/'\n        - label: Privacy Notice\n          href: 'https://redocly.com/privacy-policy/'\n        - label: Cookie Notice\n          href: 'https://redocly.com/privacy-policy/'\n    - group: Support\n      items:\n        - label: FAQ\n          page: faq.md\n        - label: Contact us\n          page: contact.md\n","lang":"yaml"},"children":[]},{"$$mdtype":"Tag","name":"p","attributes":{},"children":[{"$$mdtype":"Tag","name":"Image","attributes":{"src":"/content-assets/portal-footer-3d51bf7524b41b18.png","alt":"Portal footer with links in two columns"},"children":[]}]},{"$$mdtype":"Tag","name":"Admonition","attributes":{"type":"warning","name":"Important"},"children":[{"$$mdtype":"Tag","name":"p","attributes":{},"children":["Custom icons for links are supported only in the portal navbar, not in the footer. You cannot use the ",{"$$mdtype":"Tag","name":"code","attributes":{},"children":["icon"]}," key with footer links."]}]},{"$$mdtype":"Tag","name":"Heading","attributes":{"level":3,"id":"customize-the-footer-theme","__idx":14},"children":["Customize the footer theme"]},{"$$mdtype":"Tag","name":"p","attributes":{},"children":["To change the appearance of your portal footer, modify the theming options ",{"$$mdtype":"Tag","name":"Link","attributes":{"href":"/docs-legacy/developer-portal/configuration/theme"},"children":["in the theme.ts file"]}," in the root of your developer portal project."]},{"$$mdtype":"Tag","name":"p","attributes":{},"children":["All color values in the ",{"$$mdtype":"Tag","name":"code","attributes":{},"children":["theme.ts"]}," file can be provided in any of the common color formats (hexadecimal value, RGB, HSL, human-friendly color names)."]},{"$$mdtype":"Tag","name":"Heading","attributes":{"level":4,"id":"change-the-footer-background-color","__idx":15},"children":["Change the footer background color"]},{"$$mdtype":"Tag","name":"p","attributes":{},"children":["Use the ",{"$$mdtype":"Tag","name":"code","attributes":{},"children":["colors.footer.main"]}," option to set a custom background color for the footer."]},{"$$mdtype":"Tag","name":"CodeBlock","attributes":{"data-language":"ts","header":{"controls":{"copy":{}}},"source":"export const defaultTheme = {\n  colors: {\n    footer: {\n      main: 'black',\n    },\n  },\n};\n","lang":"ts"},"children":[]},{"$$mdtype":"Tag","name":"p","attributes":{},"children":[{"$$mdtype":"Tag","name":"Image","attributes":{"src":"/content-assets/portal-footer-background-e101f81c0d6eb420.png","alt":"Before and after comparison of footer background color"},"children":[]}]},{"$$mdtype":"Tag","name":"Heading","attributes":{"level":4,"id":"change-the-color-and-font-of-footer-items","__idx":16},"children":["Change the color and font of footer items"]},{"$$mdtype":"Tag","name":"p","attributes":{},"children":["The ",{"$$mdtype":"Tag","name":"code","attributes":{},"children":["colors.footer.contrastText"]}," option controls the color of all items in the footer, including links, column names, and copyright text."]},{"$$mdtype":"Tag","name":"CodeBlock","attributes":{"data-language":"ts","header":{"controls":{"copy":{}}},"source":"export const defaultTheme = {\n  colors: {\n    footer: {\n      contrastText: 'orange',\n      main: 'black',\n    },\n  },\n};\n","lang":"ts"},"children":[]},{"$$mdtype":"Tag","name":"p","attributes":{},"children":[{"$$mdtype":"Tag","name":"Image","attributes":{"src":"/content-assets/portal-footer-colors-1978dedba2c7760f.png","alt":"Before and after comparison of footer item color"},"children":[]}]},{"$$mdtype":"Tag","name":"p","attributes":{},"children":["Footer items don't have dedicated font-related theming options, so you can't control their fonts directly. By default, footer links inherit the font family from the ",{"$$mdtype":"Tag","name":"code","attributes":{},"children":["typography.headings.fontFamily"]}," option, and the size from ",{"$$mdtype":"Tag","name":"code","attributes":{},"children":["typography.fontSize"]},". Copyright text inherits the font family from ",{"$$mdtype":"Tag","name":"code","attributes":{},"children":["typography.fontFamily"]},", and the size from ",{"$$mdtype":"Tag","name":"code","attributes":{},"children":["typography.fontSize"]},"."]},{"$$mdtype":"Tag","name":"p","attributes":{},"children":["Modifying these options changes the footer text, but it also affects many other elements in the portal."]},{"$$mdtype":"Tag","name":"CodeBlock","attributes":{"data-language":"ts","header":{"controls":{"copy":{}}},"source":"export const defaultTheme = {\n  typography: {\n    fontFamily: 'serif',\n    fontSize: '18px',\n    headings: {\n      fontFamily: 'Ubuntu',\n    },\n  },\n};\n","lang":"ts"},"children":[]},{"$$mdtype":"Tag","name":"Heading","attributes":{"level":2,"id":"open-navbar-and-footer-links-in-a-new-tab-or-window","__idx":17},"children":["Open navbar and footer links in a new tab or window"]},{"$$mdtype":"Tag","name":"p","attributes":{},"children":["You can make navbar and footer links open in a new browser tab or window by adding special properties to each link in the ",{"$$mdtype":"Tag","name":"code","attributes":{},"children":["siteConfig.yaml"]}," file."]},{"$$mdtype":"Tag","name":"p","attributes":{},"children":["For internal links (",{"$$mdtype":"Tag","name":"code","attributes":{},"children":["page"]}," key), add the ",{"$$mdtype":"Tag","name":"code","attributes":{},"children":["external: true"]}," property. For external links, use either ",{"$$mdtype":"Tag","name":"code","attributes":{},"children":["external: true"]}," or the ",{"$$mdtype":"Tag","name":"code","attributes":{},"children":["target: _blank"]}," property."]},{"$$mdtype":"Tag","name":"p","attributes":{},"children":["Links with ",{"$$mdtype":"Tag","name":"code","attributes":{},"children":["external: true"]}," automatically get an indicator icon displayed next to the link text. This applies to internal and external links, in navbar and footer alike."]},{"$$mdtype":"Tag","name":"p","attributes":{},"children":[{"$$mdtype":"Tag","name":"strong","attributes":{},"children":["Example siteConfig.yaml file with ",{"$$mdtype":"Tag","name":"code","attributes":{},"children":["nav"]}," and ",{"$$mdtype":"Tag","name":"code","attributes":{},"children":["footer"]}," sections"]}]},{"$$mdtype":"Tag","name":"CodeBlock","attributes":{"data-language":"yaml","header":{"controls":{"copy":{}}},"source":"nav:\n  - label: Example with an icon\n    page: developer-portal/search.md\n    icon: images/redocly-icon-white.png\n  - label: External docs\n    href: 'https://google.com'\n    external: true\n  - search: true\n\nfooter:\n  - group: Legal\n      items:\n        - label: Terms of Use\n          href: 'https://redocly.com/subscription-agreement/'\n          target: _blank\n        - label: Privacy Notice\n          href: 'https://redocly.com/privacy-policy/'\n          external: true\n        - label: Cookie Notice\n          href: 'https://redocly.com/privacy-policy/'\n          external: true\n","lang":"yaml"},"children":[]},{"$$mdtype":"Tag","name":"p","attributes":{},"children":["In the screenshots below, note how the link with ",{"$$mdtype":"Tag","name":"code","attributes":{},"children":["target: _blank"]}," doesn't have the indicator icon, while all links with ",{"$$mdtype":"Tag","name":"code","attributes":{},"children":["external: true"]}," have the icon."]},{"$$mdtype":"Tag","name":"p","attributes":{},"children":[{"$$mdtype":"Tag","name":"strong","attributes":{},"children":["Portal navbar with a link that opens in a new tab"]}]},{"$$mdtype":"Tag","name":"p","attributes":{},"children":[{"$$mdtype":"Tag","name":"Image","attributes":{"src":"/content-assets/portal-navbar-external-links-f3d5ffe406a8e5d7.png","alt":"Portal navbar with links that open in a new tab"},"children":[]}]},{"$$mdtype":"Tag","name":"p","attributes":{},"children":[{"$$mdtype":"Tag","name":"strong","attributes":{},"children":["Portal footer with a link that opens in a new tab"]}]},{"$$mdtype":"Tag","name":"p","attributes":{},"children":[{"$$mdtype":"Tag","name":"Image","attributes":{"src":"/content-assets/portal-footer-external-links-ee5ae9d32b34f7f1.png","alt":"Portal footer with links that open in a new tab"},"children":[]}]},{"$$mdtype":"Tag","name":"Admonition","attributes":{"type":"info","name":"Tip"},"children":[{"$$mdtype":"Tag","name":"p","attributes":{},"children":["If your link is created as a JSX element in the React component, you can add inline style: target=\"_blank\"."]},{"$$mdtype":"Tag","name":"p","attributes":{},"children":["Example:"," ",{"$$mdtype":"Tag","name":"code","attributes":{},"children":["<Link target=\"_blank\" to={item.link}>{item.label}</Link>"]}]}]},{"$$mdtype":"Tag","name":"Heading","attributes":{"level":2,"id":"further-customization","__idx":18},"children":["Further customization"]},{"$$mdtype":"Tag","name":"p","attributes":{},"children":["The navbar and footer can be completely customized by creating React components that override the default components."]},{"$$mdtype":"Tag","name":"p","attributes":{},"children":["If you're interested, contact us."]}]},"frontmatter":{"seo":{"title":"Set up navbars and footers"},"excludeFromSearch":true},"tagList":["admonition","partial","tab","tabs"],"title":"Set up navbars and footers","lastModified":"2025-05-28T16:01:32.000Z"}