Navigation sidebar/TOC not showing on right side of the screen

[djgm501]

For some reason I can not get the TOC to show in the navigation side bar (right side of the screen).

I have searched the documentation and stackoverflow for several days trying to find the answer, without luck. Perhaps someone can help me.

I am using:

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

I created a small test mkdocs directory and a test makedown file.

See below for the resulting web page.

The mkdocs.yml file is:

site_name: Test Site
dev_addr: 127.0.0.1:44445
theme:
    name: material
    features:
      - toc.follow
      - toc.integrate
      - navigation.expand
      
markdown_extensions:
    - toc
    - attr_list
    - pymdownx.emoji:
        emoji_index: !!python/name:materialx.emoji.twemoji
        emoji_generator: !!python/name:materialx.emoji.to_svg
nav:
  - test: 'test/test.md'

The test page is:

[TOC]

:smile: zxz

:material-fast-forward: Fast forward

# 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

[kamilkrzyskow]

Hi, @djgm501
There are several issues here. The are 2 TOCs being generated in 2 different ways.

[TOC]

this generates a TOC in the content in the middle, like you have, the dotted unordered list. This TOC supports multiple H1 # headings.
You don't want to use this. Remove this.

---

toc.integrate
This feature joins the left nav with the toc, so it can't be on the right. Remove that feature.

The TOC you want to have doesn't support multiple H1 headings. Modify the .md files so that there is a structure like this:

#
##
##
##
###

and so on. Put the H1 heading at the top of the file too ✌️

[djgm501]

Thank you very much! That solved my problem.

I don't remember seeing anywhere that this feature would only work for markdown files that have only one level one
header and that it had to be top of the file.

Again, thanks