Mkdocs-material: Expand all navigation / table of contents items

[Akkadius]

Expand Left Nav Pane Items By Default

Is this configurable in anyway? Right now everything is collapsed until opened

Awesome work BTW

[squidfunk]

Nope, it's currently not possible via configuration, but you could hack something together with CSS. Try to search the issue tracker, there are some directions on how to achieve that.

[Akkadius]

Roger!

Whipped something together quick

Just used an extra.js file

document.addEventListener("DOMContentLoaded", function() {
    var nav = document.getElementsByClassName("md-nav");
    for(var i = 0; i < nav.length; i++) {
        if (nav.item(i).getAttribute("data-md-level")) {
            nav.item(i).style.display = 'block';
            nav.item(i).style.overflow = 'visible';
        }
    }

    var nav = document.getElementsByClassName("md-nav__toggle");
    for(var i = 0; i < nav.length; i++) {
       nav.item(i).checked = true;
    }
});

Thanks for the awesome work on this theme!

[squidfunk]

Thanks for sharing your hack!

[Akkadius]

Just for completeness - I ended up making an adjustment because this actually would have weird side affects to the nav layout in mobile. Every single menu from every single tab would appear.

document.addEventListener("DOMContentLoaded", function() {
    load_navpane();
});

function load_navpane() {
    var width = window.innerWidth;
    if (width <= 1200) {
        return;
    }

    var nav = document.getElementsByClassName("md-nav");
    for(var i = 0; i < nav.length; i++) {
        if (typeof nav.item(i).style === "undefined") {
            continue;
        }

        if (nav.item(i).getAttribute("data-md-level") && nav.item(i).getAttribute("data-md-component")) {
            nav.item(i).style.display = 'block';
            nav.item(i).style.overflow = 'visible';
        }
    }

    var nav = document.getElementsByClassName("md-nav__toggle");
    for(var i = 0; i < nav.length; i++) {
       nav.item(i).checked = true;
    }
}

[stefanclayster]

Great snippet! Would love if it was added as an option natively.

[tonglil]

Is this still working for folks?
Added this to extra.js and updated in mkdocs.yml but not seeing it take effect.
Noticed this comment was from v2.7.

[gribilly]

Can confirm this still works for me. Make sure you set your extra_javascript block in your mkdocs.yml. Also make sure you don't have duplicate extra_javascript blocks in your mkdocs.yml.

[kruzfuz]

Can also confirm that this works for me. However, when tabs are activated, empty lines are added for every entry in the nav section of the mkdocs.yml. Has anybody else experienced that?

[pfilbin90]

Hi this doesn't appear to work anymore. I'm on the latest version of mkdocs-material-5.4.0.

Does anybody have any updated code that works with this version?

Thanks

[lprichar]

@Akkadius's solution works for me, but it does cause a flash on the screen as it loads, and little animations of the chevrons on each navigation. Closing this issue seems premature as a native solution would provide a clean UI consistent with the rest of the otherwise beautiful material site.

[squidfunk]

I've added this feature on the roadmap of Material for MkDocs Insiders – it's now part of the _Prairie Fire_ funding goal.

[squidfunk]

Good news – just implemented a new feature flag called navigation.expand, which will expand everything on page load.

• How to enable navigation expansion
• How to get Material for MkDocs Insiders

The solution, which involves minimal JavaScript, will also __keep mobile navigation intact__ and __doesn't flash in collapsed state on page load__. It renders expanded right away, but only when the navigation is not part of the drawer.

Demo

... and desktop vs. mobile: