I'm using Bootstrap 4 for my websites layout, and recently wanted to create a nested Table of Content. Considering https://graphicdesign.stackexchange.com/help/on-topic, I'd say this is about

the look & feel aspect of web design;

A nested table of content is basically a table of content with topics, subtopics, subsubtopics etc...

So, here are my two concepts, using nested list groups; which do you think is better, especially taking into account intuitivity, what should I change ? How do you feel about the use of colors & spacing ? How should I implement the nesting ? Are they suited for mobiles ?

Concept N°1Concept N°2

  • 2
    Are there additional subitems under "Home", "Profiles" And "Messages"? If not, I do not see the need for the hierarchy. In any event, the left bordered tables are merely too visually cluttered for my taste. – Scott Jan 13 '19 at 19:25
  • @Scott No, there are no subitems waiting to be revealed. – LMD Jan 13 '19 at 20:40

The purpose of a hierarchy is to visual separate contents which may otherwise be confusing.

If there are main topics, then several sub-areas under each topic a visual hierarchy assists the user in distinguishing different topics quickly, then being able to "tunnel down" to more specific subjects related to that main topic.

However, if there are no sub-categories and there are only main topics, any visual hierarchy may lead a user to think some topics are more important than others, when they are not.

Given the simple list of 4 topics, there is no need for any visual hierarchy beyond the order the topics are stacked. I would remove all indents and nesting. They are entirely unwarranted in my opinion.

enter image description here

Simple, clean, clear.


If you were to have sub topics, an easy way to handle it for the web/mobile is via expanding divs with an indicator that the topic expands....

enter image description here

Essentially it all boils down to a menu or navigation tree. That's all a TOC really is. So don't do anything in a TOC that you wouldn't do in a menu.

  • Thanks for your answer ! +1 - But actually I want to preserve the hierarchy, as I may have to deal with large TOCs especially when parsing documents like docs. – LMD Jan 14 '19 at 16:06
  • Well, if hierarchy is needed, you can add small triangles and then use things like a sliding div to show "more content" when one of the top levels is clicked. To be frank, I don't grasp your comment. You want to design a TOC which is forward-thinking and suitable for all use cases? – Scott Jan 14 '19 at 20:16
  • Sort of. I want to have up to 3 layers of hierarchy - ranking from h1 to h3. What would be the min amount of topics that would benefit adding hierarchy ? Sorry if I sound strange, I'm more of a dev than a designer... And currently I want to create a mobile friendly website for personal projects. – LMD Jan 14 '19 at 21:05
  • Well, hierarchy can be beneficial whenever there's a single subcategory. i.e. if you have ---------------------- Home / Profile [posts] / Messages / Settings -------------------- then hierarchy for "Profile" would be helpful and reduce the amount of clicks needed to get to the subcategories (posts). I would still align all main topics to the left, then merely indent, lower type size slightly, and alter color (desaturate or lighten) for the sub-items. This all starts getting into my design preference though. There are no rules. – Scott Jan 14 '19 at 23:18
  • @LMD Answer updated – Scott Jan 15 '19 at 10:15

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

Not the answer you're looking for? Browse other questions tagged or ask your own question.