🔥VSCode Breadcrumbs Are Here, And I Love 'em!
Tags: vscode, code
Published: 2018-08-14 06:28:46

---
title: 🔥VSCode Breadcrumbs Are Here, And I Love 'em!
published: true
description: 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. 
tags: vscode, code
---

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. 

![image](https://on.ahmda.ws/1N3c2q0Q0r2L/c)

### 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…](https://code.visualstudio.com/updates/v1_26#_breadcrumbs)



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 <code>"breadcrumbs.enabled": true</code>. 

{%tweet 1029240599940136961 %}

To interact with breadcrumbs, use the Focus Breadcrumbs command or press <kbd>SHIFT (⇧)</kbd> + <kbd>COMMAND (⌘)</kbd> + <kbd>PERIOD (.)</kbd> and use arrow keys <kbd>ARROW KEYS (←/→)</kbd> to move around.

## 🥖 VSCode Breadcrumbs Tips & Tricks

I have shared more details in the tips below:

- ✅ [VSCode.pro/tip/15 →](https://VSCode.pro/tip/15) (Enable breadcrumbs in VSCode)
- ✅ [VSCode.pro/tip/16 →](https://VSCode.pro/tip/16) (Shortcuts/Iteration tips & tricks)


{%tweet 1029240610379755521 %}




## 🦄 [Shades of Purple `v2.5` →](https://marketplace.visualstudio.com/items?itemName=ahmadawais.shades-of-purple)


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 →](https://marketplace.visualstudio.com/items?itemName=ahmadawais.shades-of-purple) which is being used by ~15,000 developers.

<a align="center" href="https://marketplace.visualstudio.com/items?itemName=ahmadawais.shades-of-purple"><img align="center" src="https://dha4w82d62smt.cloudfront.net/items/1S3J0I0p2t3I303D0r24/SOPv2-1920x1080-Small-Slow-2mb.gif" /></a>

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 →](https://marketplace.visualstudio.com/items?itemName=ahmadawais.shades-of-purple)

[![Developers Using 🦄 Shades of Purple ](https://vsmarketplacebadge.apphb.com/installs/ahmadawais.shades-of-purple.svg?label=Developers&colorB=B168F5)](https://marketplace.visualstudio.com/items?itemName=ahmadawais.shades-of-purple)


Peace! ✌️