Visual Studio Code's latest release v1.26
dropped today and it's filled with great new features. And there's a nifty new feature of Breadcrumbs.
What Are Breadcrumbs in the Context of VSCode?!
A breadcrumb navigation lets you jump to symbols and files in your workspace from the top without having to mess around with the file explorer β most helpful for small screens.
The editor now has a navigation bar above its contents - we call it Breadcrumbs. It shows the current location and allows you to quickly navigate between symbols and files. To start using breadcrumbs, enable it with the View > Toggle Breadcrumbs command or via the
breadcrumbs.enabled
setting.When using editor tabs (default), breadcrumbs are displayed in a separate row below the editor title. If you are not using editor tabs, breadcrumbs show as an interactive file path next to the title. Moreβ¦
I love this new feature coz I will be using less and less of the explorer sidebar. More screen space for good old code. Enable them by this setting "breadcrumbs.enabled": true
.
![]()
![]()
Ahmad Awais π₯@mrahmadawais
π₯ TIP: VSCode.pro/TIP/15 β Latest release of π@Code has a nifty new feature of Breadcrumbs. I like it. Press β + β§ + . to access it.
Details in the tips below:
β VSCode.pro/tip/15 (Enable breadcrumbs)
β VSCode.pro/tip/16 (Shortcuts)
π RTs appreciated!05:37 AM - 14 Aug 2018
To interact with breadcrumbs, use the Focus Breadcrumbs command or press SHIFT (β§) + COMMAND (β) + PERIOD (.) and use arrow keys ARROW KEYS (β/β) to move around.
π₯ VSCode Breadcrumbs Tips & Tricks
I have shared more details in the tips below:
- β VSCode.pro/tip/15 β (Enable breadcrumbs in VSCode)
- β VSCode.pro/tip/16 β (Shortcuts/Iteration tips & tricks)
![]()
![]()
Ahmad Awais π₯@mrahmadawais
π₯ TIP: VSCode.pro/TIP/16 β You can also interact with breadcrumbs without the picker for that press β + β§ + ; and to move around press β₯ + arrow keys
Details in the tips below:
β VSCode.pro/tip/15 (Enable breadcrumbs)
β VSCode.pro/tip/16 (Shortcuts)05:37 AM - 14 Aug 2018
π¦ Shades of Purple v2.5
β
The new breadcrumbs feature is stylable and every good theme should have it styled or it would look weird. Shameless plug here, I am the author of a VSCode theme called π¦ Shades of Purple β which is being used by ~15,000 developers.
I try to keep it updated with every single VSCode major release, which is why there are 50+ releases so far. In the Shades of Purple v2.5
update two major updates are:
- π¨ Styles for VSCode Breadcrumbs
- π Styles for the upcoming VSCode Settings editor that's in preview at the moment, but it's styled in accordance with the π¦ Shades of Purple theme β
Peace! βοΈ
Top comments (21)
Great new feature from VS code. Thanks
Ain't it?! I like it. ππ
I agree with the other commenter somewhat, the article is hard to follow and I still don't really know what breadcrumbs do... But it is all ok because that theme is awesome at the end!!
Glad you liked the theme! π―
This article is just a tip β you can read more about breadcrumbs here β code.visualstudio.com/updates/v1_2... there isn't much more to it.
oh That's very kind of you to say! π―
Thanks for the heads up, definitely using it! π Hope it plays well with Ruby though, I still have to figure out my Ruby + VSCode config...
I moved my sidebar to the right side of the screen, and I love it. Maybe something you would like?
Some comments may only be visible to logged-in visitors. Sign in to view all comments.