Customize the Navigation Bar
Each Web site associated with a Microsoft Office Live Small Business account includes a navigation bar by default. To learn more about changing the position and content of this navigation bar, see Change the page navigation. You can also choose to turn off the navigation bar for any page on your site. For more information about turning off the navigation bar, see Remove the Navigation Bar from a Web Page. If you want to provide navigation, but need more flexibility than the default navigation bar allows, you can turn off the navigation bar and add a Custom navigation module to one of the zones in the page. To add a Custom navigation module, the Advanced Design features included with your Microsoft Office Live Small Business account must be activated. You can add content to the Custom navigation module using the contents of your own XSLT file, or you can edit the default XSLT code that comes with the Custom navigation module.
To activate the Advanced Design features, see Activate and Deactivate Advanced Design Features.
Note
If you replace the existing header with a custom header located in a zone on the Web page, you will probably want to add a custom navigation module to align with your custom header. A custom navigation module is, by default, created using the same XSLT as the original navigation bar for the page, so this change in location does not require you to make any XSLT changes. For more information about creating a custom header, see Customize the Header.
Add a Custom navigation module
On the left navigation bar, click Web Site.
In Page Manager, on the actions bar, click Design Site, and then, in the drop-down list, click Design site.
Click the Page Editor tab.
On the left navigation bar, click the name of the page to which you want to add custom navigation.
On the Web page, click inside the zone where you want to add the navigation bar. On the actions bar, click Module, and then click Custom Navigation.
Use your own XSLT
After you add a custom navigation module, you can customize the navigation bar created by this module by editing the XSLT code that supports the module. In fact, you can replace the XSLT with the contents of your own XSLT file. To do this, you must first add your XSLT file to the Document Gallery. For step-by-step instructions to complete this step, see Add an XSLT File to the Document Gallery.
Create a custom navigation bar using your own XSLT
If you want to add a new Custom navigation module, follow the instructions above. If you have already added the Custom Navigation module, open the page containing the module in Page Editor, right-click the module, and then click Properties.
In the Custom navigation dialog box, click Link to an XSLT file.
Click Select file.
In the Select a file dialog box, click the XSLT file that contains the custom navigation menu content. Click OK.
Click OK.
Start With the Existing Navigation Bar XSLT
A custom navigation module is, by default, created using the XSLT from the header included with your site. You can edit this XSLT code to customize the navigation bar created by this module.
Create a custom navigation bar by editing existing navigation bar XSLT
Open the page containing the Custom navigation module in Page Editor, right-click the module, and then click Properties.
In the Custom navigation dialog box, click Edit XSLT code.
Edit the code as required.
Click OK.
Example
The code below is XSLT that supports an example of a navigation bar that can be displayed on all public Web pages created for an Office Live Small Business account.
<xsl:stylesheet xmlns:xsl="http://www.w3.org/1999/XSL/Transform" version="1.0">
<xsl:output method="html" omit-xml-declaration="yes"/>
<xsl:template match="/NavNodes">
<table cellpadding="0" cellspacing="0" class="MSC_PrimaryNavFrame" style="width:auto;">
<xsl:for-each select="NavNode">
<xsl:variable name="ChildSelected" select="count(NavNode[@selected='true']) != '0'" />
<xsl:variable name="SelfOrChildSelected" select="$ChildSelected or (@selected='true')" />
<tr>
<td>
<xsl:attribute name="class">
<xsl:choose>
<xsl:when test="$SelfOrChildSelected">MSC_PrimaryNavLinkFrame-On</xsl:when>
<xsl:otherwise>MSC_PrimaryNavLinkFrame</xsl:otherwise>
</xsl:choose>
</xsl:attribute>
<a>
<xsl:attribute name="href">
/<xsl:value-of select="@url"/>
</xsl:attribute>
<xsl:attribute name="class">
<xsl:choose>
<xsl:when test="$SelfOrChildSelected">MSC_PrimaryNavLink-On</xsl:when>
<xsl:otherwise>MSC_PrimaryNavLink</xsl:otherwise>
</xsl:choose>
</xsl:attribute>
<xsl:value-of select="@name"/>
</a>
<xsl:if test="$SelfOrChildSelected">
<xsl:if test="count(child::*) != '0'">
<table cellpadding="0" cellspacing="0" class="MSC_SecondaryNavFrame" >
<xsl:for-each select="NavNode">
<xsl:if test="position() > 1 ">
<tr>
<td>
<xsl:attribute name="class">MSC_SecondaryNavTopSpace</xsl:attribute>
</td>
</tr>
<tr>
<td>
<xsl:attribute name="class">MSC_SecondaryNavBottomSpace</xsl:attribute>
</td>
</tr>
</xsl:if>
<tr>
<td>
<xsl:attribute name="class">
<xsl:choose>
<xsl:when test="@selected='true'">MSC_SecondaryNavLinkFrame-On</xsl:when>
<xsl:otherwise>MSC_SecondaryNavLinkFrame</xsl:otherwise>
</xsl:choose>
</xsl:attribute>
<a>
<xsl:attribute name="href">
/<xsl:value-of select="@url"/>
</xsl:attribute>
<xsl:attribute name="class">
<xsl:choose>
<xsl:when test="@selected='true'">MSC_SecondaryNavLink-On</xsl:when>
<xsl:otherwise>MSC_SecondaryNavLink</xsl:otherwise>
</xsl:choose>
</xsl:attribute>
<xsl:value-of select="@name"/>
</a>
</td>
</tr>
</xsl:for-each>
</table>
</xsl:if>
</xsl:if>
</td>
</tr>
<tr>
<td class="MSC_PrimaryNavTopSpace">
</td>
</tr>
<tr>
<td class="MSC_PrimaryNavBottomSpace">
</td>
</tr>
</xsl:for-each>
</table>
</xsl:template>
</xsl:stylesheet>
See also
Add an XSLT File to the Document Gallery
Remove the Navigation Bar from a Web Page
Activate and Deactivate Advanced Design Features