Best approach to dividing content into sections when many tabs are needed?

Question

I am working on a web project where users can write content and share it – this content is mixed (text/image/video), massive and a bit complicated – so obviously it should be divided into sections (chapters, e.g. 'Introduction', 'Chapter A', 'Chapter B', etc.) to make its easier to navigate through and don't show it like a wall of text on user's screen.

So if there were just 3-4 sections I would simply use traditional tabs, but the problem is that there are 12 sections (and even more can be dynamically added by user if needed) and I have less than 800 pixel width of the content block, so all these tabs would not fit in this width (considering that majority of sections' titles consist of two words).

I don't want to use multi row tabs because it would seem complicated to user and hard to navigate, let alone the unaesthetic look.

I could use side bar on the left (aka 'vertical tabs'), but considering less than 800 pixel width, tabs would use a big amount of contents' space.

Any ideas on the best approach with many sections?

Answer 1

I would expand on your side bar idea but keep it hidden instead of fixed. This would save that valuable horizontal screen space. Maybe have a tab like so:

The tab could be moving subtly or have a subtle color change to indicate its importance.

When a user wants to make a selection/navigate to a different section, they would click on the hamburger menu and then be presented with their options:

You could play with the font-size to see what fits best for the number of selections you have. Or, you could make the menu take up the full screen and gain more screen space to work with.

(I apologize for the layout of content as I just threw something together for the mockup.)

Answer 2

Please have a look at both the screens, just my 2 cents

User will click to the category (user data) to select, Chapters > Chapter 6 https://au.pinterest.com/pin/180284791312462804/

User can see which Category (Chapters), and "Chapters 6" they are in https://au.pinterest.com/pin/180284791312462809/