New Plugin: Vertical Tabs for Obsidian

kazzy · March 23, 2023, 11:36am

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:

The icon to enable the right side-panel is appears at the bottom of the tab-list, instead of the top-right.
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.
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!!)
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 · March 23, 2023, 4:40pm

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 · March 26, 2023, 9:46am

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 · April 5, 2023, 1:03pm

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 · June 18, 2023, 11:27am

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

Ocarinalover · July 10, 2023, 2:35am

Any news regarding the vertical tabs plugin？

Ocarinalover · July 10, 2023, 2:51am

I just found a plugin for this purpose, the function is still primitive, yet have great potential, 【feature request】Support functional pages created by other plugin such as ‘Calendar’ page created by the full calendar plugin · Issue #15 · hdykokd/obsidian-vertical-tabs-view (github.com)

Jopsd · July 21, 2023, 4:53pm

Tabs become plugins
As shown in the picture, the upper column is the original style, and the bottom is my thoughts.

Jopsd · July 22, 2023, 8:47am

Ocarinalover · July 22, 2023, 10:25am

Great idea, haven’t seen anything like this before.

nickchomey · October 29, 2023, 3:43pm

I’m REALLY liking this plugin so far. The dev is very responsive to feature requests as well. Definitely check it out

cwhiii · November 29, 2023, 4:21pm

This is really great! The only issue I’ve found is that I can’t seem to rearrange the tabs. Do you have a solution for that?

kazzy · December 17, 2023, 5:01pm

hi - thanks for trying it out!

I haven’t had time to look more into this feature.

You can only drag a tab to the bottom of the list, that means you have to shift one-by-one. Better way is to just switch-off vertical tabs and rearrange and switch back-on.

I know this solution is worse than the problem - but I really can’t dedicate more time to this atm.

I am working on ways to get a viable clean column-layout for notes. All the solutions I have seen so far include adding markers or using code-blocks - which I don’t like.

That’s all for now and apologies for providing a half-feature!

cwhiii · December 17, 2023, 5:11pm

I appreciate the response.

And even with this caveat, this is still 10 times better than horizontal tabs! I can’t imagine going back to not using it.

mitchell1919 · July 23, 2024, 10:32am

Hi, everyone. I made a new plugin for this. Check it out here: New Plugin: Vertical Tabs for Obsidian

JamesKF · August 27, 2024, 11:27am

Great plugin, well done !

I wish it could include some features to get closer to Sidebery on Firefox (see also related feature request by @Pyrodusk ) :

Possibility to select several tabs and group them with a custom name.
Multi-level subtree : middle-click on a link to open as a child of current tab.
Drag a tab to a parent tab.
Vertical workspaces

Sidebery could probably be our gold standard for better navigation in Obsidian. I think it’s one of the best way to navigate with workspaces and tabs, using it every day on Firefox.

mitchell1919 · December 16, 2024, 11:47am

Vertical Tabs v0.12.3

Support The Development of Vertical Tabs

Introducing Background Mode

Vertical Tabs can now run seamlessly in the background without displaying a vertical list of open tabs. Ideal for users who prefer horizontal tabs but still want advanced features like per-tab zooming and smarter tab navigation.

What’s New:

Smarter Tab Navigation Algorithms: Enhanced stability and coverage for edge cases, delivering a more reliable navigation experience.
Improved Ephemeral Tabs: Now behaves more like VSCode, with tabs becoming non-ephemeral when you drag, double-click, edit, or pin them.
New Command: Quickly convert all ephemeral tabs to non-ephemeral with a single action.
Enhanced Onboarding: Vertical Tabs now intelligently reduces the number of ephemeral tabs for a smoother start.
Refined Customization: Enjoy finer control with more options for tailoring your own tab navigation strategy.
Persistent Group States: Group collapse states are now remembered across relaunches.
Obsidian Hover Editor Support: Vertical Tabs now integrates seamlessly with Hover Editor.
New Setting: Add more control buttons back to the toolbar.
New Setting: Automatically uncollapse the active group.
New Action Button: Reveal Active Tab — quickly locate and highlight the currently active tab.

