-
I'm using Material to build a platform that hosts courses. The plan is to have dozens of courses or more, and I'm trying to figure out how to structure this large volume of content. At the moment, I'm using navigation tabs. Functionally, this works great, but it looks bad having so many items in the header. For example, this..
looks like this Is there a way I can exclude these course links from the header? What I've tried
Notice how different the TOC looks for the same course (from my first attempt above).
I suspect the best approach to solving this is to override whichever template renders the header. Any advice here would be appreciated. (P.S. Loving Material for MkDocs so far!) |
Beta Was this translation helpful? Give feedback.
Replies: 3 comments 15 replies
-
Great question. I agree that it's sometimes hard to find a structure that just feels right and you need to go back and forth until settling for something that works well. So as I understand – you want to structure content with tabs, but you want to omit the links from the tab bar. A problem that comes to mind is… how does the user navigate? How does he get back to the home page or switch between courses? Nonetheless, in order to hide all tabs you could just add a few lines of extra CSS: .md-tabs {
display: none;
} If you want to hide a specific tab, you could just use .md-tabs__item:nth-child(1), /* 1st tab */
.md-tabs__item:nth-child(2), /* 2nd tab, and so on ... */
.md-tabs__item:nth-child(3) {
display: none;
} ... or add a check here before the template inclusion: mkdocs-material/src/partials/tabs.html Lines 34 to 36 in 7d8165c Theme extension is described here – it should be pretty straight-forward. Note that since you're probably using Insiders, you should copy |
Beta Was this translation helpful? Give feedback.
-
Mkdocs populates a whole structure tree of project in the nav. That's not good for a large project. Especially when website owner wants to hide some directories from top-level nav tracing. But we still want those hidden pages be accessible if user get links of them. So how to display nav-tree on left side when those pages are displayed? In current implementation of Mkdocs-material, it seems impossible to display a page with left side nav independent from main nav. Yes, many independent navs and a top level nav, that's what I need, that's what Hugo does. I'm trying to implement that by a hook function But it seems still need to modify Jinjia template file |
Beta Was this translation helpful? Give feedback.
-
There are some useful books out there about information architecture that can help avoid having to display too many top-level categories. I am reading Information Architecture by Rosenfeld et al. and while it is at times a little wordy, the stuff in there is really useful. One reason why navigation hierarchies often grow too large is because they mix different kinds of organization schemes - such as topics, tasks and audiences. These can often be dealt with in separate navigation structures instead of cramming them into one. If you want to have alternative navigation structures, this can be done in a number of ways. Let's assume that the main structure is topic-oriented, like the documentation for Material for MkDocs is. You might want to have a secondary navigation structure that is audience-oriented (say: admins, developers, product owners). Top-level navigation for such an audience-centric structure often sits on top of a search functionality in the header but it might also make sense to have it on the homepage. There are too many variations to make everything configurable, unfortunately, so some customization will be needed. The way I would approach this is to configure the
Add CSS to your heart's content and, of course, the appropriate links. Task-oriented alternative navigation I would offer on the main page in the content section as tutorials are important entry points for users and deserve a highly visible space. That is, of course, as always, just my 2p. |
Beta Was this translation helpful? Give feedback.
Great question. I agree that it's sometimes hard to find a structure that just feels right and you need to go back and forth until settling for something that works well. So as I understand – you want to structure content with tabs, but you want to omit the links from the tab bar. A problem that comes to mind is… how does the user navigate? How does he get back to the home page or switch between courses? Nonetheless, in order to hide all tabs you could just add a few lines of extra CSS:
If you want to hide a specific tab, you could just use
nth-child
to select the specific course (easy solution) or extend thetabs.html
template to somehow check whether to ski…