Firefox Sidebar and Vertical tabs: try them out in Nightly Firefox Labs 131

[asafko]

Hi folks,

Vertical tabs and a new sidebar experience that make multitasking and context-switching easier are now available in Nightly 131. To try them, update to the latest Nightly and go to Settings > Firefox Labs, and activate the Sidebar and Vertical tabs experiments.

After you do this, you will be able to see the new sidebar, but you will still need to add the sidebar icon to the toolbar to be able to expand vertical tabs. Click Customize toolbar in the toolbar right-click menu, and drag the sidebar icon to your toolbar. This is a temporary situation, and in the future the icon will be added to the toolbar automatically. 

A few things to keep in mind:

• This work is still very much in progress and has some rough edges, functionally and visually. You’ll see us improve and polish things over the coming months.
• We will be sharing our informal backlog of improvements in this post today, so you can get a sense for where we ultimately want these features to be.
• To design this first version, we conducted extensive research, talked to many Firefox users to understand their multitasking and context-switching needs, and prototyped extensively to find the best solutions to address them.

What we’re putting out there is something that we believe will help the majority of people using Firefox achieve their day-to-day tasks. We know there is no perfect solution for everyone and welcome your feedback to shape the direction we move forward in.

[Pfize]

Is it possilble bring this in future updates?

1. Hide the sidebar in fullscreen (F11). To show the sidebar again we can do this via cursor. Same as the top bar.
2. The abillity to resize the toolbar would be nice

No bugs so far but guess there have been a few updates since yesterday 😎

[Pfize]

          3. Tab container on the new tab icon in the sidebar

[tilwiti]

Great update! I have a few suggestions to enhance the experience:

• Automatically hide vertical tabs when extensions like Sideberry are enabled.
• Center the plus sign more precisely, aligning it with the tabs for a cleaner look.
• Add the option to create custom web panels—essentially mobile versions of websites attached to the sidebar.
• Address the issue where large prompts make the ChatGPT page appear empty.
• Allow users to edit the vertical panel directly in the UI editor (where the dragon pic is located).

I really appreciate the direction you're taking with this feature. I’d even support adding more telemetry to help you explore different usage scenarios.

[Ivi104]

This is a great start but a lot of things could be improved.

• Allow us to choose the position of the New Tab (+) button. I'd prefer it after all the tabs instead of at the top. Add a visible dividing line between the last tab and the button.
• Reduce the gab between tabs.
• Add a visible purple border to the right of each tab in incognito, to make it immediately recognized.
• If bookmarks are shown only on new tabs, when scrolling through multiple open tabs, and among them a New Tab page (about:newtab), all the tabs shift down to make place for the bookmarks bar. When selecting the new tab, the mouse is no longer on the new tab, but on the tab above it, so I have to move the mouse two tabs down to move to the next tab (after newtab), then one tab up to move to the next tab.
• If the sidebar is collapsed, it stays collapsed on hover, so there's no intuitive way to close a tab. The sidebar should expand on hover (preferably after a small delay - .25 s, make it modifiable), allowing us to close a tab via X when hovering over it, and collapse when the mouse moves away.

[D0m1n1c]

Agree with many of your suggestions. For the second (gap between tabs), I customized it with userChrome.css :

/* ROOT - VARS */
*|*:root {
--tab-min-height: 28px !important;
}

With that, the spacing looks like the one used for the links at the bottom of the sidebar (history, sidebar settings, etc). The height can be adjusted and a little more to mark a difference with the bottom links.

[Speff]

One more thing I realized - the sidebar currently shifts the page when expanded. If an expand-over-hover feature is added, then this behavior would likely need to be changed to float so it's not constantly changing the page layout when the user browses their tabs.

[ffffff]

I think grouping history can be a useful UI decision to aid navigation, but having to click twice to see my history (first to open the history panel, second to open one of the groups) feels like a silly step back regarding ease of use.

