Panel menu instead of icons in two lines

I would like to suggest changing the way icons are displayed on panels in two rows. Where the first row is the panel icons and the second row is the tool icons for these panels.
This option is not so much a problem as a visual imbalance, and then not for everyone. But you will probably be interested in the display option that I offer and it will also seem more convenient to you

I suggest removing a number of panel icons in the menu. And the icon will only display the current panel. The rest of the icons in the row will be tool icons for this panel.
Clicking on the panel icon displays a menu with available panels.
Clicking on another panel in the menu :
1- Opens another panel in the current window.
2- Changes the display of the icon of the opening menu to the icon of the new panel.
3- changes all tool icons to those that correspond to the new window

Dragging the panel to a new window is also saved. To do this, open the Panel Menu and drag the panel from the list and place it in the right place

In the new window, the panel will also have a menu of panels in a row with tool icons, in addition to saving space, this will allow you to quickly change the type of a new panel from the menu and not drag another window to the second place.

The mobile app works this way and I dislike it. It makes switching take twice as long (3 times as long when you count the slow animation).

I haven’t seen anything like this in the mobile app and specifically checked again.

The difference between what is now and what I propose is the same difference as clicking on a button or an item in the menu.

You’re right that two clicks is more than 1, but how often do you need it? the majority should already decide here. But as far as I can see, my ideas are not particularly interesting to the public. apparently my lot is custom side .

The dragging stuff isn’t in mobile, but the stuff that adds an extra click is. It’s presented a little differently — instead of a drop-down menu, the list takes over the whole sidebar.

It varies, but the mobile implementation irritated me every time I used it. It’s less bad now that I have a snippet to speed the animation.

Most of my FRs haven’t gotten much attention, either. The life of a feature requester is a hard one.

the mobile implementation of obsidian is not the best solution from the point of view of UX , but what I 'm talking about can easily be viewed in any program , for example in a browser . you can click on the link or open the folder and click on the link if there are 5-6 links in the folder it will be very easy

I came up with a solution to not press twice to switch. You can use a plugin for Ap Ribbon for example Customizable Sidebar and display icons there for single click movement

1 Like

hi everybody. I have made significant progress and done all this in css, the only thing I can 't do is display the icon of the active panel in the row instead of the one that is first in the list. For this, I need the help of those who can do this in javascript .

It is necessary to make any active element become the first in the column after its selection.

  • TypeScript :wink:

This thread was originally in Feature Requests, right, or am I confused?

This was done at my request.
So there are more chances for implementation. there’s just a little bit left.

Who wants to try how it feels, I’m putting css here. I will be glad for any contribution to improvement

.is-hidden-frameless:not(.is-fullscreen) .workspace-split.mod-horizontal .workspace-tabs .workspace-tab-header-container,
.is-hidden-frameless:not(.is-fullscreen) .workspace-split.mod-horizontal .workspace-tabs.mod-top-right-space .workspace-tab-header-container,
.is-hidden-frameless:not(.is-fullscreen) .workspace-split.mod-horizontal .workspace-tabs.mod-top-left-space .workspace-tab-header-container{
  height: 0;  

.is-hidden-frameless:not(.is-fullscreen) .workspace-split.mod-horizontal .workspace-tabs .workspace-tab-header-container .workspace-tab-header-container-inner,
.is-hidden-frameless:not(.is-fullscreen) .workspace-split.mod-horizontal .workspace-tabs.mod-top-right-space .workspace-tab-header-container .workspace-tab-header-container-inner ,
.is-hidden-frameless:not(.is-fullscreen) .workspace-split.mod-horizontal .workspace-tabs.mod-top-left-space  .workspace-tab-header-container .workspace-tab-header-container-inner {
  border: 1px solid transparent; 
  border-radius: var(--radius-m);
  width: 48px;
  flex-direction: column ;
  z-index: var(--layer-menu);
  height: 34px ;
  display: block ;
  margin-left: 6px;
  padding: 4px;
  margin-top: 4px;   

.is-hidden-frameless:not(.is-fullscreen) .workspace-split.mod-horizontal .workspace-tabs .workspace-tab-header-container  .workspace-tab-header-container-inner:hover,
.is-hidden-frameless:not(.is-fullscreen) .workspace-split.mod-horizontal .workspace-tabs.mod-top-right-space .workspace-tab-header-container  .workspace-tab-header-container-inner:hover,
.is-hidden-frameless:not(.is-fullscreen) .workspace-split.mod-horizontal .workspace-tabs.mod-top-left-space  .workspace-tab-header-container  .workspace-tab-header-container-inner:hover{
  border-color:  var(--background-modifier-border-hover); 
  background-color: var(--background-secondary);
  box-shadow: var(--shadow-s); 
  height: 200px ; 

.workspace-split.mod-left-split .workspace-tab-header,
.workspace-split.mod-right-split .workspace-tab-header {
  height: 28px;
  width: 36px;  
  flex-direction: column;
  margin-bottom: 8px; 

.nav-header {   
    height: 44px ;
    margin-bottom: 20px;      

.is-hidden-frameless:not(.is-fullscreen) .workspace-split.mod-horizontal .workspace-tabs.mod-top-right-space .nav-header,
.is-hidden-frameless:not(.is-fullscreen) .workspace-split.mod-horizontal .workspace-tabs.mod-top-left-space .nav-header { 
    background-color: var(--background-secondary-alt);

.nav-buttons-container {
  justify-content: flex-end; 

.workspace-leaf-content[data-type='outgoing-link'] .view-content, 
.workspace-leaf-content[data-type='outline'] .view-content {
  margin-top: 44px ;

.is-hidden-frameless:not(.is-fullscreen) .workspace-split.mod-horizontal .workspace-tabs.mod-top-right-space .nav-buttons-container {
  z-index: 48 ;
  margin-right: 130px;

Now the drop-down menu is working and you can drag icons directly from to any area as usual. But there are a few problems:

  • It is necessary that the icon of the active element is always the first in the column, then it will be displayed on the panel. I haven’t found a way to do this in pure css.

  • from hiding .workspace-tab-header-container in the topbar, dragging the program window using empty spaces between icons has broken.

  • in the original idea, it was so that in each window there would be a menu with all the icons and you could select any panel and it would open in this window and you wouldn’t need to drag it from another window, it would move automatically. You will need to drag the panels only when there is no panel in this place yet otherwise use a simple switching menu. This cannot be done in css. Need help type script

1 Like

OK, good. I wouldn’t have intentionally made my original comment on a plugin idea.

Just wanted to give feedback on this issue. Hiding the tab bar will be more aesthetically pleasing, and moving forward or backward can load the status bar

How can this be achieved?

Wow, thanks for sharing. It’s crazy what can be done with a little CSS!