10

Tabs within Tabs

over 5 years ago from , Product Designer at Playground Inc

Does anyone know any good solutions for having tabs within tabs?

23 comments

  • Jordan KoscheiJordan Koschei, over 5 years ago

    Tabception.

    15 points
  • Aaron WhiteAaron White, over 5 years ago (edited over 5 years ago )

    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!

    4 points
    • Asis PatelAsis Patel, over 5 years ago

      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!

      0 points
  • Vibhas JainVibhas Jain, over 5 years ago (edited over 5 years ago )

    www.flykyte.com Chrome plugin which gives you tabs within tabs

    1 point
  • Greg BowenGreg Bowen, over 5 years ago

    Have you thought about floating the second set of tabs as buttons and using toggle?

    1 point
    • Asis PatelAsis Patel, over 5 years ago

      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

      0 points
  • Kristin Lasita, over 5 years ago

    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.

    1 point
  • Rob GillRob Gill, over 5 years ago

    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?

    1 point
  • Asis PatelAsis Patel, over 5 years ago (edited over 5 years ago )

    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.

    http://drrop.it/qJV

    What do you guys think?

    0 points
    • Aaron WhiteAaron White, over 5 years ago

      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.

      1 point
      • Asis PatelAsis Patel, over 5 years ago

        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?

        0 points
        • Aaron WhiteAaron White, over 5 years ago

          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.

          0 points
  • Nick Sloggett, over 5 years ago

    @asis find me on twitter. I currently just solved this.

    0 points
  • Asis Patel, over 5 years ago

    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!

    Thanks, Asis

    0 points
    • Ryan ScottRyan Scott, over 5 years ago

      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.

      4 points
    • Hans van de BruggenHans van de Bruggen, over 5 years ago

      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.

      https://www.dropbox.com/s/r2e9khnsyje1il8/Screenshot%202015-02-27%2014.49.11.png?dl=0

      0 points
      • Asis PatelAsis Patel, over 5 years ago

        This is a really good suggestion for mobile, however how would this work across tablet and desktop?

        0 points
    • Alex PaxtonAlex Paxton, over 5 years ago

      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.

      0 points
  • Luke Whitehouse, over 5 years ago (edited over 5 years ago )

    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)

    0 points