Skip to content

Adding Links to the Footer in Material for MkDocs

Introduction

I wanted to add links of my imprint and privacy policy to the footer of this wiki. However, I found out that there is no configuration-only way to do this in Material for MkDocs.

This how-to shows you how to do this with a custom partial.

Step 1: Add Partial

Save the following partial to overrides/partials/copyright.html:

{# base partial from:
github.com/squidfunk/mkdocs-material/material/templates/partials/copyright.html
#}
<div class="md-copyright">
    {% if config.copyright %}
    <div class="md-copyright__highlight">
        {{ config.copyright }}
        {% for link in config.extra.footer_links %}
        :: <a href="{{ link.href }}" target="_blank" rel="noopener">{{ link.text }}</a>
        {% endfor %}
    </div>
    {% endif %}
    {% if not config.extra.generator == false %}
    Made with
    <a href="https://squidfunk.github.io/mkdocs-material/" target="_blank" rel="noopener">
        Material for MkDocs
    </a>
    {% endif %}
</div>

This partial iterates over your links in the mkdocs.yml and adds them as <a> tags that opens them in a new tab.

In your mkdocs.yml, add your display texts and links to your extras.

extra:
  footer_links:
    - text: "Privacy Policy"
      href: "https://anter.dev/privacy"
    - text: "Imprint"
      href: "https://anter.dev/imprint"

And that's it!