# Feature Suggestion: Flow Tabs on left side. remove/hide/popup nodelist

**URL:** <https://discourse.nodered.org/t/feature-suggestion-flow-tabs-on-left-side-remove-hide-popup-nodelist/36371>\
**Category:** Feature Requests\
**Created:** [23 November 2020 04:52 UTC](https://discourse.nodered.org/t/feature-suggestion-flow-tabs-on-left-side-remove-hide-popup-nodelist/36371 "2020-11-23T04:52:30Z")\
**Posts on this page:** 13\
**Page:** 1

<div class="post-metadata">

**Author:** ![svefro](https://sea2.discourse-cdn.com/flex026/user_avatar/discourse.nodered.org/svefro/32/4306_2.png) [@svefro](https://discourse.nodered.org/u/svefro)\
**Post date:** [23 November 2020 04:52 UTC](https://discourse.nodered.org/t/feature-suggestion-flow-tabs-on-left-side-remove-hide-popup-nodelist/36371/1 "2020-11-23T04:52:30Z")

</div>

I have a relatively large project going. My entire house is running on node red.

I currently have 25 flows and they are pretty packed.  
Nowadays i rarely add many new nodes and mostly have the nodes list hidden.  
if i do need to add a new node i mostly CTRL Click to find it.

With 25 flows navigating between the flow tabs starts to get annoying.

I would rather have the tabs on the left side so i can easily move between all of them.

I suggest an option in view settings to enable this.

Flow Tabs location : Top (default)/Left

Selecting "left" would then remove the node list and replace it with a vertical list of tabs  
The flow editor would then grow up where the tabs was before  
An "Add Node" button would appear where "filter nodes" searchBox-input is now. Clicking this slides in the node list over the flow tab list /Replaces it.

I do not have the knowledge at this time to implement this on my own but i have tinkered a bit in chrome dev-tools to get the approximate layout.

Is this something that anybody else think could be useful?

 ![Screenshot 2020-11-23 060217](https://us1.discourse-cdn.com/flex026/uploads/nodered/original/3X/c/7/c79975a4107433fa241d3d41b3f397d67c708402.png)

---

<div class="post-metadata">

**Author:** ![kuema](https://sea2.discourse-cdn.com/flex026/user_avatar/discourse.nodered.org/kuema/32/6542_2.png) [@kuema](https://discourse.nodered.org/u/kuema)\
**Post date:** [23 November 2020 05:57 UTC](https://discourse.nodered.org/t/feature-suggestion-flow-tabs-on-left-side-remove-hide-popup-nodelist/36371/2 "2020-11-23T05:57:42Z")

</div>

That feature request has come up several times.

I absolutely understand the necessity for that, I have to deal with large projects myself.

However, the new outline (NR \>= 1.1) has become quite handy for navigation tasks, in my case at least. Could that be useful in your case as well?

---

<div class="post-metadata">

**Author:** ![svefro](https://sea2.discourse-cdn.com/flex026/user_avatar/discourse.nodered.org/svefro/32/4306_2.png) [@svefro](https://discourse.nodered.org/u/svefro)\
**Post date:** [23 November 2020 06:36 UTC](https://discourse.nodered.org/t/feature-suggestion-flow-tabs-on-left-side-remove-hide-popup-nodelist/36371/3 "2020-11-23T06:36:31Z")

</div>

That blocks the debug window or any other panel so i do not think it is a solution for me.

For now i created a custom stylesheet and used chrome extension stylish to apply it

it is just a first draft

```auto

/*
Apply using stylish chrome extension
*/

.scroll-container::-webkit-scrollbar {
  display: block;
width: 10em;
overflow: auto;
height: 2em;
}
#red-ui-workspace > div.red-ui-tabs.red-ui-tabs-add.red-ui-tabs-search.red-ui-tabs-scrollable > div.red-ui-tab-button.red-ui-tab-scroll.red-ui-tab-scroll-right > a{
display:none;
}

#red-ui-workspace > div.red-ui-tabs.red-ui-tabs-add.red-ui-tabs-search.red-ui-tabs-scrollable > div.red-ui-tabs-scroll-container{

}
#red-ui-workspace > div.red-ui-tabs.red-ui-tabs-add.red-ui-tabs-search.red-ui-tabs-scrollable {
position: absolute;
left: 0;
width: 170px;
bottom: 0px;
top: 0px;
height: 100%;
display: grid;
display: -webkit-inline-box;
overflow-y: scroll;
padding-left:5px;

}

#red-ui-workspace-chart{
margin-left: 170px;
}
#red-ui-workspace > div.red-ui-tabs.red-ui-tabs-add.red-ui-tabs-search.red-ui-tabs-scrollable > div.red-ui-tabs-scroll-container{
height: 100%;
margin-bottom: 60px;
overflow-x: hidden;
overflow-y: scroll;
    margin-top: 60px;
}
#red-ui-workspace-tabs{
display: contents;
}

```

---

<div class="post-metadata">

**Author:** ![Steve-Mcl](https://sea2.discourse-cdn.com/flex026/user_avatar/discourse.nodered.org/steve-mcl/32/4826_2.png) [@Steve-Mcl](https://discourse.nodered.org/u/Steve-Mcl)\
**Post date:** [23 November 2020 07:00 UTC](https://discourse.nodered.org/t/feature-suggestion-flow-tabs-on-left-side-remove-hide-popup-nodelist/36371/4 "2020-11-23T07:00:35Z")

</div>

Hi, could you post a screenshot of what that does to the editor please?

---

<div class="post-metadata">

**Author:** ![svefro](https://sea2.discourse-cdn.com/flex026/user_avatar/discourse.nodered.org/svefro/32/4306_2.png) [@svefro](https://discourse.nodered.org/u/svefro)\
**Post date:** [23 November 2020 07:23 UTC](https://discourse.nodered.org/t/feature-suggestion-flow-tabs-on-left-side-remove-hide-popup-nodelist/36371/5 "2020-11-23T07:23:57Z")

</div>

here are 2 screenshots. one with node list (pallete) hidden and one with shown

 ![Custom Screenshot 2020-11-23 082233 nodelist hidden](https://us1.discourse-cdn.com/flex026/uploads/nodered/original/3X/b/3/b3894920320a2db23dea962e181a5a19ee681874.png) ![custom-Screenshot 2020-11-23 082204 with nodelist](https://us1.discourse-cdn.com/flex026/uploads/nodered/original/3X/3/2/32a4c879268502661815508d9ee61d2906b0608c.png)

---

<div class="post-metadata">

**Author:** ![Steve-Mcl](https://sea2.discourse-cdn.com/flex026/user_avatar/discourse.nodered.org/steve-mcl/32/4826_2.png) [@Steve-Mcl](https://discourse.nodered.org/u/Steve-Mcl)\
**Post date:** [23 November 2020 07:57 UTC](https://discourse.nodered.org/t/feature-suggestion-flow-tabs-on-left-side-remove-hide-popup-nodelist/36371/6 "2020-11-23T07:57:52Z")

</div>

That is quite decent.

Would you be able to create a full theme & release it on the forum - a [bit like this](https://discourse.nodered.org/t/a-dark-theme-for-node-red-here/1669/2) one - with your customisation built in?

---

<div class="post-metadata">

**Author:** ![Colin](https://sea2.discourse-cdn.com/flex026/user_avatar/discourse.nodered.org/colin/32/17040_2.png) [@Colin](https://discourse.nodered.org/u/Colin)\
**Post date:** [23 November 2020 09:38 UTC](https://discourse.nodered.org/t/feature-suggestion-flow-tabs-on-left-side-remove-hide-popup-nodelist/36371/7 "2020-11-23T09:38:52Z")

</div>

+1 for that idea, that would be great. Even better if it were included in the dark theme.

---

<div class="post-metadata">

**Author:** ![msauto](https://sea2.discourse-cdn.com/flex026/user_avatar/discourse.nodered.org/msauto/32/32807_2.png) [@msauto](https://discourse.nodered.org/u/msauto)\
**Post date:** [24 November 2020 02:06 UTC](https://discourse.nodered.org/t/feature-suggestion-flow-tabs-on-left-side-remove-hide-popup-nodelist/36371/8 "2020-11-24T02:06:48Z")

</div>

++1 Awsome! Lots better, and easier to navigate than across top.

---

<div class="post-metadata">

**Author:** ![svefro](https://sea2.discourse-cdn.com/flex026/user_avatar/discourse.nodered.org/svefro/32/4306_2.png) [@svefro](https://discourse.nodered.org/u/svefro)\
**Post date:** [24 November 2020 06:03 UTC](https://discourse.nodered.org/t/feature-suggestion-flow-tabs-on-left-side-remove-hide-popup-nodelist/36371/9 "2020-11-24T06:03:00Z")

</div>

Added the css to [https://userstyles.org/styles/193142/node-red-admin-sidebar-tabs](https://userstyles.org/styles/193142/node-red-admin-sidebar-tabs)

Apply it using Stylish chrome extension.

Since this is just a small layout change it should in theory work together with the dark theme for those that use that.

I think this (a more streamlined version) should be implemented in node-red itself.

I wish i had the time and knowledge to do so but i don't

---

<div class="post-metadata">

**Author:** ![msauto](https://sea2.discourse-cdn.com/flex026/user_avatar/discourse.nodered.org/msauto/32/32807_2.png) [@msauto](https://discourse.nodered.org/u/msauto)\
**Post date:** [28 November 2020 22:11 UTC](https://discourse.nodered.org/t/feature-suggestion-flow-tabs-on-left-side-remove-hide-popup-nodelist/36371/10 "2020-11-28T22:11:25Z")

</div>

Thanks ! Works great with the Dark Theme. Just fyi, for anyone trying to apply this style using the link above or searching for it on the Stylish website, be patient it is very slow going on chrome but it will eventually open the page. Same with the install. But once its installed everything is back to normal. I have a gigabit connection and if you have a slower connection it will really take a while. This could be something wonky on my end. I am not sure. I gave up the first time and just now went back to try again and waited a bit longer and it eventually worked.  
Thanks again @svefro  
UPDATE\*\* If you click the links on stylish website twice it loads faster. Makes no since but it works.

 ![Screenshot (80)](https://us1.discourse-cdn.com/flex026/uploads/nodered/original/3X/0/d/0dcb12ef566487173c214b7adef115f69bac5d9c.png)

 ![Screenshot (81)](https://us1.discourse-cdn.com/flex026/uploads/nodered/original/3X/a/1/a1db467079fdb5bbf347d929abcdda11ad715059.png)

---

<div class="post-metadata">

**Author:** ![svefro](https://sea2.discourse-cdn.com/flex026/user_avatar/discourse.nodered.org/svefro/32/4306_2.png) [@svefro](https://discourse.nodered.org/u/svefro)\
**Post date:** [29 November 2020 06:56 UTC](https://discourse.nodered.org/t/feature-suggestion-flow-tabs-on-left-side-remove-hide-popup-nodelist/36371/11 "2020-11-29T06:56:43Z")

</div>

Great that it worked 🙂  
It also took a while to load the page for me.

Still think this should be implemented in node red it self, but for now it works.  
-Svein

---

<div class="post-metadata">

**Author:** ![svefro](https://sea2.discourse-cdn.com/flex026/user_avatar/discourse.nodered.org/svefro/32/4306_2.png) [@svefro](https://discourse.nodered.org/u/svefro)\
**Post date:** [22 January 2021 06:42 UTC](https://discourse.nodered.org/t/feature-suggestion-flow-tabs-on-left-side-remove-hide-popup-nodelist/36371/12 "2021-01-22T06:42:04Z")

</div>

it has now been 2 months of using node-red with tabs on the left by using the custom theme.

I briefly had to use node-red without the custom theme on another computer and it was like downgrading to window 8.

I really think this should be implemented in node-red.

i almost never have to toggle the node-list visible as it is much easier to ctrl+click and add nodes anyway.

---

<div class="post-metadata">

**Author:** ![system](https://us1.discourse-cdn.com/flex026/uploads/nodered/original/1X/d073cd938eafa2e558d7c2cd59003b3ef4963033.png) [@system](https://discourse.nodered.org/u/system)\
**Post date:** [23 March 2021 06:42 UTC](https://discourse.nodered.org/t/feature-suggestion-flow-tabs-on-left-side-remove-hide-popup-nodelist/36371/13 "2021-03-23T06:42:54Z")

</div>

This topic was automatically closed 60 days after the last reply. New replies are no longer allowed.