Navigate repositories faster with the file tree browser

Source: GitLab Blog

You spot a file in the repository browser, click into it, read the code, and then need to check something elsewhere in the tree. Hitting the back button, navigating down again, and repeating quickly becomes tedious.

If you’ve ever wished the repository browser felt more like an IDE and less like a series of breadcrumb trails, the file tree browser introduced in GitLab 18.9 is for you.

What the file tree browser does

The file tree browser adds a collapsible, resizable panel alongside your file and directory views, keeping the project structure visible while you read and navigate code. It eliminates the need to lose your place or click back to figure out where you are.

• Shows files and directories in a tree next to the file list and file content.
• Expands parent directories and highlights the current file when you navigate directly to a nested file.
• Synchronizes with the main content area: selecting a file updates the tree automatically.

Navigate with structure

• Expand and collapse directories while maintaining a clear view of your location in the repository hierarchy.
• The tree expands parent directories and highlights the current file when you jump to a nested file.

Filter by filename

• Press F to open the global search dialog.
• Type part of a filename to jump to it; each result shows its parent directories for context.

Keyboard‑first navigation

• Implements the W3C ARIA treeview pattern.
• Navigate using arrow keys, Enter, Space, Home, End, and character keys.
• Improves accessibility for screen‑reader users and anyone who prefers keyboard navigation.

Responsive across viewports

• Desktop: Tree sits side‑by‑side with the file list and code.
• Smaller viewports: Becomes a left‑side drawer you can toggle.
• Mobile: Tree is hidden to allow the code view to use the full screen.

Built for large repositories

• Uses pagination to load more items as needed, keeping the experience responsive as the project grows.

See the file tree browser in action

Watch GitLab Principal Developer Advocate Michael Friedrich walk through the new file tree browser and see how it makes navigating large repositories feel like working in your IDE. The demo uses the GitLab project Tanuki IoT Platform, which you can explore yourself to try the file tree in a real repository.

Try the file tree browser today

The file tree browser is available now on GitLab.com and was released in 18.9 for GitLab Self‑Managed and GitLab Dedicated.

1. Open any repository file or directory view in your project (//-/tree/).
2. In the upper left corner, select the file tree icon or press Shift + F to toggle the file tree browser.
3. Press F to filter files by name or extension, start typing, and use the arrow keys plus Enter to jump directly to the file you want.

What’s next

The Source Code team built the file tree browser with accessibility, performance at scale, and cross‑viewport consistency as core requirements. These principles will continue to guide future iterations, and your feedback will help shape them.

Help us continue to improve the file tree browser

Share your thoughts about the file tree browser in our feedback issue.

Want to learn more? See the file tree browser documentation.