Over a million developers have joined DZone.

Enable (vertical) side tabs in Google Chrome [Windows, Mac]

DZone's Guide to

Enable (vertical) side tabs in Google Chrome [Windows, Mac]

· Web Dev Zone ·
Free Resource

Jumpstart your Angular applications with Indigo.Design, a unified platform for visual design, UX prototyping, code generation, and app development.

Tabs for web pages in browsers are usually arranged horizontally, on top of the browser window. This arrangement has two disadvantages: First, with many tabs, it becomes impossible to read their titles. Second, horizontal tabs take up valuable vertical space on widescreen displays. The obvious solution is to arrange them vertically. Firefox has several ways to do this. It is one of three features I still miss from Chrome. But there now is a way to turn on a beta version of this feature in Chrome. This post explains how.

Horizontal tabs: Vertical space is wasted, tab titles become hard to read.
Vertical tabs: Better use of horizontal space on widescreen displays, titles readable even with many tabs. You can tell that its a beta feature, because everything still looks a bit ugly.
First step:
  • Windows: Type “about:flags” into the address bar. Enable “Side Tabs”. Restart Chrome [details].
  • Mac
    • Open Chrome from Terminal like this:

      /Applications/Google\ Chrome.app/Contents/MacOS/Google\ Chrome -enable-vertical-tabs

      If you want to make this more permanent: Rename the binary mentioned above (e.g. to “Google Chrome Binary”) and put a shell script that invokes it in its place [details]:
      exec "${0%/*}/Google Chrome Binary" -enable-vertical-tabs "$@"Second step: Toggle vertical bars via the context menu that opens on a tab.
      Second step: Toggle vertical bars via the context menu that opens on a tab.

Take a look at an Indigo.Design sample application to learn more about how apps are created with design to code software.


Published at DZone with permission of

Opinions expressed by DZone contributors are their own.

{{ parent.title || parent.header.title}}

{{ parent.tldr }}

{{ parent.urlSource.name }}