# `footer`

Customize the footer for the pages in your project.
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.

### Footer configuration

| Option | Type | Description |
|  --- | --- | --- |
| hide
 | boolean
 | Specifies whether the footer is hidden.
Defaults to `false`.
 |
| items | [[Group](#group-object) | [Item](#item-object)] | 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. |


#### Group object

| 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](/docs/realm/content/localization/localize-labels#localize-user-defined-ui-elements). |
| items | [Item](#item-object) | **REQUIRED.**
List of items in the footer column. |


#### Item object

| 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](/docs/realm/content/localization/localize-labels#localize-user-defined-ui-elements). |
| 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](#icon-object) | Either:- A [Font Awesome](https://fontawesome.com/icons) icon name.
Realm has the following icon packs built in: Classic Regular, Classic Solid, Duotone Solid, and Classic Brands.
The icons automatically adjust their colors when users change the color mode.
To add an icon from the Classic Regular pack, you can provide the icon name only or prefix the name with `regular`.
To add an icon from other built-in packs, prefix the icon name with: `solid` (for Classic Solid), `duotone` (for Duotone Solid), or `brands` (for Classic Brands).
**Examples:** `book`, `duotone book`, `brands github`
Using other prefixes, including the `fa-` prefix, causes the icon to not render.
- Relative path to an icon image file.
**Example:** `./images/config-icon.svg`

 |


##### Icon object

| 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").

## Examples

### Simple footer

A basic footer with copyright text and a few links:


```yaml 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
```

### Complete footer setup

The columns of the footer are configured using the `items` property, where each entry is a [Group](#group-object) or [Item](#item-object) object.
The following example shows a comprehensive footer with multiple sections, localization support, and various link types:


```yaml 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: 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 linkedin
```

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

### Footer with icons and color modes

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


```yaml 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
```

### Hide footer

To hide the footer globally or on specific pages:


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

Or in page front matter:


```yaml
---
footer:
  hide: true
---
```

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

## Resources

- **[Navigation elements](/docs/realm/navigation)** - Overview of all navigation components and patterns for comprehensive site navigation design
- **[Navbar configuration](/docs/realm/config/navbar)** - Configure the top navigation bar to complement your footer design and provide consistent site navigation
- **[Sidebar configuration](/docs/realm/navigation/sidebars)** - Configure the left navigation panel for comprehensive documentation navigation structure
- **[Custom CSS styles](/docs/realm/branding/customize-styles)** - Add custom styling that can be applied to your footer for brand consistency and visual appeal
- **[Front matter configuration](/docs/realm/config/front-matter-config)** - Use front matter to show or hide the footer on individual pages for flexible content presentation
- **[Configuration options](/docs/realm/config)** - Explore other project configuration options for comprehensive documentation customization