Last updated 3 days ago

Customizing headers and footers

Headers

You can customize the headers (top web page navigation) in the siteConfig.yaml file using the nav key.

Example header configuration

nav:
  - label: Home
    page: index.mdx
  - label: Redocly Portal
    page: developer-portal/introduction.md
  - label: External docs
    href: https://google.com
  - search: true

The result looks as follows:

web page headers

Each page linked in the header can have an optional custom icon. This icon is displayed inline in the header, before the page name.

To add a custom icon for a page, provide the path to the icon file in siteConfig.yaml like in the following example:

nav:

  - label: Home
    page: index.mdx
    icon: developer-portal/images/home-icon.png

The website search is enabled by setting search to true. You may place it anywhere within the nav (navigation) key values. Removing it or setting it to false disables the search functionality on the website.

nav:
  - label: Home
    page: index.mdx
    icon: developer-portal/images/home-icon.png
  - label: Redocly Portal
    page: developer-portal/introduction.md
    icon: developer-portal/images/custom-icon.png
  - search: true

In the example above, it is placed in the end of the nav list, so that it is shown to the right of the links in the header.

Place it in the beginning for it to appear on the left:

nav:
  - search: true
  - label: Overview
    page: developer-portal/overview.md

Footers

The footer navigation is shown at the bottom of your web page. It contains the copyright and additional information. Using the footer key in the siteConfig.yaml file, you can adjust footer settings.

Example footer configuration

footer:
  copyrightText: Copyright © Redocly 2019. All right reserved.
  list:
    - label: ReactJS
      href: https://reactjs.org/
    - label: GatsbyJS
      href: https://www.gatsbyjs.org/
    - label: Redocly
      href: https://redoc.ly/
  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

General settings

Setting Description
Copyright Write its contents within the copyrightText. It will be shown as a copyright message.
List A list of links that will be shown in the very bottom footer.
Columns The footer columns are shown above the copyright and footer list content. Each group will be one column.

Links in the header and the footer can be internal (to another page in your developer portal) or external (to any webpage).

To create internal links, use the page key with the path to an internal file as the value. For external links, use the href key with the external page URL as the value.

You can configure links to open in a new browser tab or window by adding special properties to the siteConfig.yaml file.

For internal links, add the external: true property like in the following example.

nav:
  - label: Home
    page: index.mdx
    external: true
footer:
    - group: Support
      items:
        - label: FAQ
          external: true
          page: faq.md

For external links, use either external: true or the target: _blank property.

nav:
  - label: External docs
    href: 'https://example.com/docs'
    external: true
footer:
  columns:
    - group: Legal
      items:
        - label: Terms of Use
          href: 'https://redoc.ly/subscription-agreement/'
          target: _blank
Tip

If your link is created as a JSX element in the React component, you can add inline style: target="_blank".

Example: <Link target="_blank" to={item.link}>{item.label}</Link>

Further customization

The header and footer can be completely customized by creating React components that override the default components.

If you're interested, contact us.