Collapse Headers?

[MartinGonzalez]

Hi there!
I'm trying to create sections something like this picture:

But I would like to collapse or create a division between features. Is it possible to do it?

To have something like this:

[MartinGonzalez]

I just noticed that if I narrow the screen I get this

This is exactly what I want, but while the sidebar is on all the time.
Also, I would like to expand in the same sidebar instead of moving me to a new one.

[mocdaniel]

Not sure if I understood you correctly, but I think this is what you want?

If so, within mkdocs.yml, configure the nav listing like this and make sure to add the navigation.sections feature.

nav:
  - Home: index.md
  - AB Testing:
      - Overview: ab/index.md
      - Unity:
          - ab/unity/page-a.md
          - ab/unity/page-b.md
      - API:
          - ab/api/page-a.md
          - ab/api/page-b.md
  - Remote Configuration:
      - Overview: rc/index.md
      - Unity:
          - rc/unity/page-a.md
          - rc/unity/page-b.md
      - API:
          - rc/api/page-a.md
          - rc/api/page-b.md
  - Purchasing:
      - Overview: buy/index.md
      - Unity:
          - buy/unity/page-a.md
          - buy/unity/page-b.md
      - API:
          - buy/api/page-a.md
          - buy/api/page-b.md
  - Schedule Features:
      - Overview: feats/index.md
      - Unity:
          - feats/unity/page-a.md
          - feats/unity/page-b.md
      - API:
          - feats/api/page-a.md
          - feats/api/page-b.md

This will result in the navigation shown in the screenshot above.

If the exact opposite is the case and you actually want to collapse every section completely and this isn't the case right now (it's the default behavior of mkdocs-material), make sure that the navigation.sections feature is not enabled, as then all sections should collapse completely.

[Martin-Gonzalez90]

Sure, I have this right now

site_name: PlayOps Documentation
theme:
  name: material
  features:
    - header.autohide
    - navigation.instant
    - navigation.tracking
    - navigation.sections
    - navigation.expand: false
    - navigation.indexes
    - toc.follow
    - search.suggest
    - search.highlight
    - content.code.copy
  plugins:
    - search
    - toc
    - group
    - nav-ids
  palette:
    - scheme: default
      primary: deep purple
      accent: purple
      toggle:
        icon: material/brightness-7
        name: Switch to dark mode
    - scheme: slate
      primary: deep purple
      accent: purple
      toggle:
        icon: material/brightness-2
        name: Switch to light mode
extra_css:
    - stylesheets/custom.css

markdown_extensions:
  - pymdownx.highlight:
      anchor_linenums: true
  - pymdownx.inlinehilite
  - pymdownx.snippets
  - pymdownx.superfences
  - admonition
  - pymdownx.details
  - pymdownx.tabbed:
      alternate_style: true

nav:
  - Home: index.md
  - AB Testing: 
    - Overview: ab-testing/overview.md
    - Unity: 
      - Installation: ab-testing/unity/installation.md
      - Getting an AB Test: ab-testing/unity/getting-test.md
    - API: 
      - Get Active AB Tests: ab-testing/api/active-tests.md
  - Remote Configuration:
    - Overview: remote-config/overview.md
    - Unity:
      - Installation: remote-config/unity/installation.md
    - API:
      - Get Configuration: remote-config/api/get-configuration.md
  - Purchasing:
    - Overview: purchasing/overview.md
    - Unity:
      - Installation: purchasing/unity/installation.md
    - API:
      - Get Purchases: purchasing/api/get-purchases.md
  - Schedule Features:
    - Overview: schedule-features/overview.md
    - Unity:
      - Installation: schedule-features/unity/installation.md
    - API:
      - Get Schedules: schedule-features/api/get-schedules.md
  - Notifications:
    - Overview: notifications/overview.md
    - Unity:
      - Installation: notifications/unity/installation.md
    - API:
      - Get Notifications: notifications/api/get-notifications.md

[mocdaniel]

Remove navigation.sections from the feature's list, that should do the trick.

[MartinGonzalez]

That did the trick indeed, I guess could be fine for a first iteration

But do you know if there is a way of creating those separations like in the picture below?

[mocdaniel]

Yup - you can use custom additional CSS.

Put the following in a file docs/stylesheets/extra.css (or extend the file at docs/stylesheets/custom.css you already seem to have, according to the config you shared):

nav[data-md-level="0"] > .md-nav__list > .md-nav__item {
  border-bottom: 1px solid;
  border-color: #36383F; /* picked the color from your screenshot */
  padding-bottom: 4px;
}

Then reference the file in your mkdocs.yml:

extra_css:
  - stylesheets/extra.css

Desktop

Mobile

Regarding the last part of the questions (how not to descend into the subsection menu on mobile devices) - this goes deeper into the inner workings of the nav partial and possibly also Javascript, so it's out of scope for this thread imo - maybe you should open a separate discussion for that.

[MartinGonzalez]

Yes, I agree that this might be out of scope, but def this was an improvements to where I want to go!
Thanks a lot