When not using tabs in Visual Studio Code, it still shows a bar with the name of the currently open file.
Is there a way to disable this bar completely?
Add a comment |
8 Answers
Try using this to hide the title bar: "window.titleBarStyle": "custom". It can be accessed via menu File→Preferences→Settings→Window→Title Bar Style and set it to custom.
8 Comments
Peter Mortensen
There are 34 matches for "Window" (version 1.47.3). "Title Bar Style" is 2/3 down (scrolling required).
Jason R Stevens CFA
The awesome customization features of vscode once again to the rescue.
mcnesium
As of today, this does not hide the title bar, but actually set it to a custom style, which looks sort of windowsy (VSCodium v1.56.2 on Manjaro Gnome)
Guillermo Vázquez
This does not work as of now, at least for Linux Mint. It just changes the style.
KeshavDulal
I am afraid this isn't working on VsCode 1.57.1 (Big Sur)
|
Updated & working solution: Using "Custom UI Style" extension (vs code 1.100, May 2025)
TLDR: Title and menubar can be hidden using a bit of css styling in your normal user settings.json and the "Custom UI Style" extension. This works in windows and mac, AFAICS.
Caveats: Please read the description on the extensions gihub page and on the vs code extensions marketplace page as well. (a) Extension has apparently not been tested on linux, etc. (b) It modifies the vs code css styling files, similar to userchrome.css for firefox, etc. This seems logical, it is modifying vs code to add a feature that is not there, the ability to hide the titlebar.
Steps: This is what I did, what works for me:
Install extension (
subframe7536.custom-ui-style)Open your settings.json (ctrl-shift-p, "Open User Settings(JSON)"
This is the snippet of settings I have, relevant to this:
// ====================================================== // BEGIN -- SETTINGS TO HIDE TITLEBAR // this uses the subframe7536.custom-ui-style extension to load custom css "window.menuBarVisibility": "hidden", "window.customTitleBarVisibility": "auto", "window.titleBarStyle": "native", "custom-ui-style.electron": { "frame": false, "titleBarStyle": "hiddenInset" }, "custom-ui-style.stylesheet": { ".container > .title": { "display": "none !important;" } }, // ====================================================== // (END) SETTINGS TO HIDE WINDOW TITLEBAR ==== // ====================================================== Here is how my setup looks, vs code on the left, firefox on the right:
Background note: The previous solution with the APC Customize UI++ extension no longer works, as of VS Code version 1.94 (sept 2024). The reason apparently (comment) had to do with VS Code moving to ESM modules (rls notes). The solution above works for atleast current version of vs code 1.100 (May 2025).
Issue and discussion on the APC extension here: drcika/apc-extension#230
Comments
Install the custom CSS extension.
Now in your custom stylesheet:
.container > .title { display: none !important; }After, run the command "Enable custom css / js" (and restart).
4 Comments
Lamberto Basti
Where should i put the css file and how do i use it? Can you please elaborate?
Robin Drost
You can put the css file anywhere on your system. There is a setting from the plugin that let you specify a path to that css file.
Max Heiber
The
.title.tabs selector worked for me for getting rid of the tab bar. But this still doesn't save any space: the editor windows moves up and leaves an empty space at the bottom of the window.
BornToCode
.container > .title didn't have any effect on my VS Code, even though other styles (like .title.tabs that @Max mentioned) did work.According to the screenshot you attached it looks like file path is showing with a title bar. So to hide this completely, you can remove this property called "workbench.editor.showTabs" if it's value is false from settings.json file situated in /Users/(user_name)/Library/Application Support/Code/User/settings.json
1 Comment
Pham
yep!
workbench.editor.showTabs is the right key to set. This should be the accepted answerI played around with suggested options from VSCode and found this to work
make sure that you have your Window Title Bar Style set to custom open the settings.json file located in /Users/{your-username}/Library/Applcation\ Support/Code/User/settings.json
Append the following to the JSON object
"editor.titleBar.enabled": false Another option could be to try setting this option in the settings file
"workbench.colorCustomizations": { "titleBar.forground": "#00000000", "titleBar.activeForeground": "#00000000", "titleBar.background": "#00000000", "titleBar.activeBackground": "#00000000", ... This is my machine settings
above is a comprehensive list of options you can use to tweak the current the or even your own theme. no additional 3rd party extensions are needed, just time in the saddle!
Comments
September 2025, MacOS, No Extensions Needed
I was able to hide the title bar entirely by right-clicking on it, and unchecking "command center" and "layout controls".
Getting it back required a bit of a hack, by going into settings > Workbench > Editor > Editor Actions Location, and changing it to titleBar, which forces the title bar to become visible again, at which point you can again right-click on it and re-enable the previously removed subfeatures to fully restore functionality.
Comments
Simple fix
User settings: settings.json
"window.commandCenter": false, "workbench.layoutControl.enabled": false, "window.menuStyle": "custom", "window.menuBarVisibility": "compact", "window.titleBarStyle": "native", "window.customTitleBarVisibility": "never", Tested on: VSCodium v1.105.17075 x64 running natively in Wayland
Comments
File → Preferences → Settings → Window → Title Bar Style Now choose custom title bar.
1 Comment
help-info.de
There are other answers (and a accepted one) that provide the OP's question, and they were posted some time ago. When posting an answer see: How do I write a good answer?, please make sure you add either a new solution, or a substantially better explanation, especially when answering older questions.