How to hide integrated TOC?

[ccmao1130]

I have toc.integrate enabled such that the typical TOC for each page is rendered as part of the left side menu. However for one of our pages, we want to hide the TOC for that page in the left side menu while keeping the main navigation menu of our docs. I tried

---
hide:
   - toc
---

but that seemed to have no effect.

Any suggestions?

[mocdaniel]

You can use a CSS <style></style> block like the following on every page where you want to hide the integrated TOC and add the following CSS:

.md-nav__item--active .md-nav__list {
  display: none;
}

The result - two times the same page:

Without TOC

With TOC

It looks like the bottom margin of the page with the omitted TOC is a bit too large in the sidebar, but you can probably fix this with some additional inline CSS on the page in question.

Hope that helps!

[kamilkrzyskow]

Based on the linked issue:

• Can't hide ToC if it's integrated in navigation #2162

The CSS approach is recommended to hide the integration. So I've marked this as the answer.
However, the exact CSS selector is different in the linked Issue, so perhaps it has better results related to the margin.

[kamilkrzyskow]

Hi @ccmao1130,
I think this could be considered a bug, because the hide: - toc only affects the toc generated on the right. So please open up an Issue if you want to follow up on it.

• https://squidfunk.github.io/mkdocs-material/contributing/reporting-a-bug/

The toc.integrate mode uses the md-nav--secondary to display the toc under the nav link, so it uses the mobile version of the toc which is always added to the site.

You could maintain a customization of the template to prevent the integration:

• https://squidfunk.github.io/mkdocs-material/customization/#overriding-partials

mkdocs-material/src/templates/partials/nav.html

Lines 30 to 32 in 646c7ab

	{% if "toc.integrate" in features %}
	{% set class = class ~ " md-nav--integrated" %}
	{% endif %}

You'd replace the partials/nav.html template with an exact copy except for the modified conditional for the integration.

{% if "toc.integrate" in features and not (page.meta and page.meta.hide and "toc" in page.meta.hide) %}
  {% set class = class ~ " md-nav--integrated" %}
{% endif %}

Modifying templates like that adds some maintenance in the future to make sure they're compatible with new versions.
So if that's not ideal, then the CSS customization above is better as it is less invasive.
I've also made a guide for more dynamic template overrides which should lessen the burned on maintaining such overrides:

• How to dynamically override templates with hooks? #5060

[squidfunk]

This is not a bug and not planned for follow up, due to the complexity it adds to navigation, which already has tons of feature toggles to change behavior. Hiding specifically mentions the sidebars, not the navigation inside those sidebars. The naming might not be perfect, but this is due to the fact that the integrated TOC was something that was added much later. Today we'd probably call it primary and secondary navigation, which we might switch to in the future, so something like:

hide:
  - primary
  - secondary

This would be agnostic of the content, which would make more sense, but you know how it is – software grows. Additionally, these topics have been discussed in the following issues:

• Can't hide ToC if it's integrated in navigation #2162 (comment) (explanation)
• When toc.integrate is enabled and toc is hidden in markdown meta then the toc is still visible #2874 (duplicate)

[ccmao1130]

Thanks all for chiming in! I ended up using css to hide it on a specific page as suggested:

<style>
   .md-nav--primary .md-nav__link[for=__toc] > .md-nav__icon,
   .md-nav--primary .md-nav__link[for=__toc] ~ .md-nav {
     display: none;
   }
</style>