is it possible to display different sidebars/ hide a few categories and their children - conditionally (say, a selected Tab or viewport size) for a route/ slug/ docId

[shekharkc]

Here is a usecase, I have a query about.

say, the sidebar has the following hierarchy

• Category1
  • doc1
  • doc2
  • doc3 ....
• Category2
  • doc4
  • doc5
  • doc6 ..
    - Category3
  • doc7
  • doc8
  • doc9 ..

In some cases, it makes sense to have tabbed navigation in the main section. If we have tabbed navigation - for the above - as an example -

the tabs would be - [category1], [cateory2], [category3] ..and so on.

The question(s) I have is:

1. Is it possible to display only the sidebar items of the selected Tab instead of the complete items. Example, if category2 tab isActive, then display only
   -doc4
   • doc5
   • doc6 ..
     in the sidebar.

I presume, this may be achieved by having multiple sidebars - such as sidebar1 for category1, sidebar2 for category2, .. and so on and displaying the appropriate sidebar as per the activetab.

2. Related question, for a different viewport size, one may like to do away with the tabbed navigation. In such a case, how can one display the sidebar with all the categories? As the docId also needs to be linked with a different sidebar (the one with all the categories and items - as given above).

I guess, the question essentially boils down to

• is it possible to display different sidebars or alternately hide a few categories and their children - conditionally ? (say, a selected Tab or viewport size) for a slug/ docId/ route?

Thanks in advance

[slorber]

We don't support sidebar categories "activation strategies". You'll have to swizzle and implement the filtering logic yourself if you want that.

I presume, this may be achieved by having multiple sidebars - such as sidebar1 for category1, sidebar2 for category2, .. and so on and displaying the appropriate sidebar as per the activetab.

Yes, we use it on our own site, where separate regular docs from API references

• https://docusaurus.io/docs
• https://docusaurus.io/docs/cli

is it possible to display different sidebars or alternately hide a few categories and their children - conditionally ? (say, a selected Tab or viewport size) for a slug/ docId/ route?

You can assign a dedicated className or customProp to each sidebar category and implement the filtering logic you want using js/swizzle or CSS media queries. We don't provide that automatically

A docId cassName is added to each doc page, so CSS only might work for you

---

I don't understand how "tabs" are related to this discussion. Changing the sidebar according to a given tab would lead to a very weird UX IMHO, and I've never seen that in any doc site.