Content Tab Limitation

[Dapsy2000]

Hello Community,

Do you know if there is a limitation on the number of content tabs? If yes, how can I extend it?
I can create more than 20 tabs but after the 21st no more content is displayed.

mkdocs.yml

code snippet

output

BR
Dapsy2000

[kamilkrzyskow]

Hello @Dapsy2000,
looking at the source of the pymdown extension, there doesn't seem to be any limitation there 🤔

There is a limit on the generated CSS, set to 20:

• mkdocs-material/src/templates/assets/stylesheets/main/extensions/pymdownx/_tabbed.scss

  Line 62 in 66f1fc6

  @for $i from 20 through 1 {

And the default state of the tab is set display: none;, and based on the :checked state of the assigned input, it displays it.
The quick fix would probably be to add your own extra CSS to add the missing selectors.

.md-typeset .tabbed-set > input:nth-child(21):checked ~ .tabbed-content > :nth-child(21),
.md-typeset .tabbed-set > input:nth-child(22):checked ~ .tabbed-content > :nth-child(22) {
  display: block;
}

Similar discussion, where the colors for the active tab are being changed:

• Add CSS to unseelected Content Tabs? #7940

Perhaps there are other similar CSS blocks, which would also need these specific selectors, however I didn't see any.

Another approach would be more involved and would entail setting up your custom fork of the project with the SCSS changed to increase the number of generated entries above 20. You can read more in another discussion, where the custom theme would also be the solution:

• Altering Breakpoints? #7130

[facelessuser]

Yes, there are no physical limitations in generation of tabs. The original implementation could be styled with simple CSS and account for any number of tabs, but the newer approach recommended by Material has some advantageous at the cost of requiring more explicit CSS matching the number of expected tabs.

[alexvoss]

Can I ask why you need this many tabs? Perhaps you might be better of re-thinking the information architecture of your page/site before you try to, say, make changes to the CSS to accommodate more tabs. Just my 2p. Perhaps I am not imaginative enough to think of the use case where this makes sense.

[kamilkrzyskow]

@alexvoss
I've seen a good example in another discussion:

• How to generate animating like this page? #7735

If there is a long continuous, step-by-step kind of "powerpoint slideshow", then a lot of tabs make sense. However, I agree if the information is of the "either this or that" kind, like the Windows/Linux/Mac tabs, where a certain user might need the information of a specific tab, then the amount of tabs should be likely limited and maybe spread out into other docs pages.