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.
The default footer included in @redocly/theme can be configured using the options below.
| Option | Type | Description |
|---|---|---|
hide | boolean | Specifies whether the footer is hidden. Defaults to The |
| 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. |
| copyrightText | string | Copyright text appears at the base of the footer. |
| Option | Type | Description |
|---|---|---|
| group | string | REQUIRED. Specifies the name of the column. |
| groupTranslationKey | string | Specifies the translation key for the column name used for localization. |
| items | Item | REQUIRED. List of items in the footer column. |
| Option | Type | Description |
|---|---|---|
| page | string | CONDITIONALLY 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. |
| href | string | CONDITIONALLY 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. |
| label | string | Link text displayed for the item. |
| labelTranslationKey | string | Sets the translation key for an item's link text. Used for localization. |
| external | boolean | Configures the item to open in a new tab and adds an external link symbol next to entry. Defaults to false. |
| icon | string or srcSet | A Font Awesome or relative path to icon image file. Font Awesome icons can be prefixed with type: duotone, solid, regular or brands. Example: book, duotone book, brands github, ./images/config-icon.svg. |
| Option | Type | Description |
|---|---|---|
| srcSet | string | Comma-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").
A basic footer with copyright text and a few links:
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: trueThe 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:
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: brands github
- label: Twitter
href: 'https://twitter.com/example'
external: true
icon: brands twitter
- label: LinkedIn
href: 'https://linkedin.com/company/example'
external: true
icon: brands linkedinEach 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:
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: trueTo hide the footer globally or on specific pages:
# Hide footer on all pages
footer:
hide: trueOr in page front matter:
---
footer:
hide: true
---By grouping the links, users can quickly locate the section and content they are looking for.
- Navigation elements - Overview of all navigation components and patterns for comprehensive site navigation design
- Navbar configuration - Configure the top navigation bar to complement your footer design and provide consistent site navigation
- Sidebar configuration - Configure the left navigation panel for comprehensive documentation navigation structure
- Custom CSS styles - Add custom styling that can be applied to your footer for brand consistency and visual appeal
- Front matter configuration - Use front matter to show or hide the footer on individual pages for flexible content presentation
- Configuration options - Explore other project configuration options for comprehensive documentation customization