Vertical tabs for more efficient use of space and easier/faster navigation

[nickchomey]

Use case or problem

The new tabs feature is very useful, but like an internet browser, you can accumulate tabs very quickly. This makes it very difficult to scan, re-order and navigate them.

Proposed solution

If we could have the tabs displayed vertically - as is possible in the Microsoft Edge and Vivaldi browsers (or extensions for other browsers) - it would solve all of the problems.

e.g.
Normal

Vertical

The tab bar is also collapsible, but shows in full when you hover, then hides again.

It can also be scrolled within, like other pane - such as the Files or Search tabs (animated gif below - click to watch).

In fact, perhaps the best way to implement it is to make it use the same mechanism as the various side panel widgets, meaning that we could drag its icon around or put it in the left or right side panel. (this is what I’m referring to)

Here’s one of many articles that describes the usefulness of vertical tabs in more detail: You Should Switch to a Browser With ‘Vertical Tabs’

Current workaround

The new Tab Stack mode is a sort of workaround, but not really - it becomes unusable beyond maybe 10 or 15 tabs because of the large amount of vertical white/dead space. Also, it is hard to read the titles with their text being vertically-oriented

[chrsle]

Love the idea.
It could be a vertical tabs stack for each open pane.
I guess the question is, can Obsidian handle 20 to 100 open notes at the same time?
(I tend to get excessive with open tabs if I can)

[nickchomey]

Yeah, I like that idea to have a stack for each pane - it’s probably the only way to do it?

As for performance limits, that’s probably very dependent on each computer… I’m not sure that’s the concern of Obsidian though, just as it isn’t the concern of any web browser. If your computer starts to chug, then you have to clean up your tabs or upgrade your RAM… All Obsidian should care about (and does a great job with!) is making it all run as efficiently as possible.

Though, I suppose a REALLY advanced mechanism could be to automatically put tabs to “Sleep”, as is possible in Microsoft Edge. That’s probably way beyond our current scope or needs though.

[nickchomey]

Another thought about this - perhaps it would be challenging to have vertical tab lists/stacks shown for each pane. So, maybe it could just be a floating tab stack modal that displays when you either

1. hover the tabs,
2. hover the left edge of the pane, or
3. click a button in the left side of the horizontal tab list

Or something else to that effect, such that the tabs take up even less space.

Or maybe there could be one vertical tab stack that is shown in/available from the left sidebar but the actual tabs shown in it reflect the active pane? I don’t know if that would be useful of confusing…

[Ocarinalover]

I just came up with this idea once I tried the 1.0 version, this chromium-edge-like vertical form is more suitable for displaying the long titles (current solution looks a little bit redundant)and convenient for moving tabs out to new windows

[Ocarinalover]

any news about this idea， I have a pretty small screen( 13.3 inch ), tabs or stack view takes too much spaces when I have 13 or 14 of notes opening, so this vertical tab view is very important to me.

[sanhuesoft]

loved this idea

[HITshrink]

A simpler approach would be to include a user-selectable vertical tab width. For my needs, there is too much whitespace there. So, instead of having this…

…the user can shrink it to this…

Then, to reduce the “noise” from the compact spacing, dim the font color on the vertical tabs to reduce the contrast from the background color so that it pulls less on your focus. (Maybe also reduce the vertical tab font size.)

This simple tweak will help the use case when there are a manageable number of tabs (say, under a dozen), but will not help for use cases where one has dozens of tabs. But, I think having control of the compactness will be quite helpful to many users.

[BambooBastille]

+1

Text to be written vertically in a tab stack would be nice as an interim as well. Having to tilt my head to the side to read is a little disorientating haha

[TheEmperor]

I created a small CSS code that fixes the text orientation. It will be included within my CyberGlow theme’s next update which is partly focused on stacked tabs, but until then here is that code that I mentioned so you don’t need to tilt your head and break your neck trying to read the tabs.

Can load this as a snippet CSS file with any theme you want.

Edit: This is for the default font, using custom font for the UI might not work well, so you may need to alter the code a bit to make it fit with your desired font.

.workspace .mod-root .workspace-tabs.mod-stacked .workspace-tab-container .workspace-tab-header-inner-title{
    text-orientation: upright;
    letter-spacing: -3px;
text-transform: uppercase;
}

[TheEmperor]

I’d love this but I feel like they would need to rearrange quite a bit of the UI/sidepanels.

[kazzy]

Actually, there is a plugin to show vertical panes/tabs: obsidian-koncham-workspace

It does pretty much what is being requested in this thread.

Here are some steps to improve the UX further:

1. Drag the koncham section out of the side-bar and dock it as a separate pane
2. Install the Obsidian Hider plugin to hide the native tab-bar
3. Install the Obsidian Hover Editor plugin
4. Then opt to convert the “Centre Panes” pane to a hovering editor
5. Pin the hover editor (click pin icon on top left) - you can now place it anywhere you find convenient
6. Use the following CSS snippet to beautify the tabs look (this can also be used without the hover editor)

Cons:

1. To switch tabs, you need to double-click the tab-names
2. One of the tabs in the list will always be “Centre Panes” (this can probably be remedied by a CSS hack)

.koncham-workspace.koncham-workspace-root-panes {
	height: 100% !important;
    position: relative;
    display: flex;
    align-items: center;
}

.koncham-workspace.koncham-workspace-root-panes .nav-folder-children {
	margin: 0.5em auto;
	cursor: pointer;
}

.koncham-workspace.koncham-workspace-root-panes .nav-file {
	background: white;
	border: 2px solid #00b7ff7d;
	margin: 0.5em;
	cursor: pointer;
}

