SharePoint Online Suite Navigation control
Learn about master page markup for the Suite Navigation control in classic SharePoint Online.
Important
Be aware that the guidance given on this page only applies to classic SharePoint Online and cannot be applied to modern SharePoint Online pages.
SharePoint Online Suite Navigation control
The Suite Navigation control renders a consistent top navigation bar in SharePoint Online. This control is now a part of all uncustomized out-of-the-box master pages.
If a master page was customized, it will not pick up the Suite Navigation control. To add this control to your custom master page, replace the suiteBar <div> with the markup that corresponds to the type of site you're using.
The Suite Navigation control supports any theme applied to the site. If you want to change the color of the top navigation bar, apply a theme.
Important
When customizing a site, the best practice is to apply a theme. While you can apply custom CSS to the site, custom CSS may break in the future if the Suite Navigation control is updated again in the service.
Caution
If you do not want to use the new control, remove the Suite Navigation markup from your master page and add custom markup. However, be aware that customized master pages run the risk of not picking up updates to default master page controls or new functionality that is added to uncustomized master pages. Using a customized master page introduces the risk that service updates will break the functionality or style of your site.
Suite Navigation control for intranet sites
For intranet sites, use the following master page markup for the Suite Navigation control. Table 1 lists web controls used in the Suite Navigation code.
Table 1. Suite Navigation web controls for intranet sites
| Web Control | Description |
|---|---|
| SharePoint:Menu |
Displays a menu in an ASP.NET webpage. |
| SharePoint:MenuItemTemplate |
Represents a control that creates an item in a drop-down menu. |
<SharePoint:AjaxDelta runat="server"
id="suiteBarDelta"
BlockElement="true"
CssClass="ms-dialogHidden ms-fullWidth noindex">
<div id="suiteMenuData" class="ms-hide">
<wssuc:Welcome id="IdWelcomeData" runat="server" EnableViewState="false" RenderDataOnly="true"/>
<span class="ms-siteactions-root" id="siteactiontd">
<SharePoint:SiteActions runat="server"
accesskey="<%$Resources:wss,tb_SiteActions_AK%>"
id="SiteActionsMenuMainData"
PrefixHtml=""
SuffixHtml=""
ImageUrl="/_layouts/15/images/spcommon.png?rev=32"
ThemeKey="spcommon"
MenuAlignment="Right"
LargeIconMode="false">
<CustomTemplate>
<SharePoint:Menu runat="server" Visible="false"/>
<SharePoint:FeatureMenuTemplate runat="server"
FeatureScope="Site"
Location="Microsoft.SharePoint.StandardMenu"
GroupId="SiteActions"
UseShortId="true">
<SharePoint:MenuItemTemplate runat="server"
id="MenuItem_ShareThisSite"
Text="<%$Resources:wss,siteactions_sharethissite%>"
Description="<%$Resources:wss,siteactions_sharethissitedescription%>"
MenuGroupId="100"
Sequence="110"
UseShortId="true"
PermissionsString="ViewPages"
PermissionMode="Any" />
<SharePoint:MenuItemTemplate runat="server"
id="MenuItem_EditPage"
Text="<%$Resources:wss,siteactions_editpage15%>"
Description="<%$Resources:wss,siteactions_editpagedescriptionv4%>"
ImageUrl="/_layouts/15/images/ActionsEditPage.png?rev=32"
MenuGroupId="200"
Sequence="210"
PermissionsString="EditListItems"
ClientOnClickNavigateUrl="javascript:ChangeLayoutMode(false);" />
<SharePoint:MenuItemTemplate runat="server"
id="MenuItem_CreatePage"
Text="<%$Resources:wss,siteactions_addpage15%>"
Description="<%$Resources:wss,siteactions_createpagedesc%>"
ImageUrl="/_layouts/15/images/NewContentPageHH.png?rev=32"
MenuGroupId="200"
Sequence="220"
UseShortId="true"
ClientOnClickScriptContainingPrefixedUrl="OpenCreateWebPageDialog('~siteLayouts/createwebpage.aspx')"
PermissionsString="AddListItems, EditListItems"
PermissionMode="All" />
<SharePoint:MenuItemTemplate runat="server"
id="MenuItem_Create"
Text="<%$Resources:wss,siteactions_addapp15%>"
Description="<%$Resources:wss,siteactions_createdesc%>"
MenuGroupId="200"
Sequence="230"
UseShortId="true"
ClientOnClickScriptContainingPrefixedUrl="GoToPage('~siteLayouts/addanapp.aspx')"
PermissionsString="ManageLists, ManageSubwebs"
PermissionMode="Any" />
<SharePoint:MenuItemTemplate runat="server"
id="MenuItem_ViewAllSiteContents"
Text="<%$Resources:wss,quiklnch_allcontent_15%>"
Description="<%$Resources:wss,siteactions_allcontentdescription%>"
ImageUrl="/_layouts/15/images/allcontent32.png?rev=32"
MenuGroupId="200"
Sequence="240"
UseShortId="true"
ClientOnClickNavigateUrl="~siteLayouts/viewlsts.aspx"
PermissionsString="ViewFormPages"
PermissionMode="Any" />
<SharePoint:MenuItemTemplate runat="server"
id="MenuItem_ChangeTheLook"
Text="<%$Resources:wss,siteactions_changethelook15%>"
Description="<%$Resources:wss,siteactions_changethelookdesc15%>"
MenuGroupId="300"
Sequence="310"
UseShortId="true"
ClientOnClickNavigateUrl="~siteLayouts/designgallery.aspx"
PermissionsString="ApplyThemeAndBorder,ApplyStyleSheets,Open,ViewPages,OpenItems,ViewListItems"
PermissionMode="All" />
<SharePoint:MenuItemTemplate runat="server"
id="MenuItem_Settings"
Text="<%$Resources:wss,siteactions_settings15%>"
Description="<%$Resources:wss,siteactions_sitesettingsdescriptionv4%>"
ImageUrl="/_layouts/15/images/settingsIcon.png?rev=32"
MenuGroupId="300"
Sequence="320"
UseShortId="true"
ClientOnClickScriptContainingPrefixedUrl="GoToPage('~siteLayouts/settings.aspx')"
PermissionsString="EnumeratePermissions,ManageWeb,ManageSubwebs,AddAndCustomizePages,ApplyThemeAndBorder,ManageAlerts,ManageLists,ViewUsageData"
PermissionMode="Any" />
<SharePoint:MenuItemTemplate runat="server"
id="MenuItem_SwitchToMobileView"
Visible="false"
Text="<%$Resources:wss,siteactions_switchtomobileview%>"
Description="<%$Resources:wss,siteactions_switchtomobileviewdesc%>"
MenuGroupId="300"
Sequence="330"
UseShortId="true"
ClientOnClickScript="STSNavigate(StURLSetVar2(ajaxNavigate.get_href(), 'mobile', '1'));" />
</SharePoint:FeatureMenuTemplate>
</CustomTemplate>
</SharePoint:SiteActions>
</span>
</div>
<SharePoint:ScriptBlock runat="server">
var g_navBarHelpDefaultKey = "HelpHome";
</SharePoint:ScriptBlock>
<SharePoint:DelegateControl id="ID_SuiteBarDelegate" ControlId="SuiteBarDelegate" runat="server" />
</SharePoint:AjaxDelta>
Learning about Suite Navigation web controls for public-facing sites
For public-facing sites, use the following master page markup for the Suite Navigation control. Table 2 lists web controls used in the Suite Navigation code.
Table 2. Suite Navigation web controls for public-facing sites
| Web Control | Description |
|---|---|
| SharePoint:DelegateControl |
Renders an ASP.NET web control. Delegate controls make their candidate controls pluggable and traceable. |
| SharePoint:FeatureMenuTemplate |
Represents a control that creates a template for a drop-down menu. |
| SharePoint:Menu |
Displays a menu in an ASP.NET webpage. |
| SharePoint:MenuItemTemplate |
Represents a control that creates an item in a drop-down menu. |
| SharePoint:ScriptBlock |
Represents a script block control on a page. |
| SharePoint:SiteActions |
Represents a template control for the Site Action menu. |
| SharePoint:SPSecurityTrimmedControl |
Renders conditionally the contents of the control to the current user only if the current user has permissions defined in the PermissionString. |
Suite Navigation control for public-facing sites
<SharePoint:AjaxDelta runat="server"
id="suiteBarDelta"
BlockElement="true"
CssClass="ms-dialogHidden ms-fullWidth noindex">
<SharePoint:SPSecurityTrimmedControl runat="server"
AuthenticationRestrictions="AuthenticatedUsersOnly"
EmitDiv="true">
<div id="suiteMenuData" class="ms-hide">
<wssuc:Welcome id="IdWelcomeData" runat="server" EnableViewState="false" RenderDataOnly="true"/>
<span class="ms-siteactions-root" id="siteactiontd">
<SharePoint:SiteActions runat="server"
accesskey="<%$Resources:wss,tb_SiteActions_AK%>"
id="SiteActionsMenuMainData"
PrefixHtml=""
SuffixHtml=""
ImageUrl="/_layouts/15/images/spcommon.png?rev=32"
ThemeKey="spcommon"
MenuAlignment="Right"
LargeIconMode="false">
<CustomTemplate>
<SharePoint:Menu runat="server" Visible="false"/>
<SharePoint:FeatureMenuTemplate runat="server"
FeatureScope="Site"
Location="Microsoft.SharePoint.StandardMenu"
GroupId="SiteActions"
UseShortId="true">
<SharePoint:MenuItemTemplate runat="server"
id="MenuItem_ShareThisSite"
Text="<%$Resources:wss,siteactions_sharethissite%>"
Description="<%$Resources:wss,siteactions_sharethissitedescription%>"
MenuGroupId="100"
Sequence="110"
UseShortId="true"
PermissionsString="ViewPages"
PermissionMode="Any" />
<SharePoint:MenuItemTemplate runat="server"
id="MenuItem_EditPage"
Text="<%$Resources:wss,siteactions_editpage15%>"
Description="<%$Resources:wss,siteactions_editpagedescriptionv4%>"
ImageUrl="/_layouts/15/images/ActionsEditPage.png?rev=32"
MenuGroupId="200"
Sequence="210"
PermissionsString="EditListItems"
ClientOnClickNavigateUrl="javascript:ChangeLayoutMode(false);" />
<SharePoint:MenuItemTemplate runat="server"
id="MenuItem_CreatePage"
Text="<%$Resources:wss,siteactions_addpage15%>"
Description="<%$Resources:wss,siteactions_createpagedesc%>"
ImageUrl="/_layouts/15/images/NewContentPageHH.png?rev=32"
MenuGroupId="200"
Sequence="220"
UseShortId="true"
ClientOnClickScriptContainingPrefixedUrl="OpenCreateWebPageDialog('~siteLayouts/createwebpage.aspx')"
PermissionsString="AddListItems, EditListItems"
PermissionMode="All" />
<SharePoint:MenuItemTemplate runat="server"
id="MenuItem_Create"
Text="<%$Resources:wss,siteactions_addapp15%>"
Description="<%$Resources:wss,siteactions_createdesc%>"
MenuGroupId="200"
Sequence="230"
UseShortId="true"
ClientOnClickScriptContainingPrefixedUrl="GoToPage('~siteLayouts/addanapp.aspx')"
PermissionsString="ManageLists, ManageSubwebs"
PermissionMode="Any" />
<SharePoint:MenuItemTemplate runat="server"
id="MenuItem_ViewAllSiteContents"
Text="<%$Resources:wss,quiklnch_allcontent_15%>"
Description="<%$Resources:wss,siteactions_allcontentdescription%>"
ImageUrl="/_layouts/15/images/allcontent32.png?rev=32"
MenuGroupId="200"
Sequence="240"
UseShortId="true"
ClientOnClickNavigateUrl="~siteLayouts/viewlsts.aspx"
PermissionsString="ViewFormPages"
PermissionMode="Any" />
<SharePoint:MenuItemTemplate runat="server"
id="MenuItem_ChangeTheLook"
Text="<%$Resources:wss,siteactions_changethelook15%>"
Description="<%$Resources:wss,siteactions_changethelookdesc15%>"
MenuGroupId="300"
Sequence="310"
UseShortId="true"
ClientOnClickNavigateUrl="~siteLayouts/designgallery.aspx"
PermissionsString="ApplyThemeAndBorder,ApplyStyleSheets,Open,ViewPages,OpenItems,ViewListItems"
PermissionMode="All" />
<SharePoint:MenuItemTemplate runat="server"
id="MenuItem_Settings"
Text="<%$Resources:wss,siteactions_settings15%>"
Description="<%$Resources:wss,siteactions_sitesettingsdescriptionv4%>"
ImageUrl="/_layouts/15/images/settingsIcon.png?rev=32"
MenuGroupId="300"
Sequence="320"
UseShortId="true"
ClientOnClickScriptContainingPrefixedUrl="GoToPage('~siteLayouts/settings.aspx')"
PermissionsString="EnumeratePermissions,ManageWeb,ManageSubwebs,AddAndCustomizePages,ApplyThemeAndBorder,ManageAlerts,ManageLists,ViewUsageData"
PermissionMode="Any" />
<SharePoint:MenuItemTemplate runat="server"
id="MenuItem_SwitchToMobileView"
Visible="false"
Text="<%$Resources:wss,siteactions_switchtomobileview%>"
Description="<%$Resources:wss,siteactions_switchtomobileviewdesc%>"
MenuGroupId="300"
Sequence="330"
UseShortId="true"
ClientOnClickScript="STSNavigate(StURLSetVar2(ajaxNavigate.get_href(), 'mobile', '1'));" />
</SharePoint:FeatureMenuTemplate>
</CustomTemplate>
</SharePoint:SiteActions>
</span>
</div>
<SharePoint:ScriptBlock runat="server">
var g_navBarHelpDefaultKey = "HelpHome";
</SharePoint:ScriptBlock>
<SharePoint:DelegateControl id="ID_SuiteBarDelegate" ControlId="SuiteBarDelegate" runat="server" />
</SharePoint:SPSecurityTrimmedControl>