I have an sidebar similar to this example


Objects > Management is basically a list of all objects. Each object has a detail view. Workflow:

Navigate to Objects > Management
Click *details* on a single object

No problem so far.

Problem: The detail view of an object has many sections

Info, Equipment, Devices, Foo, Bar, etc

One solution could be using tabs within the content like this

SIDEBAR    |          CONTENT                |
           |                                 |
           |                                 |
           | _TAB_TAB_TAB_TAB________________|
           |                                 |
           |                                 |
           |        ...                      |
           |                                 |
           |                                 |

Now I've escaped the menu(sidebar) structure since I'm in a single object. But I've many thousand objects so I can't link to each object in the sidebar like

        Object 1
        Object 2

One workaround is to use breadcrumbs in this situation. I think it's OK.

But we actually want to avoid the tab-system and integrate it in the sidebar - where navigation usually happens.

We could add the selected object dynamically to the sidebar. Well that's just super weird

        *Selected Object*

My actual question:

How can I organize my navigation structure to avoid using tabs // how can I integrate my current tab structure into the sidebar?

  • A follow up question, you have tagged it for mobile but your question does not mention it, does it involve mobile interface? Also, which is your primary section here? I mean chances are users see details of a lot of objects in a session or chances are users would go to an object using your navigation tree and work with a single item?
    – Harshal
    Commented May 20, 2015 at 14:14
  • @merqri Well probably my tags aren't that good. It's just a responsive design - thus mobile Commented May 20, 2015 at 15:40
  • You need to answer those questions so that the community can think in context.
    – Harshal
    Commented May 21, 2015 at 6:16

2 Answers 2


You could try using an accordion instead of tabs (here are some pros and cons), but it won't always work.

Can't say that I see a good way of integrating tabs into the sidebar. As you mentioned,it doesn't look very good, and for a good reason - if all your objects have the exact same structure, it doesn't make a lot of sense to repeat it for each leaf in the tree. Rather, it should be taken out of the tree to a fixed navigation component that doesn't change as you browse the tree.

But maybe you can get halfway there with vertical tabs. It will still be tabs, but it looks a bit less like tabs, and it's right next to the tree, so there's that :).

It works much better with icons than with text labels.


download bmml source – Wireframes created with Balsamiq Mockups


If that's a responsive design, you will probably move the sidebar into a collapsed panel. In such case, tabs or accordion in the rightside content area are actually a better idea than trying to fit them into the sidebar.

Consider such flow:

  • User opens sidebar
  • User chooses object
  • Sidebar is automaticaly collapsed
  • User sees the chosen object and already sees some content related to chosen object and can navigate on this level with one click

If you stick this inner nav into the responsive sidebar, user would have to click twice to change the contents tab.

Instead of tabs you can also use "Content panel" with html anchors, so that user can scroll or quickly jump to relevant sections (like Wikipedia contents panel).

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

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