At the very least, please consider remembering which group I last opened and keep it open. I don't think that's the ideal solution, but it would make using the panel a bit less frustrating.

It's rough right now, but I'm interested in seeing what this new sidebar will look like in the future.

[usertobefound]

I've been trying it out and I've been having a great time with it. My only thing is wishing to be able to have an option where we can expand the tabs from hovering on the left side of the screen instead of clicking the 'show sidebars' button. It would also really help when we have a lot of tabs open and scrolling through when doing massive amounts of research. Otherwise, really great work so far.

[dwiggle]

Just wanted to say I heard Firefox was adding this & immediately switched back to Firefox from Edge. Looks like I'm a bit early as the version of Nightly I installed on my machine doesn't have the sidebar tabs functionality yet (130.xyz, not 131) but I'll happily wait a few weeks hoping it lands soon. Thanks so much for adding this feature!

[fnarenji]

It's not currently easy to see which tab is playing audio. The website's favicon is displayed by default, and only after you hover over the tab's icon does it turn into a speaker revealing you can mute the tab.

[Agentvirtuel]

Hello

For information purposes
https://connect.mozilla.org/t5/ideas/quot-goto-first-sound-playing-tab-quot-context-menu-of-a-tab-an...
https://www.youtube.com/embed/Z5wNV5Vu4vU

[XCanG]

First of all thanks for the feature. I'm still however looking for full Tree Style replacement of an addon from Chrome: Tabs Outliner and the closest one is Tree Style Tabs in Firefox, but it incomplete and laggy with a lot of tabs. One of the reasons I wanted to remove tabs from the top is because I'm using TST addon.

There are few things that bothering me right now, they can be added as options to enable/disable.

1. + button for creating new tab in top nav bar, we already have one in side bar. I hide it (in CSS posted below)
2. Empty top nav bar that can easily be integrated with search bar and addons (again CSS below)
3. There is no way to hide custom side bars from addons, if there are a lot of them they take a lot of space. I want to have three dots button that collapse all this addon tabs (example addons that add buttons: TST, Bitwarden, etc.)
4. There a few modes that sidebar can be viewed: hidden, compact, full. However I want to have a bit special case, at least for tabs. I want tabs sidebar stays always in compact mode (so that it wont affect content on page), but when I hovering over it, it will expand to full size and wont change actual page content (like it is overlayed over web page, or position: absolute/fixed; with higher z-index). I also provide CSS for that below.
5. Option for scrolling on the selected tab in vertical list. There is legit cases where this may not be wanted, so keeping current behaviour as an option is good too.

Now, my CSS for general UI (userChrome.css). Take a note that I currently also use addon Tab Counter, that's why I have this hack with extra space for button at right. (Removed, but I keep --custom-buuttons-width if anyone needed that) Also this CSS is for Windows 10 buttons, so it may not work well on Linux/Mac.

html:not([sizemode="fullscreen"]) > body:has(> #navigator-toolbox) {
	--nav-height: 34px;
	--nav-button-width: 35px;
	--nav-buttons-width: calc(2 * var(--nav-button-width));
	--custom-buttons-width: calc(0 * var(--nav-button-width));
	--close-buttons-width: 140px;
	--bookmarks-height: 28px;

	> #navigator-toolbox {
		display: grid !important;
		grid-template-columns: [title-start bookmarks-start] var(--nav-buttons-width) [nav-start] 1fr [nav-end custom-start] var(--custom-buttons-width) [custom-end] var(--close-buttons-width) [title-end bookmarks-end];
		grid-template-rows: var(--nav-height);

		&:has(> #PersonalToolbar[collapsed="false"]) {
			grid-template-rows: var(--nav-height) var(--bookmarks-height);
		}

		> #titlebar {
			grid-column: title-start / title-end;
			grid-row: 1;

			& #new-tab-button {
				display: none;
			}

			/* custom button from addon that fit to the right position */
			& #TabsToolbar > .toolbar-items > .customization-target > .toolbaritem-combined-buttons {
				position: absolute;
				right: var(--close-buttons-width);
			}
		}

		> #nav-bar {
			grid-column: nav-start / nav-end;
			grid-row: 1;
			z-index: 2;
		}

		> #PersonalToolbar {
			grid-column: bookmarks-start / bookmarks-end;
			grid-row: 2;
		}
	}
}

