MkDocs with Material theme does not display the Table of Contents of a page in the right sidebar of the screen

Question

I can not get the table of contents of a page to appear on the right side of the browser screen

• MkDocs 1.4.2
• Python 3.10
• Material Theme 8.5.11
• Windows 10
• Browsers Firefox and Edge

I set up a minimal MkDocs directory with mkdocs.yml as:

site_name: Test Site
dev_addr: 127.0.0.1:44445
theme:
    name: material
      
markdown_extensions:
    - toc
nav:
  - test: 'test/test.md'

The test.md is

[TOC]

# header 1

asdf asf asdf

# header 2

asdf
asdfasdfrrwer

ere
ere

# header 3

fadfs
adsfasdf
adsf

# header 4

sd
dsfasdf

sdff

# header 5

asdf

dfasdf
sdff
fdsfd  fdfd

I expected to see a table of contents on the right side of the browser screen but I don't.

After several days search the internet and reading the documentation I've found no answer to my problem.

I am probably doing something wrong or haven't specified some configuration keyword but I don't know what.

Answer 1

As far as I have understood your requirement "... to get the table of contents of a page to appear on the right side ..." you don't need to add a markdown_extensions: and to use toc and [TOC]. You need this, of course, if you want an additional navigation at the top of your documentation topic. But it's not necessary when having one on the right side as shown below.

Edit your mkdocs.yml to:

site_name: Test Site
dev_addr: 127.0.0.1:44445
theme:
    name: material

nav:
  - Test Header: test/test.md

Edit and fix your markdown syntax in your test.md to:

# header 1

asdf asf asdf

## header 2

asdfasdfrrwer

### header 3

adsfasdf

##### header 4

dsfasdf

###### header 5

fdsfd  fdfd

This is resulting in the following screen. Please note the special case # header level 1. This is not shown in table of contents.