Skip to content
Return to: MkDocs-MaterialX Start Page

Setting up the Footer

Setting up the footer

The footer of your project documentation is a great place to add links to websites or platforms you or your company are using as additional marketing channels, e.g. or , which you can easily configure via mkdocs.yml.

Back to: #Advanced-Configuration

Configuration⚓︎

  • The footer can include links to the previous and next page of the current page.
  • If you wish to enable this behavior, add the following lines to mkdocs.yml:
theme:
  features:
    - navigation.footer

Social links are rendered next to the copyright notice as part of the footer of your project documentation. Add a list of social links in mkdocs.yml with:

extra:
  social:
    - icon: fontawesome/brands/mastodon # (1)!
      link: https://fosstodon.org/@squidfunk

  1. Enter a few keywords to find the perfect icon using our icon search and click on the shortcode to copy it to your clipboard:







    Using Icons in Templates

    When you're [extending the theme] with partials or blocks, you can simply reference any icon that's bundled with the theme with Jinja's include function and wrap it with the .twemoji CSS class:

    <span class="twemoji">
  {% include ".icons/fontawesome/brands/youtube.svg" %} <!-- (1)! -->
</span>

    1. Enter a few keywords to find the perfect icon using our icon search and click on the shortcode to copy it to your clipboard:







      This is exactly what Material for MkDocs does in its templates.

      The following properties are available for each link:

      This property must contain a valid path to any icon bundled with the theme, or the build will not succeed. Some popular choices:

      • – fontawesome/brands/discord
      • – fontawesome/brands/docker
      • – fontawesome/brands/facebook
      • – fontawesome/brands/github
      • – fontawesome/brands/gitlab
      • – fontawesome/brands/instagram
      • – fontawesome/brands/linkedin
      • – fontawesome/brands/mastodon
        automatically adds rel=me
      • – fontawesome/brands/pied-piper-alt
      • – fontawesome/brands/slack
      • – fontawesome/brands/x-twitter
      • – fontawesome/brands/youtube

      This property must be set to a relative or absolute URL including the URI scheme. All URI schemes are supported, including mailto and bitcoin:

      extra:
  social:
    - icon: fontawesome/brands/mastodon
      link: https://fosstodon.org/@squidfunk

      extra:
  social:
    - icon: fontawesome/solid/paper-plane
      link: mailto:<email-address>

      This property is used as the link's title attribute and can be set to a discernable name to improve accessibility:

      extra:
  social:
    - icon: fontawesome/brands/mastodon
      link: https://fosstodon.org/@squidfunk
      name: squidfunk on Fosstodon

      Copyright Notice

      A custom copyright banner can be rendered as part of the footer, which is displayed next to the social links. It can be defined as part of mkdocs.yml:

      copyright: Copyright & copy; 2016 - 2020 Martin Donath

      Generator Notice⚓︎

      Generator Notice

      The footer displays a Made with Material for MkDocs notice to denote how the site was generated. The notice can be removed with the following option viamkdocs.yml:

      extra:
  generator: false

      Please read this before removing the generator notice

      • The subtle Made with Material for MkDocs hint in the footer is one of the reasons why this project is so popular, as it tells the user how the site is generated, helping new users to discover this project.

      • Before removing please consider that you're enjoying the benefits of @squidfunk's work for free, as this project is Open Source and has a permissive license. Thousands of hours went into this project, most of them without any financial return.

      Usage⚓︎

      Hiding prev/next Links

      The footer navigation showing links to the previous and next page can be hidden with the front matter hide property. Add the following lines at the top of a Markdown file:

      ---
hide:
  - footer
---

# Page title
...

      Customization⚓︎

      Custom Copyright

      In order to customize and override the copyright notice, extend the theme and override the copyright.html partial, which normally includes the copyright property set in mkdocs.yml.

      Back to: #Advanced-Configuration