Bug Fixes:

Fixed a critical issue that caused sidebar tabs (e.g., Search and File Renaming) to become unusable.
Fixed the global collapsing state not syncing correctly.
Numerous fixes for a smoother, more reliable experience.

nickchomey · December 19, 2024, 2:21am

@mitchell1919 Vertical Tabs v0.12.3

I’ve been using your plugin for a while now. It is fantastic. Everyone should check it out

mitchell1919 · December 29, 2024, 7:51am

Vertical Tabs v0.13.0

Support The Development of Vertical Tabs

What’s New:

Web View Plugin Support: Fully compatible with the new Web View core plugin introduced in Obsidian 1.8.
Tab Editing on Mobile: Batch close tabs, move tabs, or open new files without constant switching. (Remember to disable Tab Editing mode when you’re done!)
Redesigned Tab History Browser: Enjoy a smoother experience with the newly designed tab history browser on iPad.

Improvements:

Enhanced Security.
Performance Boost: Vertical Tabs now runs faster and more efficiently.
Smarter Ephemeral Tabs: Advanced algorithms for better handling and usability.
Reveal Active Tab: Now automatically scrolls to the active tab.
More Intuitive Toolbar: Redesigned for a smoother, user-friendly experience.
New Tab Button now available on mobile.
Tab Zooming Menus on Mobile: Zooming features are now accessible on iOS and iPad.

Bug Fixes:

Resolved an issue with horizontal tab sizes in Obsidian 1.8.
Fixed tab titles not updating correctly when navigating in web viewers.
Addressed mobile sidebar drawer collapsing unintentionally.
Fixed the inability to open the local graph view.
Corrected a bug preventing the Plugin Update Tracker screen from staying focused after tab deduplication.

mitchell1919 · January 18, 2025, 2:37pm

Vertical Tabs v0.14.0

Support The Development of Vertical Tabs

What’s New:

Enhanced Keyboard Tab Switching: When using Ctrl/Cmd + 1-9 to switch between tabs, Vertical Tabs now displays tab indices. For more than 10 tabs, use Ctrl/Cmd + ←/→ to offset indices seamlessly. (See the demo video below) (#91)
Tab Preview: Preview tabs by hovering over them while holding the Ctrl/Cmd key.

Improvements:

Expanded Tab Deduplication Options: Configure whether to deduplicate popup tabs in additional windows and sidebar tabs.
Side-by-Side Split View Compatibility: Tab deduplication now works in split views, with the option to deduplicate tabs within the same group only. (#92, #96)
New Command to manually deduplicate tabs. (#92)
Automatic Reveal of Hidden Active Tabs: Active tabs hidden during deduplication are now automatically revealed. (#96)
Refined Ephemeral Tabs Algorithm: Tabs are now marked as non-ephemeral when opened via double-click or the Quick Switcher. (#99, #100)
Customizable Navigation Strategies: Easily copy and tweak existing presets to create your own tab navigation strategy.
Improved UX: Added safeguard margins to prevent accidental tab closures.
Enhanced Mobile Experience:
- Tab Editing Mode now automatically disables when collapsing the drawer. (#51)
- Added an option to always display all control buttons on mobile for better usability. (#51)

Bug Fixes:

Resolved a rare crash issue in Vertical Tabs.
Fixed UI impairments in Background Mode after relaunching Obsidian. (#101)
Corrected the “Show active tabs only” option not persisting after reopening Vertical Tabs. (#102)
Addressed inaccessible sidebar toggles in Zen Mode on iPad. (#95)
Fixed misaligned UI elements on Windows.
Prevented ephemeral states from resetting after moving or deduplicating tabs.
Fixed inconsistent tab order changes in certain scenarios.
Ensured tab deduplication triggers correctly when settings are changed.

demo