.koncham-workspace.koncham-workspace-root-panes .nav-file-title:hover,
.koncham-workspace.koncham-workspace-root-panes .nav-file-title.is-active {
	background: #edfaff;
}

.koncham-workspace.koncham-workspace-root-panes .nav-file-title-content {
	margin: auto;
	font-size: 14px;
	cursor: pointer;
}

In the image below, I have pinned the “Centre Panes” hovering editor and parked it in the right top corner.

[nickchomey]

@kazzy Nice one! I’m prefer how it looks with just using Koncham Workspace with its default behaviour and then hiding the tab bar with Hider.

However, when you hide the tab bar, this seems to make it very cumbersome to use panes, which is a non-starter for me. This is because you cannot drag from or right click on the center tab/vertical tab list. You can only open a note in a new pane from other sidebar panels (Drag or Click from Files or Search)

But, also, the vertical tab list gets sort of cluttered when you have multiple panes open, each with multiple tabs. There’s no delineation/indication for which pane a tab is in.

All in all, I’ll leave Koncham Workspace open for a bit but will likely just turn it off and hope that this functionality can get implemented in a slicker way at the Obsidian-core level.

[zerkshop]

not quite vertical, but maybe this can be of use to further hack on: Tabs in multiple rows

[kazzy]

@nickchomey

However, when you hide the tab bar, this seems to make it very cumbersome to use panes, which is a non-starter for me.

Well I too faced those difficulties - but for me the real problem was the inability to pin or close panes from the vertical tabs list. I had to re-enable the native tabs to do that.

So here’s a brand new solution that I simply love!

It refashions the native tab-bar into cool vertical tabs, with very little drawbacks and absolutely no loss of functionality.

The only drawbacks I can see:

1. The icon to enable the right side-panel is appears at the bottom of the tab-list, instead of the top-right.
2. In horizontal split-mode, the tab-list for the right-pane, seems to get in the way. i now prefer to use the vertical split mode exclusively.
3. I have not tried opening a gazillion tabs, so I don’t know how well it will scroll - maybe just add overflow:scroll if it doesn’t work (sorry, feeling a bit lazy at the moment to try it out and add the fix myself, plus very much excited at the new look!!)
4. To hide the tab-list, for say, a canvas - one has to use the hider-plugin to toggle the tab-bar. I prefer to do it via a cMenu entry at the bottom instead of remembering another shortcut.

I have added some cosmetic improvements as per my taste - and they go well with the dark-theme, but they can be easily removed.

I hope this will inspire someone to make a plugin with an improved UX.

So, without further ado, presenting the new “Native Vertical Tabs”:

.mod-root .workspace-tabs {
    flex-direction: row;
}

.workspace .mod-root .workspace-tab-header-container {
    flex-direction: column;
    height: -webkit-fill-available;
    width: fit-content;
    padding-right: 0;
    padding-left: 0 !important;
    border: 1px solid green;
    border-radius: 10px;
}

.workspace .mod-root .workspace-tab-header-container-inner {
    margin-top: auto;
    flex-direction: column;
    /*border: 1px solid #57a5ff;*/
    margin-left: 1px;
    margin-right: 1px;
}

.workspace .workspace-split.mod-root .workspace-tab-header {
    min-width: 250px;
    padding: 7px 5px;
}

.workspace .mod-root .workspace-tab-header {
    min-width: 300px;
    padding: 7px 5px;
}

.workspace .mod-root .workspace-tab-header-inner-title {
    font-size: 15px;
}

.workspace .mod-root .workspace-tab-header-container-inner .workspace-tab-header {
    max-height: 50px !important;
    border-radius: 0;
}

.workspace .mod-root .workspace-tab-header .workspace-tab-header-inner-close-button {
    display: flex !important;
}

.mod-root .workspace-tab-header-inner {
    width: -webkit-fill-available;
}

.mod-root .workspace-tab-header-spacer {
    display: none;
}

.mod-root .workspace-tab-header-tab-list {
    justify-content: center;
    margin-left: -10px;
    margin-bottom: auto;
}

.mod-root .workspace-tab-header-new-tab {
    justify-content: center;
}

.is-hidden-frameless:not(.is-fullscreen)
.workspace-tabs.mod-top-right-space
.workspace-tab-header-container:after {
    display: none;
}
.is-hidden-frameless:not(.is-fullscreen)
.workspace-tabs.mod-top-right-space
.workspace-tab-header-container {
    padding-right: 0;
}

.workspace .mod-root .workspace-tab-header::before,
.workspace .mod-root .workspace-tab-header::after,
.workspace .mod-root .workspace-tab-header-inner::after {
    display: none;
}


#cMenuModalBar {
    bottom: 1px !important;
    left: 30%!important;
}

[Synchronicity]

I like this idea. I’d like to see a choice of being able to put the vertical tabs in either the left or the right panel. I definitely wouldn’t want it taking up space in the editing window, even if it were collapsible.

[siebentod]

Sorry for off-topic maybe, but I found this page when was searching for a way to make tabs vertical in the Window mode. Just like in Sublime Text by default. Would be useful, because when you use a Window with horizontal tabs (even when there are few, 3-4), you just can’t see titles of them, because, well, it’s a small window.
(Maybe someone who will implement topic feature would make it also for Window mode)

[Ocarinalover]

Great work. Do not support scrolling up and down if there are too many tabs. looking forward to a full-grown plugin for this

[ryangibb]

I really like this! The only thing that seems broken is scrolling. Did you have any luck adding it @kazzy?

[Ocarinalover]

Any news regarding the vertical tabs plugin？