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

The columns of the footer are configured using the items property, where each entry is a Group or Item object, as in the following example:

redocly.yaml
footer:
  copyrightText: Example Company © 2024
  items:
    # Column 1
    - page: example/privacy-policy.md
      label: Example Privacy Policy
    # Column 2
    - group: About Us
      items:
        - page: company/about-us.md
          label: About Us
        - href: "https://example.com/careers"
          label: Join our team

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

The following configuration shows a more complex footer example with multiple groups, external links and an icon:

footer:
  copyrightText: Copyright © Redocly 2024.
  items:
    - group: Services
      items:
        - page: services/gift-shop.md
          label: Gift Shop
          icon:
            srcSet: "./images/gift-shop-red.svg light, ./images/gift-shop-blue.svg dark"
        - page: services/cafeteria.md
          label: Cafeteria
    - group: Legal
      items:
        - label: Privacy Notice
          href: 'https://example.com/museum-privacy-policy/'
        - label: Exhibit Policy
          href: 'https://example.com/museum-exhibit-policy/'
    - group: Social
      items:
        - label: Facebook
          href: 'https://facebook.com'
        - label: Youtube
          href: 'https://youtube.com'
        - label: Twitter
          href: 'https://twitter.com'

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