Tip/Trick: Increase your VS screen real estate by disabling HTML Navigation Bar

Below is a tip/trick I twittered via my Twitter account earlier today.  A number of people seemed interested in – so I thought i'd blog it here too.

HTML Navigation Bar in VS 2008

By default, when you are in HTML source-editing mode with VS 2008 and Visual Web Developer 2008 Express edition there is a set of drop-downs that are rendered immediately above the HTML text editor view:

step1

This set of drop-downs is called the "Navigation Bar", and in the VS 2008 HTML editor they allow you to navigate between functions and methods defined within the HTML.  These include both JavaScript client-side functions defined inline within the .aspx/.html file, and server-side methods defined in-line within the .aspx file when in single-file mode (meaning no code-behind file).

Disabling the HTML Navigation Bar and Getting back some pixels

Personally I don't find the HTML navigation bar super useful – since I tend not to define JavaScript functions inline within the HTML (instead I use more unobtrusive JavaScript techniques and put my JavaScript code in separate files), and I usually use code-behind instead of single-file event handlers for server-side code.

If you are like me and also don't find yourself using that particular navigation toolbar much, you'll be happy to know that you can turn it off in VS 2008 and get back about 40-50 pixels that can instead be applied toward your HTML source code view.  To-do this, just select the Tools->Options menu item within VS, navigate to the "Text Editor->HTML" node and uncheck the "Navigation Bar" checkbox option:

step2

Once you do this and press the "ok" button, you'll find that the drop-downs are gone and you have more screen real estate:

step3

(Note: if there is no immediate change after you hit ok, try closing and then re-opening the HTML/ASP.NET file)

Hope this helps,

Scott

P.S. By default with VS 2010 (starting with Beta2) we are hiding the navigation bar when in HTML mode with the standard web profile – you can then turn it back on via Tools->Options if you find it useful.  VS 2010 also has a new optional "code optimized" web profile as well that turns off all toolbars, dropdown and HTML designers.

Published Monday, September 21, 2009 12:50 AM by ScottGu

Comments

# re: Tip/Trick: Increase your VS screen real estate by disabling HTML Navigation Bar

Monday, September 21, 2009 4:07 AM by Prashant V C

Thanks for tips Scott...

Looking forward for you VS2010 post. :)

# re: Tip/Trick: Increase your VS screen real estate by disabling HTML Navigation Bar

Monday, September 21, 2009 4:22 AM by jack.niu

Great tip!

although I'm using a 22' LCD now, the screen always too small to me :)

# re: Tip/Trick: Increase your VS screen real estate by disabling HTML Navigation Bar

Monday, September 21, 2009 4:32 AM by Stefan Bergfeldt

Great tip!

Who's using that anyway?

# re: Tip/Trick: Increase your VS screen real estate by disabling HTML Navigation Bar

Monday, September 21, 2009 4:33 AM by Phil

Nice tip, saved some space :)

# re: Tip/Trick: Increase your VS screen real estate by disabling HTML Navigation Bar

Monday, September 21, 2009 4:54 AM by DonSleza4e

I'm tired to wait VS2010 Beta 2 :)

# re: Tip/Trick: Increase your VS screen real estate by disabling HTML Navigation Bar

Monday, September 21, 2009 5:35 AM by Baldwin

Great tip! It is useful when I develope apps with notebook PC.

# re: Tip/Trick: Increase your VS screen real estate by disabling HTML Navigation Bar

Monday, September 21, 2009 7:37 AM by Jeff S

Scott, while I agree this frees up some real estate in HTML mode, the issue I run into is this that after a while, flipping between aspx pages and cs pages, a delay starts to form with the adding and removing of the navigation bar (Not to mention other tool bars).

In the past I've found it smoother to set the tool bars and navigation bar to the least common denominator settings, and suffer through lack of space.  Hopefully this will be improved in VS2010.

Also, I don't know how you manage without line numbers turned on. :)

# re: Tip/Trick: Increase your VS screen real estate by disabling HTML Navigation Bar

Monday, September 21, 2009 8:05 AM by Prodis a.k.a. Fernando Hamasaki de Amorim

Good tip. Thank you.

# re: Tip/Trick: Increase your VS screen real estate by disabling HTML Navigation Bar

Monday, September 21, 2009 8:35 AM by ccatto

