Skip to content

Footnotes

Footnotes allow you to add references, citations, and supplementary information without interrupting the main flow of your documentation.

Overview

The footnotes extension provides:

  • Reference-style footnotes - Define once, reference anywhere
  • Inline footnotes - Quick notes without separate definitions
  • Multiple references - Reference the same footnote multiple times
  • Rich content - Include formatted text, lists, and code blocks
  • Automatic numbering - Let Markdown handle the numbering
  • Accessible markup - Semantic HTML with ARIA attributes

Configuration

Enable footnotes in your mkdocs.yml:

markdown_extensions:
  - footnotes

Basic Usage

Simple Footnotes

Create a footnote reference with [^label] and define it with [^label]: definition:

This is a statement that needs a citation[^1].

[^1]: This is the footnote definition.

Result:

This is a statement that needs a citation1.

Multiple References

Reference the same footnote multiple times:

First reference[^note] and second reference[^note].

[^note]: This footnote is referenced twice.

Result:

First reference2 and second reference2.

Inline Footnotes

Create footnotes inline without separate definitions:

Here's an inline footnote^[This is defined right in the text].

Result:

Here's an inline footnote^[This is defined right in the text].

Advanced Usage

Multi-paragraph Footnotes

Include multiple paragraphs in a footnote:

Complex topic[^multi].

[^multi]: This is the first paragraph of the footnote.

    This is the second paragraph. Note the indentation.

    This is the third paragraph.

Result:

Complex topic3.

Footnotes with Lists

Include lists in footnotes:

See the requirements[^list].

[^list]: The following items are required:

    - Python 3.8 or higher
    - MkDocs 1.5.0 or higher
    - Material theme 9.0 or higher

    Make sure all dependencies are installed.

Result:

See the requirements4.

Footnotes with Code

Include code blocks in footnotes:

Example implementation[^code].

[^code]: Here's how to implement it:

    ```python
    def calculate(x, y):
        return x + y
    ```

    Call it with `calculate(5, 3)`.

Result:

Example implementation5.

Include links in footnotes:

See the official documentation[^docs].

[^docs]: Visit [Material for MkDocs](https://squidfunk.github.io/mkdocs-material/) for more information.

Result:

See the official documentation6.

Styling

CSS Classes

Footnotes generate the following CSS classes:

  • .footnote - The footnote reference link
  • .footnote-ref - The reference number
  • .footnote-backref - The back reference arrow
  • .footnotes - The footnote definitions container

Custom Styling

Add custom styles for footnotes:

/* Footnote references */
.md-typeset .footnote {
  color: var(--md-primary-fg-color);
  font-weight: bold;
}

/* Footnote definitions */
.md-typeset .footnotes {
  font-size: 0.85rem;
  border-top: 1px solid var(--md-default-fg-color--lightest);
  margin-top: 2rem;
  padding-top: 1rem;
}

/* Hover effect */
.md-typeset .footnote:hover {
  color: var(--md-accent-fg-color);
}

Best Practices

1. Descriptive Labels

Use meaningful labels for footnotes:

✅ Good:
[^python-docs], [^rfc7231], [^smith2023]

❌ Bad:
[^1], [^a], [^footnote]

2. Placement

Place footnote definitions near their first reference:

✅ Good:
First paragraph with reference[^ref1].

[^ref1]: Definition immediately after paragraph.

Second paragraph continues...

3. Content Guidelines

Keep footnotes concise and relevant:

✅ Good:
[^version]: Requires Python 3.8 or higher

❌ Bad:
[^version]: This requires Python 3.8 or higher because...
[500 words of explanation]

4. Academic Citations

Use consistent citation format:

Recent studies[^johnson2023] show improved performance.

[^johnson2023]: Johnson, A. et al. (2023). "Performance
    Improvements in Documentation Systems." *Tech Journal*,
    45(3), 123-145. DOI: 10.1234/tj.2023.45.3.123

Common Patterns

References Section

Group all footnotes at the end:

## Main Content

Various claims[^1] and statements[^2] with evidence[^3].

## References

[^1]: First source
[^2]: Second source  
[^3]: Third source

Glossary Integration

Combine with definition lists:

API[^api-note]
:   Application Programming Interface

[^api-note]: See RFC 2616 for HTTP API standards

Citation Styles

Different citation formats:

APA Style[^apa]:
[^apa]: Smith, J. (2023). *Title*. Publisher.

MLA Style[^mla]:
[^mla]: Smith, John. *Title*. Publisher, 2023.

Chicago Style[^chicago]:
[^chicago]: Smith, John. *Title*. City: Publisher, 2023.

Integration with Other Features

With Admonitions

!!! note "Important[^note-ref]"
    This admonition includes a footnote reference.

[^note-ref]: Additional context for the note

With Tables

Feature Version7 Status
Python 3.8+ Required
MkDocs 1.5+8 Required

With Code Annotations

def process(data):  # Process the data[^process]
    return result

# [^process]: Uses advanced algorithm

Accessibility

Footnotes include proper ARIA attributes:

<!-- Reference -->
<sup>
  <a href="#fn:1" class="footnote-ref" role="doc-noteref">1</a>
</sup>

<!-- Definition -->
<li id="fn:1" role="doc-footnote">
  <p>Footnote text
    <a href="#fnref:1" class="footnote-backref"
       role="doc-backlink"></a>
  </p>
</li>

Troubleshooting

Common Issues

  1. Undefined references: Ensure all [^label] have corresponding [^label]: definitions
  2. Formatting breaks: Maintain consistent indentation in multi-line footnotes
  3. Numbering issues: Let Markdown handle numbering automatically
  4. Missing footnotes: Check for typos in labels

Debug Tips

Enable verbose output to debug footnote issues:

plugins:
  - search:
      verbose: true

Examples

Documentation with Citations

MkDocs uses Python[^python] for its build system. The
Material theme[^material] adds extensive features. Version
9.0[^v9] introduced significant improvements.

[^python]: Python Software Foundation. python.org
[^material]: Created by Martin Donath. MIT licensed.
[^v9]: Released January 2024 with 50+ new features.

Tutorial with Notes

## Installation

Install MkDocs[^install] using pip:

```bash
pip install mkdocs-material

Configure your site10 in mkdocs.yml.

See Also


  1. This is the footnote definition. 

  2. This footnote is referenced twice. 

  3. This is the first paragraph of the footnote.

    This is the second paragraph. Note the indentation.

    This is the third paragraph. 

  4. The following items are required:

    • Python 3.8 or higher
    • MkDocs 1.5.0 or higher
    • Material theme 9.0 or higher

    Make sure all dependencies are installed. 

  5. Here's how to implement it:

    def calculate(x, y):
        return x + y
    

    Call it with calculate(5, 3)

  6. Visit Material for MkDocs for more information. 

  7. Minimum supported versions 

  8. Material theme requires MkDocs 1.5.0 

  9. Requires Python 3.8+. Use virtual environment. 

  10. See configuration guide for all options. ```