/* make compact sidebar until hover over it */
sidebar-main[expanded]:has(> #vertical-tabs) {
	--sidebar-width: 38px;
	width: var(--sidebar-width);
	overflow: hidden;
	position: relative;

	&:hover, &:focus-within {
		overflow: unset;
		z-index: 2;
	}

	&::before {
		content: "";
		display: block;
		inset: 0;
		background-color: var(--toolbar-bgcolor);
		pointer-events: none;
	}
}

EDIT: added styles for #PersonalToolbar on 2nd row

Here is video showcase of CSS above:
 https://files.catbox.moe/tbxx9p.mp4 (it was too large to add as an attachment here)

[D0m1n1c]

Nice css code (shorter than mine) to hide the top bar. But when I try it, my bookmarks bar is broken... !?

[XCanG]

You're right, I edit my post, added 2 sections with &:has(> #PersonalToolbar[collapsed="false"]) and #PersonalToolbar to fix that. Works with toolbar that only appeared on New Page as well (collapse check). I also reset my button positions and find out that I don't need extra space for button at right, so I removed that too, because Tab Counter addon can be in first row without hacks as used before.

[D0m1n1c]

Wow ! You rocks ! Looks so much better than my own code with less lines. Now it works great with the bookmarks bar. Many thanks for your modification.

[XCanG]

Also, this alternative change will make icons smaller. It a bit hacky because "sidebar-main" have shadow root with ".wrapper" that add this margins and set width for the sidebar and I just couldn't change it's styles, so I move it to the left, cutting left padding.

If merge from code above, then replace an entire last section.

sidebar-main:has(> #vertical-tabs) {
	--sidebar-width: 42px; /* 38px w/o left, 30px with compact, 42px with left */
	position: relative;
	left: -8px;

	&:not([expanded]) {
		width: var(--sidebar-width);
	}

	> #vertical-tabs {
		/* --collapsed-tab-width: 24px; */
		--tab-min-height: 22px;
		--border-radius-medium: 4px;
		--tab-block-margin: 1px;
	}
}

sidebar-main[expanded]:has(> #vertical-tabs) {
	width: calc(var(--sidebar-width) - 6px);
	overflow: hidden;

	&:hover, &:focus-within {
		overflow: unset;
		z-index: 2;
	}

	&::before {
		content: "";
		display: block;
		inset: 0;
		background-color: var(--toolbar-bgcolor);
		pointer-events: none;
	}

	> #vertical-tabs .tabbrowser-tab {
		max-width: 265px !important;

		& .tab-label-container {
			height: var(--tab-min-height) !important;
		}

		& .tab-close-button {
			scale: .8;
			position: relative;
			right: -5px;
		}
	}
}

[oberon]

Hi Team,

The update looks solid. Thanks for this new feature. I would additionally request a close symbol / button on sidebar hover.

[Damglador]

For a sidebar, I would like to see an ability to add custom links there, like in Vivaldi and a customization like for the top bar.
For vertical tabs:
- custom size (drag to resize)
- custom amount of pinned tabs in a row
- tree view might be too much to ask

Also, would be cool to have a sidebar on the right and vertical tabs on the left

[asafko]

Hi folks,

I want to thank you all who tried this first version so very much for your willingness to poke at it and for your kind and generous feedback. It means a lot for the team, as we are committed to improving this work over time, and it's been really encouraging to see your support and that things many of you have asked for are already on our nearest and medium-term backlog.

