How to Navigate Code with Breadcrumbs, Outline, and Sticky Scroll

Breadcrumbs, the Outline view, and Sticky Scroll help you understand where you are inside a file and jump between functions, classes, and sections without scrolling. They answer the question "what function am I in?" before you even ask it.

Breadcrumbs

The breadcrumbs bar sits at the top of the editor, above the code. It shows the file path and, when supported by the language, the symbol path leading to your cursor position.

In a TypeScript file, breadcrumbs might show src > components > Button.tsx > Button > handleClick. Each part is a clickable link. Click any segment to see a dropdown of siblings at that level: other files in the same folder, other functions in the same class, or other variables at the same scope.

If your file type has language support for symbols, the symbol portion of the breadcrumbs shows functions, classes, methods, and other structures. The symbols shown are the same as in the Outline view.

Navigating with breadcrumbs

From the keyboard, press Ctrl+Shift+. on Windows and Linux, or Cmd+Shift+. on macOS. This focuses the last breadcrumb element and opens the dropdown.

Use the left and right arrow keys to move between segments. Type to filter the dropdown list.

To navigate breadcrumbs without the dropdown, press Ctrl+Shift+; on Windows and Linux, or Cmd+Shift+; on macOS. This focuses the last element. Use left and right arrows to move, then press Space to reveal that element in the editor.

Customizing breadcrumbs

Toggle breadcrumbs from View > Appearance > Toggle Breadcrumbs or run the View: Toggle Breadcrumbs command.

You can also copy the full breadcrumb path. Right-click an editor tab and select Copy Breadcrumbs Path. The full path, including file and symbol names, goes to your clipboard.

The Outline view

The Outline view is at the bottom of the Explorer in the Primary Side Bar. Expand it to see every symbol in the currently active file: functions, classes, methods, variables, headings, and more.

The Outline view shows errors and warnings alongside symbols, so you can see problems at a glance without opening the Problems panel.

The view depends on language extensions. Built-in support covers Markdown (headings), JavaScript, TypeScript, HTML, CSS, and JSON. For other languages, install the relevant language extension.

Use the Sort By menu to order symbols by position in the file, by name, or by type. Enable cursor tracking to keep the Outline view in sync with your cursor position as you move through the file. Use the filter box to find a specific symbol quickly.

Click any symbol in the Outline view to jump to it. This is faster than scrolling through a long file looking for a function.

Sticky Scroll

Sticky Scroll pins the current scope at the top of the editor while you scroll. If you are inside a class method, the class name and method name stay visible at the top, with a subtle divider separating them from the code below.

This tells you where you are without scrolling back up. Click the sticky line to jump to the start of that scope.

Sticky Scroll uses three models to determine what to show:

1. Outline provider model -- uses the same symbols as the Outline view and breadcrumbs
2. Folding provider model -- uses code folding regions
3. Indentation model -- uses indentation to detect scope changes

VS Code tries the models in order. If your language does not provide outline or folding information, it falls back to indentation. If none of the models produce results, Sticky Scroll shows nothing.

Enable or disable Sticky Scroll with the editor.stickyScroll.enabled setting. The setting editor.stickyScroll.defaultModel controls which model to try first.

Sticky Scroll is most useful in deeply nested code. A function inside a class inside a module stays labeled as you scroll past hundreds of lines. It is less useful in flat files with no nesting.

Using all three together

These three features work together to orient you inside a file:

• Breadcrumbs tell you the full path. They are always visible at the top.
• Outline shows you the full structure at a glance. Expand it when you need to see every symbol.
• Sticky Scroll keeps the immediate scope pinned while you scroll.

Open a long file. Breadcrumbs show the file and function path at the top, and Sticky Scroll keeps the current function name pinned as you scroll.

If you need to jump to a different function, expand the Outline view and click it.

Next steps

These features help you navigate within files. To navigate across files, use Quick Open. To arrange your editor for side-by-side viewing, learn how to split editors and manage tabs.