How to bring the detail view into a sidebar

Question

I have an sidebar similar to this example

Home
Objects
    Management*
Foo
    Bar
Baz

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

Home
Objects
    Management
        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

Home
Objects
    Management
        *Selected Object*
            Info
            Equipment
            Devices
            Foo

---

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?

Answer 1

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}

Answer 2

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).