Hey Now Scott,

   Nice to know along with full screen. Everybody remembers Sara Ford's VSTips #100 content was similar to this.

Thx 4 the info,

Catto

# re: Tip/Trick: Increase your VS screen real estate by disabling HTML Navigation Bar

Monday, September 21, 2009 9:19 AM by JMGuazzo

Remember me of this article from Roland Weigelt (GhostDoc) : weblogs.asp.net/.../446536.aspx.

I even updated the macro myself so that you could do it easily. :

tournevis.blogspot.com/.../togglecsharpnavigationbar-update.html

But I could never try it on VS2008. If anyone could give it a try...

# re: Tip/Trick: Increase your VS screen real estate by disabling HTML Navigation Bar

Monday, September 21, 2009 10:54 AM by Dennis Gorelik

I never used Navigation Bar for HTML.

Turning it off should have been the default setting long time ago.

I also agree that turning line numbers on should be a default choice.

# re: Tip/Trick: Increase your VS screen real estate by disabling HTML Navigation Bar

Monday, September 21, 2009 12:02 PM by albertpascual

What about a Shirt-Alt-Del to make it full screen?

# re: Tip/Trick: Increase your VS screen real estate by disabling HTML Navigation Bar

Monday, September 21, 2009 1:45 PM by Bradley Landis

If you are using Visual Web Developer Express, you have to check the "Show All Settings" checkbox in the bottom left of the Options window in order to see this option.

# re: Tip/Trick: Increase your VS screen real estate by disabling HTML Navigation Bar

Monday, September 21, 2009 5:36 PM by Angus Booker

When my VM was starting to slow down, turning off the HTML Navigation Bar (and automatic intellisense) gave me an instant speed hit. I haven't looked back.

# re: Tip/Trick: Increase your VS screen real estate by disabling HTML Navigation Bar

Monday, September 21, 2009 7:03 PM by James Sheldon

Is there a way to disable the html nodes iet(html>> body.. form#form1)at the bottom of the editor beside the design source and split buttons. I'm not sure if you noticed but mousing over these nodes using VS 2008 in 64 vista causes your mouse to magically teleport to the top left corner of the applicationon... Very annoying when you are trying to get to the windows taskbar.

# re: Tip/Trick: Increase your VS screen real estate by disabling HTML Navigation Bar

Monday, September 21, 2009 10:53 PM by singhgurd

Good tip to free up space occupied by something you would hardly use.

# re: Tip/Trick: Increase your VS screen real estate by disabling HTML Navigation Bar

Monday, September 21, 2009 11:56 PM by vik20000in

great tip. Thanks.

# 技巧/诀窍: 关闭HTML导航条,增加VS屏幕可使用面积

Tuesday, September 22, 2009 2:00 AM by ASP.NET Chinese Blogs

【原文地址】 Tip/Trick: Increase your VS screen real estate by disabling HTML Navigation Bar 【原文发表日期】 Monday

# re: Tip/Trick: Increase your VS screen real estate by disabling HTML Navigation Bar

Tuesday, September 22, 2009 2:30 AM by velpuri

Int'sting...

Hari.

# re: Tip/Trick: Increase your VS screen real estate by disabling HTML Navigation Bar

Tuesday, September 22, 2009 2:46 AM by MisterFantastic

Very good. Would like to use this feature immediltely I saw this.

Thanks,

Thani

# re: Tip/Trick: Increase your VS screen real estate by disabling HTML Navigation Bar

Tuesday, September 22, 2009 5:55 AM by GlenH

Thanks heaps!

# re: Tip/Trick: Increase your VS screen real estate by disabling HTML Navigation Bar

Tuesday, September 22, 2009 10:35 AM by vasireddybharath

Simple but very nice one.

# re: Tip/Trick: Increase your VS screen real estate by disabling HTML Navigation Bar

Tuesday, September 22, 2009 11:24 PM by qing02051981

Thanks. That was a nice one.

# re: Tip/Trick: Increase your VS screen real estate by disabling HTML Navigation Bar

Tuesday, September 22, 2009 11:48 PM by sayre

Nice Tips.

# Tip/Trick: Increase your VS screen real estate by disabling HTML …

Pingback from  Tip/Trick: Increase your VS screen real estate by disabling HTML …

# re: Tip/Trick: Increase your VS screen real estate by disabling HTML Navigation Bar

Wednesday, September 23, 2009 9:43 PM by Inbar Gazit

Want more VS tips - join Sara Ford talk in LIDNUG tomorrow at 10:30 PST. http://bit.ly/zoglZ

# re: Tip/Trick: Increase your VS screen real estate by disabling HTML Navigation Bar

Wednesday, September 23, 2009 11:23 PM by Nitin Sharma

Nice ti...it saves space..!

# re: Tip/Trick: Increase your VS screen real estate by disabling HTML Navigation Bar

Thursday, September 24, 2009 1:00 AM by iPazooki

very nice tips.

TNX :)

