Skip to content
Last updated

footer

The footer is a section at the bottom of your documentation that contains copyright information, links, or other elements you want available on every page.

Options

The default footer included in @redocly/theme can be configured using the options below.

OptionTypeDescription

hide

boolean

Specifies whether the footer is hidden. Defaults to false.

The footer.hide option also supports page-level configuration using front matter.

items[Group | Item]An array where each entry represents a column in the footer. The array elements can be either an item or a group.
copyrightTextstringCopyright text appears at the base of the footer.

Group object

OptionTypeDescription
groupstringREQUIRED. Specifies the name of the column.
groupTranslationKeystringSpecifies the translation key for the column name used for localization.
itemsItemREQUIRED. List of items in the footer column.

Item object

OptionTypeDescription
pagestringCONDITIONALLY REQUIRED.* Path to the file (extension included) that represents the page to link to. If no label is provided, the link text matches the page's level 1 heading.
hrefstringCONDITIONALLY REQUIRED.* URL to link to. Works with absolute and relative URLs. If no label is provided, the link text matches the value used for href.
labelstringLink text displayed for the item.
labelTranslationKeystringSets the translation key for an item's link text. Used for localization.
externalbooleanConfigures the item to open in a new tab and adds an external link symbol next to entry. Defaults to false.
iconstring or srcSetPath to icon image file. Shown on left side of the entry.
Icon object
OptionTypeDescription
srcSetstringComma-separated list of icon file paths and corresponding color modes. When configured, the icon changes when the user switches between color modes.

* Footer links must use either the page or href option ("mutually exclusive").

Examples

A basic footer with copyright text and a few links:

redocly.yaml
footer:
  copyrightText: "© 2024 Example Company. All rights reserved."
  items:
    - page: privacy-policy.md
      label: Privacy Policy
    - page: terms-of-service.md
      label: Terms of Service
    - href: "https://support.example.com"
      label: Support
      external: true

The columns of the footer are configured using the items property, where each entry is a Group or Item object. The following example shows a comprehensive footer with multiple sections, localization support, and various link types:

redocly.yaml
footer:
  copyrightText: "© 2024 Example Company. All rights reserved."
  items:
    # Column 1: Documentation
    - group: Documentation
      groupTranslationKey: footer.docs
      items:
        - page: docs/getting-started.md
          label: Getting Started
          labelTranslationKey: footer.getting-started
        - page: docs/guides/index.md
          label: Guides
        - page: api-reference.yaml
          label: API Reference
    # Column 2: Company
    - group: Company
      groupTranslationKey: footer.company
      items:
        - page: company/about-us.md
          label: About Us
        - href: "https://example.com/careers"
          label: Careers
          external: true
        - href: "https://blog.example.com"
          label: Blog
          external: true
    # Column 3: Legal & Support
    - group: Legal
      items:
        - page: legal/privacy-policy.md
          label: Privacy Policy
        - page: legal/terms-of-service.md
          label: Terms of Service
        - href: "https://support.example.com"
          label: Support Center
          external: true
    # Column 4: Social Media
    - group: Connect
      items:
        - label: GitHub
          href: 'https://github.com/example'
          external: true
          icon: ./images/github-icon.svg
        - label: Twitter
          href: 'https://twitter.com/example'
          external: true
          icon: ./images/twitter-icon.svg
        - label: LinkedIn
          href: 'https://linkedin.com/company/example'
          external: true
          icon: ./images/linkedin-icon.svg

Each entry in the footer's items configures a distinct column. Using groups is a common approach for organizing related links.

The following configuration shows a footer with icons that change based on the current color mode:

redocly.yaml
footer:
  copyrightText: "© 2024 Redocly. All rights reserved."
  items:
    - group: Products
      items:
        - page: products/platform.md
          label: Platform
          icon:
            srcSet: "./images/platform-red.svg light, ./images/platform-blue.svg dark"
        - page: products/cli.md
          label: CLI
          icon:
            srcSet: "./images/cli-red.svg light, ./images/cli-blue.svg dark"
    - group: Resources
      items:
        - label: Documentation
          href: 'https://redocly.com/docs'
          external: true
        - label: Community
          href: 'https://community.redocly.com'
          external: true
    - group: Social
      items:
        - label: GitHub
          href: 'https://github.com/redocly'
          external: true
        - label: Twitter
          href: 'https://twitter.com/redocly'
          external: true

To hide the footer globally or on specific pages:

redocly.yaml
# Hide footer on all pages
footer:
  hide: true

Or in page front matter:

---
footer:
  hide: true
---

By grouping the links, users can quickly locate the section and content they are looking for.

 
Next page