The nearest-term big change you will see is the "collapsing" of the tab bar when vertical tabs are turned on, so that there's no empty space at the top. It's a non-trivial patch (hence it did not make it into the very first Labs appearance), but we're making good progress on it. 

I also want to apologize for being MIA until early next week. I'll be back shortly and will respond to every comment.

[RyugaSunny]

I use opera only and only because it have that sidebar which lets me have whatsapp and other apps running in sidebar from which i can work and respond if something important. I want to switch to firefox but i dont think it have a sidebar in which we can add social or other websites that open in container except the chatbot in firefox nightly i would be happy to switch if can tell me how to add things in sidebar

[BiORNADE]

A workaround, for now, is to click in Google logo at Google Gemini... But you wouldn't be able to resize it for now

[Eramdam]

Promising stuff! I already have a custom vertical tabs setup that utilises Sidebery and a userChrome.css hack link. That said, I'd love to see, from most to least important:

• A way to see tab titles, ideally configurable. I personally don't mind the horizontal space taken by a ~180px wide sidebar that would show the tab titles at all time.
• a keyboard shortcut to switch between vertical and horizontal tabs. I 90% of the time use horizontal tabs but when I open _a lot_ of tabs, having them laid out in a vertical list feels easier to manage.
• a way to have the window controls move into the address bar. Worst case scenario I'll hack it myself with a userChrome.css stylesheet, assuming the "has vertical tabs" state is easy to detect in CSS 🙂

[manicmoose]

THIS.
Perhaps the FF team could have just integrated the 'Sidebery' extension into their base code.
It's a well designed and polished implementation that has an abundance of features.

[edhelas]

Hi !

First I'd like to thank you for this awesome feature, I think most of my feedback are already listed in the other replies (save some space, merge some content ...) however there is two small features that I didn't saw in them:

• Double click in the empty space (if available) bellow the tab to open a new one
• Be able to right click on the "New tab" button to choose to open a new tab in a Firefox Container, for now there is now way to do it easily.

Basically I'd suggest you to check how the Tab Center Reborn extension is handling those things, it is managing those vertical tabs perfectly to me.

Regards,

Tim

[gu-stav]

Thank you for adding this to Firefox 🙏🏻

I have two things I'd like to see:

1. When performing a double-click into the sidebar, I'd like to open a new tab. The "+ New Tab" action at the top feels a bit mis-placed.

2. I'd like to resize the sidebar per window. I think I would like it if at some very small width the view would snap into displaying the favicons only. It took me a couple of days to find and understand the "Show sidebar" control next to the search bar.

[D0m1n1c]

For me, the + new tab button should be under the list of tabs, same place as settings link and history.

[XCanG]

Moving new tab button below is pretty simple, with this CSS in userChrome.css:

#tabbrowser-tabs[orient="vertical"] #newtab-button-container {
     grid-row: 3;
}

[D0m1n1c]

That works perfectly !! Thank you.

[D0m1n1c]

Unfortunally, with Firefox 132 this rule doesnt work now.

[CompetitiveBana]

Hello i like the Implementation but i would like the ability to
- turn off/on side bar extension

- remove the sidebar settings icon and have it somewhere else in the settings

- Ability to move new tab button below tabs in sidebar.

also it would be nice if the space between tabs were less
and please please add tab grouping natively

[XCanG]

Moving new tab button below is pretty simple, with this CSS in userChrome.css:

#tabbrowser-tabs[orient="vertical"] #newtab-button-container {
  grid-row: 3;
}

[ssynxx]

being able to scroll through sidebar tabs should be pretty high priority, as well as potentially expanding the sidebar after a short hover i.e. vivaldi's implementation

[piradata]

would be nice to remove this add button from here and also move the list all tabs button to the vertical tab

also, would be great if possible to customize the items on the vertical tab here

[haingdc]

yes, it must be ongoing for the team. I tried the larch build, It has a "strip" button to hide that horizontal new tab. It looks more concise then.

