diff --git a/CHANGELOG b/CHANGELOG
index 933245941..fa9b2dda1 100644
--- a/CHANGELOG
+++ b/CHANGELOG
@@ -1,3 +1,7 @@
+mkdocs-material-6.1.4+insiders-1.10.0 (2020-11-15)
+
+ * Added support for integrating table of contents into navigation
+
mkdocs-material-6.1.4+insiders-1.9.0 (2020-11-07)
* Added support for hiding navigation and table of contents on any page
diff --git a/docs/assets/screenshots/hide-navigation-toc.png b/docs/assets/screenshots/hide-navigation-toc.png
index 7f94fbeea..6df4e9aef 100644
Binary files a/docs/assets/screenshots/hide-navigation-toc.png and b/docs/assets/screenshots/hide-navigation-toc.png differ
diff --git a/docs/assets/screenshots/hide-navigation.png b/docs/assets/screenshots/hide-navigation.png
index 923631720..d1b797033 100644
Binary files a/docs/assets/screenshots/hide-navigation.png and b/docs/assets/screenshots/hide-navigation.png differ
diff --git a/docs/assets/screenshots/hide-toc.png b/docs/assets/screenshots/hide-toc.png
index 8851770b6..faed0dd57 100644
Binary files a/docs/assets/screenshots/hide-toc.png and b/docs/assets/screenshots/hide-toc.png differ
diff --git a/docs/assets/screenshots/navigation-expand.png b/docs/assets/screenshots/navigation-expand.png
index ff285ee29..34db4c760 100644
Binary files a/docs/assets/screenshots/navigation-expand.png and b/docs/assets/screenshots/navigation-expand.png differ
diff --git a/docs/assets/screenshots/navigation-sections.png b/docs/assets/screenshots/navigation-sections.png
index f4eccbfc9..c846b1913 100644
Binary files a/docs/assets/screenshots/navigation-sections.png and b/docs/assets/screenshots/navigation-sections.png differ
diff --git a/docs/assets/screenshots/navigation-tabs.png b/docs/assets/screenshots/navigation-tabs.png
index 983ba457e..2fa1bcf4e 100644
Binary files a/docs/assets/screenshots/navigation-tabs.png and b/docs/assets/screenshots/navigation-tabs.png differ
diff --git a/docs/assets/screenshots/navigation.png b/docs/assets/screenshots/navigation.png
index 0af9dd1ad..37792e740 100644
Binary files a/docs/assets/screenshots/navigation.png and b/docs/assets/screenshots/navigation.png differ
diff --git a/docs/assets/screenshots/toc-integrate.png b/docs/assets/screenshots/toc-integrate.png
new file mode 100644
index 000000000..c60807840
Binary files /dev/null and b/docs/assets/screenshots/toc-integrate.png differ
diff --git a/docs/changelog.md b/docs/changelog.md
index 4c7232206..bc6126fd3 100644
--- a/docs/changelog.md
+++ b/docs/changelog.md
@@ -6,6 +6,10 @@ template: overrides/main.html
## Material for MkDocs Insiders
+### 1.10.0 _ November 15, 2020
+
+* Added support for integrating table of contents into navigation
+
### 1.9.0 _ November 7, 2020
* Added support for hiding navigation and table of contents on any page
diff --git a/docs/insiders.md b/docs/insiders.md
index 37ad24dc6..9f5de68db 100644
--- a/docs/insiders.md
+++ b/docs/insiders.md
@@ -78,7 +78,8 @@ for MkDocs Insiders. You can click on each feature to learn more about it:
- [x] [Navigation can be grouped into sections][16]
- [x] [Navigation can be always expanded][17]
- [x] [Navigation and table of contents can be hidden][18]
-- [x] [Header can be automatically hidden on scrolling][19]
+- [x] [Table of contents can be integrated into navigation][19]
+- [x] [Header can be automatically hidden on scrolling][20]
[11]: setup/setting-up-the-footer.md#remove-generator
[12]: setup/changing-the-colors.md#color-palette-toggle
@@ -88,15 +89,16 @@ for MkDocs Insiders. You can click on each feature to learn more about it:
[16]: setup/setting-up-navigation.md#navigation-sections
[17]: setup/setting-up-navigation.md#navigation-expansion
[18]: setup/setting-up-navigation.md#hide-the-sidebars
- [19]: setup/setting-up-the-header.md#automatic-hiding
+ [19]: setup/setting-up-navigation.md#navigation-integration
+ [20]: setup/setting-up-the-header.md#automatic-hiding
## Roadmap
The following list of funding goals – named after varieties of chili peppers
-[I'm growing on my balcony][20] – shows which features are already available
+[I'm growing on my balcony][21] – shows which features are already available
in Material for MkDocs Insiders.
- [20]: https://www.instagram.com/squidfunk/
+ [21]: https://www.instagram.com/squidfunk/
### Madame Jeanette
@@ -115,9 +117,8 @@ in Material for MkDocs Insiders.
- [x] [Navigation can be grouped into sections][16]
- [x] [Navigation can be always expanded][17]
- [x] [Navigation and table of contents can be hidden][18]
-- [x] [Header can be automatically hidden on scrolling][19]
-- [ ] Table of contents can be moved into navigation for more space
-- [ ] Better support for wide screens, i.e. more horizontal space
+- [x] [Table of contents can be integrated into navigation][19]
+- [x] [Header can be automatically hidden on scrolling][20]
### Bhut Jolokia
@@ -169,10 +170,10 @@ improvements (e.g. search) do not require any changes to existing configuration.
This means that your users will be able to build the docs locally with the
regular version and when they push their changes to CI/CD, they will be built
with Material for MkDocs Insiders. For this reason, it's recommended to
-[install Insiders][21] only in CI, as you don't want to expose your `GH_TOKEN`
+[install Insiders][22] only in CI, as you don't want to expose your `GH_TOKEN`
to users.
- [21]: publishing-your-site.md#github-pages
+ [22]: publishing-your-site.md#github-pages
### Terms
@@ -182,7 +183,7 @@ terms?_
Yes. Whether you're an individual or a company, you may use _Material for MkDocs
Insiders_ precisely under the same terms as Material for MkDocs, which are given
-by the [MIT license][22]. However, we kindly ask you to respect the following
+by the [MIT license][23]. However, we kindly ask you to respect the following
guidelines:
- Please __don't distribute the source code__ from Material for MkDocs Insiders.
@@ -193,7 +194,7 @@ guidelines:
- If you cancel your subscription, you're removed as a collaborator and will
miss out on future updates of Material for MkDocs Insiders. However, you may
__use the latest version__ that's available to you __as long as you like__.
- Just remember that __[GitHub deletes private forks][23]__.
+ Just remember that __[GitHub deletes private forks][24]__.
- [22]: license.md
- [23]: https://docs.github.com/en/github/setting-up-and-managing-your-github-user-account/removing-a-collaborator-from-a-personal-repository
+ [23]: license.md
+ [24]: https://docs.github.com/en/github/setting-up-and-managing-your-github-user-account/removing-a-collaborator-from-a-personal-repository
diff --git a/docs/setup/setting-up-navigation.md b/docs/setup/setting-up-navigation.md
index b316b590a..f74123b84 100644
--- a/docs/setup/setting-up-navigation.md
+++ b/docs/setup/setting-up-navigation.md
@@ -5,9 +5,9 @@ template: overrides/main.html
# Setting up navigation
A clear and concise navigation structure is an important aspect of good project
-documentation. Material for MkDocs provides several options to configure the
-behavior of navigational elements, including [tabs][1] and [sections][2], and
-its flag-ship feature: [instant loading][3].
+documentation. Material for MkDocs provides a multitude of options to configure
+the behavior of navigational elements, including [tabs][1] and [sections][2],
+and its flag-ship feature: [instant loading][3].
[1]: #navigation-tabs
[2]: #navigation-sections
@@ -46,7 +46,7 @@ _Material for MkDocs is the only MkDocs theme offering this feature._
[:octicons-file-code-24: Source][6] · :octicons-unlock-24: Feature flag
When _tabs_ are enabled, top-level sections are rendered in a menu layer below
-the header on big screens (but not when the sidebar is hidden). They can be
+the header for viewports above `1220px`, but remain as-is on mobile. They can be
enabled via `mkdocs.yml` with:
``` yaml
@@ -118,8 +118,8 @@ navigation is plausible on mobile devices. As another example, see the
[:octicons-heart-fill-24:{: .tx-heart } Insiders only][11]{: .tx-insiders }
When _sections_ are enabled, top-level sections are rendered as groups in the
-sidebar on big screens (but not when the sidebar is hidden). It can be enabled
-via `mkdocs.yml`:
+sidebar for viewports above `1220px`, but remain as-is on mobile. They can also
+be enabled via `mkdocs.yml`:
``` yaml
theme:
@@ -261,6 +261,36 @@ them at your own risk._
[18]: #permalink
[19]: #hide-the-sidebars
+#### Navigation integration
+
+[:octicons-file-code-24: Source][11] ·
+:octicons-unlock-24: Feature flag ·
+[:octicons-heart-fill-24:{: .tx-heart } Insiders only][11]{: .tx-insiders }
+
+When _integration_ is enabled, the table of contents is rendered as part of
+the navigation for viewports above `1220px`, but remain as-is on mobile. This
+can be enabled via `mkdocs.yml`:
+
+``` yaml
+theme:
+ features:
+ - toc.integrate
+```
+
+=== "Integrate table of contents"
+
+ [![Integrate table of contents][20]][20]
+
+=== "Separate table of contents"
+
+ [![Separate table of contents][8]][8]
+
+ [20]: ../assets/screenshots/toc-integrate.png
+
+The content section will now always stretch to the right side, resulting in
+more space for your content. This feature flag can be combined with all other
+feature flags, e.g. [tabs][1] and [sections][2].
+
### Hide the sidebars
[:octicons-file-code-24: Source][11] ·
@@ -268,7 +298,7 @@ them at your own risk._
Sometimes it's desirable to hide the navigation and/or table of contents
sidebar, especially when there's a single navigation item. This can be done for
-any page using the [Metadata][20] extension:
+any page using the [Metadata][21] extension:
``` yaml
---
@@ -282,26 +312,26 @@ hide:
=== "Hide navigation"
- [![Hide navigation][21]][21]
+ [![Hide navigation][22]][22]
=== "Hide table of contents"
- [![Hide table of contents][22]][22]
+ [![Hide table of contents][23]][23]
=== "Hide both"
- [![Hide navigation and table of contents][23]][23]
+ [![Hide navigation and table of contents][24]][24]
- [20]: ../../reference/meta-tags/#metadata
- [21]: ../assets/screenshots/hide-navigation.png
- [22]: ../assets/screenshots/hide-toc.png
- [23]: ../assets/screenshots/hide-navigation-toc.png
+ [21]: ../../reference/meta-tags/#metadata
+ [22]: ../assets/screenshots/hide-navigation.png
+ [23]: ../assets/screenshots/hide-toc.png
+ [24]: ../assets/screenshots/hide-navigation-toc.png
## Customization
### Keyboard shortcuts
-[:octicons-file-code-24: Source][24] ·
+[:octicons-file-code-24: Source][25] ·
:octicons-mortar-board-24: Difficulty: _easy_
Material for MkDocs includes several keyboard shortcuts that make it possible
@@ -327,7 +357,7 @@ to navigate your project documentation via keyboard. There're two modes:
* ++n++ , ++period++ : go to next page
Let's say you want to bind some action to the ++x++ key. By using [additional
-JavaScript][25], you can subscribe to the `keyboard$` observable and attach
+JavaScript][26], you can subscribe to the `keyboard$` observable and attach
your custom event listener:
``` js
@@ -343,5 +373,38 @@ The call to `#!js key.claim()` will essentially execute `#!js preventDefault()`
on the underlying event, so the keypress will not propagate further and touch
other event listeners.
- [24]: https://github.com/squidfunk/mkdocs-material/blob/master/src/assets/javascripts/integrations/keyboard/index.ts
- [25]: ../customization.md#additional-javascript
+ [25]: https://github.com/squidfunk/mkdocs-material/blob/master/src/assets/javascripts/integrations/keyboard/index.ts
+ [26]: ../customization.md#additional-javascript
+
+### Content area width
+
+[:octicons-file-code-24: Source][27] ·
+:octicons-mortar-board-24: Difficulty: _easy_
+
+The width of the content area is set so the length of each line doesn't exceed
+80-100 characters, depending on the width of the characters. While this
+is a reasonable default, as longer lines tend to be harder to read, it may be
+desirable to increase the overall width of the content area, or even make it
+stretch to the entire available space.
+
+This can easily be achieved with an [additional stylesheet][28] and a few lines
+of CSS:
+
+=== "Increase width"
+
+ ``` css
+ .md-grid {
+ max-width: 1440px;
+ }
+ ```
+
+=== "Stretch to fit"
+
+ ``` css
+ .md-grid {
+ max-width: initial;
+ }
+ ```
+
+ [27]: https://github.com/squidfunk/mkdocs-material/blob/aeaa00a625abf952f355164de02c539b061e6127/src/assets/stylesheets/main/layout/_base.scss#L99-L104
+ [28]: ../customization.md#additional-css