Feature suggestion: add prev/next indicators to content tabs

[Vasperous]

Contribution guidelines

• I've read the contribution guidelines and wholeheartedly agree

I've found a bug and checked that ...

• ... the problem doesn't occur with the mkdocs or readthedocs themes
• ... the problem persists when all overrides are removed, i.e. custom_dir, extra_javascript and extra_css
• ... the documentation does not mention anything about my problem
• ... there are no open or closed issues that are related to my problem

Description

After upgrading with the new tabbed solution the user is unable to access tabs on the left side after the user has scrolled to the right. This means they need to reload the page to get the left tabs to appear again.

Expected behaviour

With longer tabs the user should be able to scroll back to the left after scrolling to the right.

Tabs before the user clicks on "Hello World 7":

Tabs after the user clicks on "Hello World 7":

Tabs after the user clicks on "Hello World 3" (note that user cannot access "Hello World 2"):

Actual behaviour

The left tabs are hidden and cannot be accessed by the user.

Steps to reproduce

1. Create a page with more tabs then horizontal space available
2. Serve the page
3. Click on the right most tab

Package versions

• Python: Python 3.10.0
• MkDocs: mkdocs, version 1.2.3
• Material: Version: 8.1.9+insiders.4.7.1

Configuration

site_name: 'Page Test'
site_description: 'Test'
site_author: 'Test'
site_url: ''

# Copyright
copyright: 'Copyright © 2021'

# If serving from a website you would want 'true', for offline you want false
use_directory_urls: false

nav:
  - Home:
    - Introduction: index.md

theme:
  name: 'material'
  palette:
    primary: black
    accent: cyan
  font:
    text: 'Roboto'
    code: 'Roboto Mono'
  features:
    - content.tabs.link
    - navigation.indexes
    - navigation.tabs
    - navigation.tabs.sticky
    - navigation.top
    - navigation.tracking
    - search.highlight
    - search.share
    - search.suggest
    - toc.autohide

extra:
  generator: false

markdown_extensions:
  - abbr
  - admonition
  - attr_list
  - def_list
  - footnotes
  - meta
  - pymdownx.details
  - pymdownx.emoji:
      emoji_index: !!python/name:materialx.emoji.twemoji
      emoji_generator: !!python/name:materialx.emoji.to_svg
  - pymdownx.highlight:
      use_pygments: true
  - pymdownx.inlinehilite
  - pymdownx.keys
  - pymdownx.snippets:
      base_path: ext_md
  - pymdownx.superfences:
      custom_fences:
        - name: mermaid
          class: mermaid
          format: !!python/name:pymdownx.superfences.fence_code_format
  - pymdownx.tabbed:
      alternate_style: true 
  - toc:
      permalink: '#'
      toc_depth: 5

plugins:
  - search
  - git-revision-date-localized:
      fallback_to_build_date: true

System information

• Operating system: Mac OS 12.1
• Browser: Brave

[squidfunk]

Thanks for reporting. However, the tabs container is scrollable, which is what the new tabs implementation is all about:

Ohne.Titel.mp4

Before, tabs broke into several lines. There was a previous discussion whether to add a previous/next arrow as a clickable indicator to go the previous/next tab, which could be added at some point, but it hasn't been a priority until now.

[squidfunk]

I'm changing the title of this issue to indicate that we should add indicators. If you want to add them yourself until this is resolved in master, #3091 provides some directions.

Related

• How to add indicator to alternate tabbed style? #3091

[Vasperous]

@squidfunk thank you, didn't realize that I could scroll left. Of course the first time I tried I scrolled too far back and it actually triggered the 'back page'.

I tried the changes and they work but the icon is very unreliable in terms of appearance, location etc. so I will need to spend some time on it. Would be great to get the support native in here eventually.

Thank you!

[facelessuser]

Changes are unreliable due to recent CSS changes in Material, there are fixes, but I'd have to dig them up.

[squidfunk]

Just a short update: I will definitely revisit this before the next funding goal is reached, at the latest when we're close to it. I'm planning to give content tabs a slight refactor (mainly for internal reasons) and this will also include the addition of proper native and interactive tab indicators.

[squidfunk]

I've added prev/next buttons in 3cf091f. The scrolling upon keyboard navigation was also changed to always scroll by a whole page (= width), as can be seen in the video, which feels less jaggy than the current "always lock to active tab". The buttons can be interacted with and are shown when the tab label container overflows on either side:

Ohne.Titel.mp4

Note that these changes are currently only available through Insiders, but they will be released together with linked content tabs when the next funding goal is hit, which should be possible to achieve in a few weeks time.

[squidfunk]

Released as part of 8.2.15+insiders-4.15.1

[facelessuser]

Nice, looks like I'll get to drop some custom stuff, always a good thing 🙂.