Vertical tabs in Firefox: Indeed, it's really possible!

For a particular form of power person, Firefox’s deficiency of vertical tab help could possibly seem to be like a dealbreaker.

Vertical tabs are a fantastic way to control dozens of browser tabs in a one window. At the expense of some horizontal webpage actual estate—which most web-sites don’t use anyway—each tab stays the identical sizing, so you under no circumstances eliminate sight of website page titles. And if you open a lot more tabs than your display screen can accommodate, it’s quick to scroll up and down the checklist with your mousewheel or trackpad.

I’m admittedly not a regular Firefox user, but I not too long ago started out dabbling in a extra privateness-centric fork named Librewolf, and was quickly reminded of a cause I drifted absent from Firefox in the first spot: Not like Microsoft Edge, Vivaldi, and some other up-and-coming browsers this kind of as Arc, Firefox does not formally support vertical tabs—and neither does Librewolf by extension.

Unofficially, nonetheless, there is a way to established up vertical tabs in Firefox and other Firefox-based mostly browsers. It will involve combining a vertical tab browser extension with a minor-acknowledged way of customizing Firefox’s menus, so that the horizontal tab row gets concealed. (I have viewed far too several swiftly-prepared guides that omit the next step, even nevertheless it’s critical for maximizing display screen genuine estate.)

Although Mozilla is reportedly taking into consideration vertical tab assistance in Firefox, you don’t have to hold out for the company to make up its head. Here’s how to established them up correct now:

Select a vertical tab extension

Of all the vertical tab Firefox include-ons I’ve experimented with, the finest is Tree Design Tab. By default, it preserves the glimpse and feel of Firefox’s latest “Proton” design and style, but you can also pick other types this kind of as the aged “Photon” topic and a superior-contrast layout.

Jared Newman / Foundry

Even greater, you can very easily set up tabs into teams by dragging and dropping. Just move a single tab on leading of the other, and it’ll make a new team. You can then click on the arrow following to any team to broaden or collapse the tabs within. (You will find that vertical tabs are specially conducive to grouping as effectively.)

To get commenced with Tree Model Tab, just set up it from Firefox’s add-ons internet site. Or, check out out a pair of other extensions instead:

• Tab Centre Reborn doesn’t guidance tab grouping, but it does have a developed-in tab lookup resource and can demonstrate much larger thumbnail page previews for every tab when space permits.
• Sidebery lets you set up tabs into tree-fashion subpages, but you can also create various sets of vertical tabs, using the top navigation bar to change in between them.

Jared Newman / Foundry

Hiding Firefox’s top rated tab

Soon after placing up a vertical tab extension in Firefox, it is time to hide the common horizontal tab row at the leading.

To do that, you will faucet into an specially geeky Firefox attribute that lets you customize the menu system employing CSS code. Scary as this may perhaps sound, the instructions for setting it up are fairly simple.

To start with, you will have to enable Firefox’s CSS customization feature, which is turned off by default:

• Enter about:config in the tackle bar and select “Accept the Possibility and Carry on.”
• Under “Search desire name,” paste the next text: toolkit.legacyUserProfileCustomizations.stylesheets
• Faucet the toggle button on the right so the desire suggests “true.”

Jared Newman / Foundry

Now, you should generate a customized CSS file to conceal the horizontal tab bar:

• Enter about:assistance in the handle bar.
• Scroll down to the segment that says “Profile Folder,” and simply click the “Open Folder” button.

Jared Newman / Foundry

• Produce a new subfolder identified as “chrome” inside of the folder you just opened.
• In the new “chrome” folder, generate a new textual content file.
• Rename the textual content file to userChrome.css (with .css rather of .txt as the file extension).
• Working with a textual content editor these as NotePad, open the userChrome.css file.
• Copy all the textual content on this page, then paste it into the userChrome.css file.

Jared Newman / Foundry

Right after performing all that, help you save the userChrome.css file, then restart Firefox.

The horizontal tab bar need to now be invisible, leaving only a streamlined menu bar that consists of navigation buttons, the handle bar, your extensions, and window buttons. And if you enter entire-screen mode, the vertical tab bar will grow to be hidden as effectively.

As often, you can customise the leading navigation bar by ideal clicking on it, then picking out “Customize Toolbar.” I recommend incorporating some adaptable house future to the deal with bar, providing you a house to click and drag the window about.

Want to restore the best tab row? Simply just return to the “chrome” folder as explained, delete the userChrome.css file, and restart Firefox. (You can also rename the file to something like hiddentabs.css, then rename it back again if you want to hide the top rated tab row all over again.)

Congrats on giving you a significantly remarkable way to handle tabs in Firefox. With any luck, Mozilla will not be also considerably behind, rendering all this more function unneeded.

Indicator up for Jared’s Advisorator publication to get a tech tip in your inbox every Tuesday.