Does anyone know any good solutions for having tabs within tabs?
what, why is the paper clip there?
Based on your mockups, you're trying to filter the view of the parent. I don't think you really want Tabs within a Tab per say, this is more of filtering the data within a selected tab.
I'm not sure how you're displaying the data (table, cards, etc...) however you could try a couple ways to do this.
1) Dropdown list 2) Pills (inline tabs in bootstrap) 3) Toggle button group 4) Plain old inline list 5) Stacked tabs/list
Doing a quick Dribbble search (please don't spam me!) for 'Filters' I found this shot: [http://dribbble.com/shots/1607526-Projects-View]
Let us know what you come up with!
The data that will be revealed will be data in a table. I see what you mean with your dribble link, having two headers varying in text size. I will post up what I come up with!
www.flykyte.com Chrome plugin which gives you tabs within tabs
Have you thought about floating the second set of tabs as buttons and using toggle?
Thank you I am experimenting with this now. The best way to do it is to create the most differentiation between the two tab levels
Can you explain this a bit more or show an example? You might have a better shot of having something like this answered on UX Stack Exchange
There is a lot to dig through, but usually someone has a similar problem.
Tricky one, what about horizontal for main tab, with the sub tabs vertical on the left hand side? Goal does that for match stats, http://www.goal.com/en-gb/match/everton-vs-leicester-city/1704001/stats?ICID=MP_MS_4
Or stack tabs and sub tabs? And distinguish them by style, reverse background/font colour?
Or use sub tabs as a different UI pattern, buttons for example?
Thank you all for your suggestions. This is what I have gone with in the end. A Tab bar and then a filter beneath it which filters the content in the table.
What do you guys think?
This pattern is fairly strong. I don't think you need the 'Filter:' label in this case, I don't think it's providing any additional value here. The Parent 'Divisions' is so close, you don't really need it.
Also, the 'x' in the pill is a bit confusing. Assuming the default view is both Divisions, I think you could get away with not having the 'x' in the pill. The toggle on/off mode should be enough affordance for the user to quickly understand what is going on.
Thanks for your feedback Aaron. I understand where you are coming from. The reason why I included the 'Filter' label and 'x' was to indicate the user can interact with these. As you say the default view will be both of the pills on, I wanted something to indicate that the these pills are intractable. I feel keeping either the 'x' or the 'Filter' is a good indicator, I'm not convinced removing both will be enough. What do you think?
Usually when you see the 'x' in the pill, that item didn't exist before. You are persisting both filters from the start, which seems outta place to me. You could do a radio button type effect maybe, or give the off state a light grey/baby blue container...
Picking the Nits at this point really.
@asis find me on twitter. I currently just solved this.
Hi Nick thanks, I found you on twitter but I couldn't find your solution?
Ah sorry amigo, I meant reach out there. There is an overarching NDA so I'll have to do a screen share.
Thanks guys for your suggestions so far. This is a snapshot of what I am working on...http://drrop.it/pTs
The question is If I have a primary tab bar, what do you feel is the best way to display the secondary options?
All suggestions welcome!
I like where #2 is headed best. Radio buttons feel out of place, and #1 is a bit confusing color wise. Try to extend the border (with the bg color of the Division tab) on the bottom, left, and right of the selection box - you already have it on the top border. I think that might make it feel more like a child element.
Don't think of these as "tabs", think of these as groupings and subgroupings. Depending on what you're trying to do, you may have better results using tabs for one level and another grouping approach for the other.
Here's an example from a recent project where I needed to do exactly that. The sub groupings show a short preview of the content with a "show more" trigger. Hope this helps.
This is a really good suggestion for mobile, however how would this work across tablet and desktop?
I think #2 as well. So long as the styles are visually different enough to not be confused, I think it's okay. Ideally that situation wouldn't have to happen but I've run into it myself a number of times.
Not a particular amazing example, but it works - http://www.moremountain.com/chalets/the-ark/
(I guess you could argue that its not really tabs too)