Use this tab to set the navigation bar link appearance and layout as well as to set custom HTML to generate navigation bar links.
For more information, see Designing Site Navigation.
Buttons
Select to display the navigation bar links as buttons.
Text
Select to display the navigation bar links as text. The text that appears is the page label assigned to the page in the site diagram.
HTML
Select to display the navigation bar links using custom HTML you specify in the Link template and Current page template text boxes.
Horizontal
Select to align the navigation bar horizontally on the page.
Note If you have added PageNavbar controls to a page using layouts, any changes you make to PageNavbar controls located within the layout header and layout footer will be lost when you reapply layouts or apply new layouts.
Vertical
Select to align the navigation bar vertically on the page.
Select to display the navigation bar within a table. The appropriate <TABLE> tags will be applied around the navigation bar.
If selected, the navigation bar will not wrap based on size of the browser window. If not selected, the navigation bar will wrap based on the size of the browser window.
Select to use the navigation bar styles defined by the theme currently applied to the page.
Select to specify custom HTML to be used to generate navigation bar links for the page. You must select HTML in the Appearance area to enable this option. Use the following tokens as substitutes for each page:
| Token | Description |
| #URL# | Inserts the URL for each link in your custom HTML at run time |
| #LABEL# | Inserts the page label for each link |
| #CLASS# | Inserts the CSS class for each page |
| #THEME# | Inserts the current theme settings for the link |
The PageNavbar control provides several examples of custom HTML in the Link template drop-down list.
| Example | Description |
| <a href=#URL#>#LABEL#</a> | Creates a standard text link to a URL |
| [<a href=#URL#>#LABEL#</a>] | Places brackets around a standard text link |
| [ <a href=#URL#>#LABEL#</a> ] | Places brackets with a space around a standard text link |
| |<a href=#URL#>#LABEL#</a>| | Places bars around a standard text link |
| <a href=#URL# onmouseover="window.status='#LABEL#'; return true;" onmouseout="window.status="">#LABEL#</a> | Uses JavaScript to create a text link that displays the label for the URL in the status bar when the user moves the mouse over the link |
| <a href=#URL#><span style="color: black;" onmouseover="this.style.color='red'" onmouseout="this.style.color='black'">#LABEL#</span></a> | Uses DHTML to create a text link that changes the text color from black to red when the user moves the mouse over the link |
For more information and examples, see the white paper "Site Designer Tips and Tricks" on the Microsoft® Visual InterDev™ Web site: http://www.microsoft.com/vinterdev/techmat/default.htm.
Select to specify custom HTML to be used to generate only the navigation bar link for the current page. You must select HTML in the Appearance area to enable this option.
Note To have the current page use the same custom HTML specified in the Link template option above, you must enter the same custom HTML in the Current page template box.
The PageNavbar control provides several examples of custom HTML in the Current page template drop down list.
| Example | Description |
| #LABEL# | Displays the page label |
| [#LABEL#] | Places brackets around the page label |
| [ #LABEL# ] | Places brackets with a space around the page label |
| |#LABEL#| | Places bars around the page label |