# re: Tip/Trick: Increase your VS screen real estate by disabling HTML Navigation Bar

Thursday, September 24, 2009 10:26 AM by David KOMAR

Hi Scott,

I'm currently using VS 2010 Beta 1 for tests and little EF 4 developments.

Can you please tell me when the Beta 2 version will be available?

Thank you

# re: Tip/Trick: Increase your VS screen real estate by disabling HTML Navigation Bar

Thursday, September 24, 2009 3:37 PM by Chance

Very cool - thanks!

Now if you could just get the team to allow me to move command bars beside the drop down selections (i forget their official name). Its a major space saver (see firefox)

# Todd Richards' Trick Tips, Volume I: Snowboarding Park and Pipe … | Snowboarding Leisure Knowledge

Pingback from  Todd Richards' Trick Tips, Volume I: Snowboarding Park and Pipe … | Snowboarding Leisure Knowledge

# Skiing Beginners Tips | Skiing Leisure Knowledge

Sunday, September 27, 2009 1:41 AM by Skiing Beginners Tips | Skiing Leisure Knowledge

Pingback from  Skiing Beginners Tips | Skiing Leisure Knowledge

# Weekly Link Post 112 « Rhonda Tipton’s WebLog

Sunday, September 27, 2009 2:42 PM by Weekly Link Post 112 « Rhonda Tipton’s WebLog

Pingback from  Weekly Link Post 112 « Rhonda Tipton’s WebLog

# re: Tip/Trick: Increase your VS screen real estate by disabling HTML Navigation Bar

Friday, October 02, 2009 3:35 PM by herzevekil

Thanks, cool tip:)

# re: Tip/Trick: Increase your VS screen real estate by disabling HTML Navigation Bar

Saturday, October 03, 2009 3:08 PM by korray

Thanks for this cool tip.. More tips pls :)

# Tip/Trick: Increase your VS screen real estate by disabling HTML … | Skiing Leisure Knowledge

Pingback from  Tip/Trick: Increase your VS screen real estate by disabling HTML … | Skiing Leisure Knowledge

# re: Tip/Trick: Increase your VS screen real estate by disabling HTML Navigation Bar

Monday, October 12, 2009 10:26 AM by ralphb

Nice tip thanks, P.S. I never used line numbers its so unneccessary just <Ctrl>-G to get to a line when it appears in an error!

# re: Tip/Trick: Increase your VS screen real estate by disabling HTML Navigation Bar

Saturday, October 17, 2009 4:15 AM by mark

i always wondered what those dropdowns were for, thanks!

# re: Tip/Trick: Increase your VS screen real estate by disabling HTML Navigation Bar

Thursday, October 22, 2009 1:31 AM by Alexis Jameson

This is great stuff.

I’m hooked! Can’t wait for the next update!

# re: Tip/Trick: Increase your VS screen real estate by disabling HTML Navigation Bar

Friday, October 23, 2009 10:03 AM by Ahmed

Thanks Scott.

# re: Tip/Trick: Increase your VS screen real estate by disabling HTML Navigation Bar

Friday, October 23, 2009 1:44 PM by Fernando

very helpfull

# re: Tip/Trick: Increase your VS screen real estate by disabling HTML Navigation Bar

Wednesday, October 28, 2009 2:15 AM by Dutt

Thanks for the tip. Can you please provide me the Tip to hide Design/Split/Source tab as well.

for me I relly time my code. I do not want to have design/split views. the problem with them is VS 2008 is taking too much time to open my aspx source view as it is it first trying to prepare design view and open the source code. so I want to desable preparing the design. if I open aspx files other than web designer mode I lose the great intellisense for aspx pages. so any thing like only web source mode.

thanks, Dutt