Folder tree breadcrumb


If you ever worked with a medium/large projects your folder tree will look like a never ending scrollbar.

What if as you scroll down the folder tree the breadcrumbs remained visible? Example of two possible rendering:

This would take very little vertical space on the folder tree and require no learning. Clicking the trail could just scroll to that place.


How would you see all the other “top level” folders, e.g. siblings of “src” in your example?


A while back I opened this Issue for similar functionality:


I like this idea and I think it could be a great plugin to write. And having one in the editor view (ala webstorm) could also be a great a addition

@batjko I think in that case you just scroll up to make them appear. As I understand it, the breadcrumb display the path to the first visible row in the tree view, as a top bar, but doesn’t actually transform the tree itself.


What about breadcrumbs in the status bar?

Or maybe at least make the current path (which it currently displays) navigable?


A breadcrumbs trail at the top or bottom perhaps, with each breadcrumb able to produce a dropdown menu with the files and directories for that breadcrumb.


I can hear someone typing away on tree view package “breadcrumb” already.


I hope so, I don’t got the skills for it yet :smile:


Here you go:

Still in early stage, no click to scroll to the corresponding item yet, and no tree render neither.
The styling is currently pretty simple, it’s just a button group with the last item with primary color.
Sadly, the bootstrap breacrumb not being used anywhere else, there’s no way that every themes had defined styles for it so I had to fallback on buttons instead.


Wasn’t it suppossed to be horizontal, or? But great effort, @abe. I am admiring you all, that got the skill to produce plugins.


@rogernordqvist What is not horizontal enough ? I fail to see what you’re talking about.


I think he means it’s not obvious that the breadcrumbs are a new little bar on top of the file structure.
@rogernordqvist It doesn’t actually replace the tree structure underneath.


Sorry, I have to appologize, @abe. As @batjko said, I did not notice the small bar above the tree view. Mainly because I’ve already painted a mental picture that it would be a horizontal line through the whole width of the editor. Either below the dropdown menus, or above the status line and bottom of the editor.

Got that impression from the image that started this idea. But now when I’m watching it again I see you got the main idea totally right. I missunderstood it :smile:

As I understood it from the start, it would almost have been a replacement for the traditional treeview.

I hope you did not take any offence @abe, not my intension.


No offense, of course :), I wasn’t sure what you were referring to as we talked about two kind of breadcrumb:

  1. one for the tree view that gives the path to the first visible element in the tree
  2. one for the editor view that gives the path of the current file and that could offer dropdowns to open new files from there.

My package currently implement the first one, but the second is also feasible and will be equally useful.

The cost would have been huge, and with probably a lot of UX issues. Maybe someone will come someday with a replacement for the tree-view but I didn’t feel it was what was needed here.


The cost would have been huge, and with probably a lot of UX issues. Maybe someone will come someday with a replacement for the tree-view but I didn’t feel it was what was needed here.

You are probably right about that. I could see a big value in it though. Laptops for example, we often go side by side with applications, and our precious width is quickly eaten by applications. Pixelwise we would save pixels by going with horisontell breadcrumb / treeview and dropdown menus.


Wow, somehow I missed this in the gif as well.

Same original gif right? I can’t believe it looks so obvious now :smile:

I have tried it with atom-dark and I like the blue that pops up. Nice work @abe!