[wutongtaiwan]

My suggestion is that when I hover over a tab, the tab expands automatically and has a close button. Vertical tabs can only be closed with the middle mouse button at the moment, which is not in my habit

[mykiwi]

Hi,

Thanks for this feature! I really like it 😀 But I think it could be better.

Issue:
- List all tabs button can't be moved or removed from the top bar... so I have a big empty bar at the top which is kind of useless for me.

Here is what it look like on my linux:

When I click on the button:

[XCanG]

Right now it is possible to merge this line with 2nd line with CSS in userChrome.css, check my code above, but edit it for your linux style close buttons.

[therealahall]

Having read through this thread, I realize that a lot of this is already covered but just dropping in my experience with the new functionality. First impressions, love it. It's a solid base release for a nightly that has incredible potential to grow to an amazing feature. I've been a big big fan of vertical tabs for quite some time and also count myself among the legions of users of Sidebery, Vivaldi, Arc, etc... for my comparisons.

Right out of the gate, you're doing the sizing thing better than Arc. While I still think that there's a hair too much space between the tabs themselves, it feels better than the spacing that Arc uses. I can control that with CSS if it becomes bothersome, but that could be a nice deep customization option.

With the hovering over icons to show the display of the page, I wish they would either all display the preview or none of them display and not have it be based on whether or not the tab is active at the moment.

I do like the concept of tree style indented tabs many have mentioned and I've experienced from Sidebery, but I think, given the choice, I'd prefer solid grouping of tabs as a concept over the tree style. As a user that has generally in the hundreds of open tabs, no grouping makes it a bit more of a chore to manage my day to day flow. I won't say it's necessarily a deal breaker, but it has been one of the things that prevents me from switching everything over to Firefox as a whole.

One that I don't think I've seen mentioned that would be sick is to have the ability to close a tab on another device. I'll commonly pull up 20-30 tabs on my phone throughout the day/week/whatever with the intent of pulling them up on my desktop at a later time. That flow up to that point works really well, but I'd love to be able to open the sidebar, hit my phone tabs, open the tab in the desktop browser, then right click / close tab and have that sync back down to the phone/iPad/other device.

Finally, it's been mentioned ad nauseam, but hover state to expose the full sidebar of tabs would make this an even more powerful feature. Right now I keep it set to the icons only because it maximizes the available space and only manually pop the sidebar when I need to see which Github icon I need to click on out of the sea of them.

Long story long, this is a very much welcomed feature even in its current state. Everything else will be a bonus on top of it.

[hundred17]

Amazing stuff with these native vertical tabs!

The main piece of feedback I have is about tab groups. While I don't think everything in the "Tree Style Tab" extension needs implementing in this native vertical tab implementation, one of the main benefits I see with vertical tabs is simply being able to (somewhat) efficiently handle more tabs than would otherwise be doable with the horizontal tabs.

Being able to group tabs so that when I google search "topic ABC", and "open in new tab" some of the results, all the new tabs become children of the "google search for 'topic ABC'" tab. This greatly helps with managing a large number of tabs.

The unfortunate thing is that I'm not sure how the tab grouping would work in the non-vertical-tabs setup 🤷.

But I will say that after turning on the native vertical tabs, I ended up having to vertically scroll through my list of tabs since the "Tree Style Tabs" that I normally use allows for the grouping functionality, and the native vertical tabs just expands everything into one big flat list.

[DilunAV]

That's a feature I waited for a long time and it's good that it was realized. Actually, I want to have a tab tree, so now I still need to use TreeStyleTabs, and that's just became more convenient that there are no tabs on top, so I am not trying to use them by habit.

But the most important for me is not vertical tabs on PC, but vertical tabs on phone, on PC there are multiple extensions for vertical tabs and a big screen so I don't actually need to see icons instead of full names, but I really need some solution on phone, something like an icon view on tab group in chrome (which is the only cause why I am still using chrome except touch-to-search).