XF 1.4 How to improve the standard tabs?

[Stuart Wright]

The standard Xenforo tabs are pretty simple and work just fine provided there aren't too may of them.
But in several places on AVForums (user profiles for moderators, Xen Media Gallery, forthcoming editorial enhancements), there are too many tabs and we end up with two rows which completely defeats the design principle.
Does anyone have a general solution to this problem? How do we cater for 10 tabs when there is room for only 7?

 

[Paul B]

Less tab title text?
Smaller text?
Smaller tabs - less padding?
A wider site width?

 

[Chris D]

Taking the bold font off the tabs is a good start. Maybe you could apply the bold to the active tab only because otherwise there's not a lot to distinguish the active and non active tabs.

Also it's worth noting that normal users won't see the Usernotes tab so to a certain extent, the issue is less of an issue globally.

Consider changing the titles of the tabs too:

Profile Posts
Activity
Postings
Info
Bookmarks
Reviews
Notes (0)
Trading
Media
Albums

 

[Paul B]

A more radical solution could be to have vertical navigation, as with the Help page: https://xenforo.com/community/help/

 

[Stuart Wright]

I actually want to make the font larger in tabs in order to make them more important and obvious.
Renaming tabs is not really a great option either as our editorial will require several tabs.
I was thinking about suggesting something like the scrolling page nav, but then it's obvious what the hidden page nav elements do and in contrast, tabs need to be seen. Also scrolling a tab 'slider' would add an additional click which would be unfriendly.
I am looking for a new solution, but creating vertical tabs makes the width of the content area even narrower. That wouldn't work on your media gallery, would it, Chris?

 

[Paul B]

but creating vertical tabs makes the width of the content area even narrower

Place them in the left sidebar.

 

[Andrej]

Perhaps you could replace the text with icons, such as Font Awesome? Another idea would be turning the tabs into a menu (or a 'more' menu after x tabs showing the rest).

 

[Harpers Tate]

Perhaps you could replace the text with icons, such as Font Awesome....

which would render them meaningless, as is the case with all icons that have no accompanying text.

And I had to chuckle to myself at Brogan's suggestion of "A wider site width" (It's an "in joke").

Is it possible to make the text wrap in the tabs so long(er) titles run 2 or more rows at the expense of some height - which could be mitigated by less top/bottom padding if necessary?

 

[Stuart Wright]

Maybe we could have it so that multiple worded tabs are split into two lines.
Also maybe we could have it so that the tabs are forced to all fit on to one line, with word which don't fit being truncated with an ellipsis and title text for the word available on mouse over?

 

[Stuart Wright]

I don't like the exact look of this, but could the idea be developed?

 

[Paul B]

Why not just have two rows of tabs?

 

[Chris D]

I don't like the exact look of this, but could the idea be developed?
View attachment 85391

I can't imagine that idea not looking hideous. (No offence).

 

[Stuart Wright]

I can't imagine that idea not looking hideous. (No offence).

None taken. As Brogan says, it's two rows and we virtually posted the same idea at the same time.
Microsoft used to have multiple rows of tabs in their programs. When you select a tab from a higher up row, that row of tabs would be moved to the lowest position so that visually, the selected tab 'connects' with the content under it.
This is really confusing, though, having the rows move about.
So without moving the rows, how do you connect the top row to the content. My mock up above is, as Chris says. pretty hideous, but it's the principle which I wonder whether a good designer could make work?

 

[ge66]

I actually don’t have much of an opinion about all this but thought I would share an image of two rows of tabs, from windows.

 

[EQnoble]

I don't like the exact look of this, but could the idea be developed?
View attachment 85392

I actually don’t have much of an opinion about all this but thought I would share an image of two rows of tabs, from windows.

View attachment 85394

To answer your question, this (your example as well as ge66's) can be done if you want to spend the time/money doing it.

 

[Stuart Wright]

I actually don’t have much of an opinion about all this but thought I would share an image of two rows of tabs, from windows.

View attachment 85394

I guess when you click, say, Devices, the top and bottom rows of tabs swap places?