In the System Preferences on Mac OSX, the following preview pattern is shown: a list of options on the left, displayed as vertical tabs, and a preview window for every selected option. In this particular case, a video is played to clarify this option.

Mac OSX System Preferences screen

I have seen the same pattern being used on another website (Atlassian, I believe), in order to show multiple, grouped features in a way that allows for showing information very strict spacing.

Now that I would like to use a similar pattern, I'm curious to know whether these are regular vertical tabs or something else?

  • Interesting! Though I would not call them tabs since they don't change state on click. It's more like a mega tooltip :)
    – filip
    Commented Aug 8, 2018 at 8:17

3 Answers 3


Looking around online it appears that these are indeed vertical tabs, they look and work in the same way as standard vertical tabs (with the additional check box functionality).

See below for some different examples: - https://www.w3schools.com/howto/howto_js_vertical_tabs.asp - https://bootsnipp.com/snippets/featured/simple-vertical-tab

The fact you have to click/hover to reveal the content I have found a bit of a grey area:

"In interface design, a tabbed document interface (TDI) or Tab is a graphical control element that allows multiple documents or panels to be contained within a single window, using tabs as a navigational widget for switching between sets of documents." Wikipedia

While NNg seem to indicate you need to click it for it to be a tab.

It appears that there are many definitions of this.

Based on the above references and examples, I would argue that this is a vertical tab, as it is performing all the same functionality and UX as a vertical tab, just not a click.


This is similar to a Master/Details pattern, wherein a list of items is displayed on one half of the screen, and once an item is selected, details about it are presented on the other half. However since the number of items in the list is fixed, this example is probably just vertical tabs. I believe Master/Details is more common in cases where you have a long, dynamic list of items (like emails, documents, etc.).

Here's some more information: https://docs.microsoft.com/en-us/windows/uwp/design/controls-and-patterns/master-details


See the simple vertical tabs code snippet


Your Answer

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