MCL Theme Docs » Configuration » Sidebar

By: Amelia Saiko

2 Apr 2026

Sidebar

This theme has sidebar that is located on the left side of the screen on PC and can be revealed by pressing Menu button on Mobile.

Sidebar is used for displaying Sphinx’s toctree. You can customize the toctree-related settings or add your own content to the sidebar.

Adding custom content

You can override the layout.html template, specifically the sidebar block. The content will be displayed on both PC and Mobile views. Don’t forget to call super to avoid removing the Table of Contents.

layout.html

{% extends "!layout.html" %}

{% block sidebar %}
    {{ super() }}
    
    <div id="ethical_ads">
        <!-- ... -->
    </div>
{% endblock %}

Tweaking Table of Contents

To pick the settings for Table of Contents rendered in the sidebar, you can use the following options:

conf.py

html_theme_options = {
    ...
    "navigation_include_hidden": True,
    "navigation_titles_only": True,
    "navigation_collapse": True,
    "navigation_depth": 3
}

The values displayed above are the default.

Those options essentially mirror the toctree directive options includehidden, titlesonly, collapse and depth. To make sure that your page will appear on the sidebar’s table of contents, ensure that it is either referenced in any of the toctrees on your root page (usually /index.md or /index.rst) or on toctree of another page that is directly or indirectly included.

See also

The concept of Table of Contents and related config options is described in the Sphinx’s own documentation, in this paragraph of Directives Reference.

CSS Variables

The following CSS variables influence the look and feel of Sidebar’s Table of Contents:

Sidebar
Variable	Default value		Description
	Light mode	Dark mode
--mcl-mobile-nav-bg	hwb(0 0% 100% / .7)	hwb(0 0% 100% / .2)	Background color of the revealed sidebar on mobile layout.
Header (collapsed)
Variable	Default value		Description
	Light mode	Dark mode
--mcl-toc-btn-bg	deepslate_isolated_light.png		Background image of header/button that is used when TOC section is inactive. Match it with the border.
--mcl-toc-btn-color	var(--mcl-text-color)		Color used for header/button of inactive TOC section.
--mcl-toc-btn-filter	none		CSS filter applied to the header/button of inactive TOC section.
--mcl-toc-header-color	var(--mcl-text-color-inverse)		Color of text displayed on header/button of inactive TOC section.
--mcl-toc-btn-border-bg	deepslate_polished_light.png		Border image configuration for header/button of inactive TOC section. Match this with background. See also Documentation for Border Images and the border-image Generator.
--mcl-toc-btn-border-widths	12px 12px 12px 12px
--mcl-toc-btn-border-slices	48 48 48 48
Header (open)
Variable	Default value		Description
	Light mode	Dark mode
--mcl-toc-local-heading	"Contents of"		Text of local TOC’s header.
--mcl-toc-btn-active-bg	deepslate_isolated.png		Background image of header/button that is used when TOC section is active. Match it with the border.
--mcl-toc-btn-active-color	var(--mcl-text-color)		Color used for header/button of active TOC section.
--mcl-toc-btn-active-border-bg	deepslate_polished.png		Border image resource used for header/button of inactive TOC section. Match this with background. Note To maintain geometry of the header/button, borders for both active and inactive TOC sections have same configuration, except for the image. To set those, refer to variables listed in Header (collapsed) section.
Body (open)
Variable	Default value		Description
	Light mode	Dark mode
--mcl-toc-body-bg	deepslate_isolated_dark.png		Background image used for body of active TOC section.
--mcl-toc-body-border-bg	deepslate_polished_dark.png		Border image configuration for header/button of active TOC section. Match this with background. See also Documentation for Border Images and the border-image Generator.
--mcl-toc-body-border-widths	0px 4px 4px 4px
--mcl-toc-body-border-slices	16 16 16 16
--mcl-toc-text-color	var(--mcl-text-color-inverse-alt)		Color of text in the body of an open TOC section.
--mcl-toc-text-active-color	var(--mcl-toc-header-color)		Color of link to the currently open page/chapter in the body of an open TOC section.