Click here to Skip to main content
15,881,840 members
Articles / Productivity Apps and Services / Sharepoint

Add Navigate Up With SharePoint 2013 Design Manager in Custom Master Page

Rate me:
Please Sign up or sign in to vote.
4.67/5 (3 votes)
11 Dec 2016CPOL 10.1K   2  
Add Navigate up with SharePoint 2013 Design Manager in custom master page

In SharePoint 2013, there is hidden code to have navigate up option. To bring back that functionality in our custom master page, we can put the following snippet inside the HTML master page (.html file). This snippet is copied from seattle.html (HTML master page file).

HTML
<div class="ms-breadcrumb-dropdownBox">
  <!--SPM:<SharePoint:AjaxDelta id="DeltaBreadcrumbDropdown"
            runat="server">-->
    <!--SPM:<SharePoint:PopoutMenu
            Visible="true" runat="server"
            ID="GlobalBreadCrumbNavPopout"
            IconUrl="/_layouts/15/images/spcommon.png?rev=23"
            IconAlt="<%$Resources:wss,master_breadcrumbIconAlt%>"
            ThemeKey="v15breadcrumb"
            IconOffsetX="215" IconOffsetY="120"
            IconHeight="16" IconWidth="16"
            AnchorCss="ms-breadcrumb-anchor"
            AnchorOpenCss="ms-breadcrumb-anchor-open"
            MenuCss="ms-breadcrumb-menu ms-noList">-->
       <div class="ms-breadcrumb-top">
         <!--SPM:<asp:Label runat="server"
                  CssClass="ms-breadcrumb-header"
                  Text="<%$Resources:wss,master_breadcrumbHeader%>"/>-->
       </div>
       <!--SPM:<asp:ContentPlaceHolder id="PlaceHolderTitleBreadcrumb"
          runat="server">-->
         <!--SPM:<SharePoint:ListSiteMapPath
              runat="server" PathSeparator=""
              SiteMapProviders="SPSiteMapProvider,SPContentMapProvider"
              RenderCurrentNodeAsLink="false"
              CssClass="ms-breadcrumb"
              NodeStyle-CssClass="ms-breadcrumbNode"
              CurrentNodeStyle-CssClass="ms-breadcrumbCurrentNode"
              RootNodeStyle-CssClass="ms-breadcrumbRootNode"
              NodeImageOffsetX="0" NodeImageOffsetY="289"
              NodeImageWidth="16" NodeImageHeight="16"
              NodeImageUrl="/_layouts/15/images/fgimg.png?rev=23"
              RTLNodeImageOffsetX="0" RTLNodeImageOffsetY="312"
              RTLNodeImageWidth="16" RTLNodeImageHeight="16"
              RTLNodeImageUrl="/_layouts/15/images/fgimg.png?rev=23"
              HideInteriorRootNodes="true" SkipLinkText=""/>-->
       <!--SPM:</asp:ContentPlaceHolder>-->
    <!--SPM:</SharePoint:PopoutMenu>-->
   <!--SPM:</SharePoint:AjaxDelta>-->
</div>

This code block will bring back the navigate up menu fly out options, see screenshot below:

Navigate Up SharePoint 2013

This is the simple way to have navigate up option using HTML master page in Design Manager.

If you have not used design manager and you want this navigate up feature, simply place the below snippet in your Master page (.master file):

HTML
<div class="ms-breadcrumb-dropdownBox" style="display:inline-block;">
  <SharePoint:AjaxDelta id="DeltaBreadcrumbDropdown" runat="server">
    <SharePoint:PopoutMenu runat="server" ID="GlobalBreadCrumbNavPopout" 
        IconUrl="/_layouts/15/images/spcommon.png?rev=23"         
        IconAlt="&lt;%$Resources:wss,master_breadcrumbIconAlt%&gt;"
        ThemeKey="v15breadcrumb" IconOffsetX="215"
        IconOffsetY="120" IconWidth="16"
        IconHeight="16" AnchorCss="ms-breadcrumb-anchor"
        AnchorOpenCss="ms-breadcrumb-anchor-open"
        MenuCss="ms-breadcrumb-menu ms-noList">
        <div class="ms-breadcrumb-top">
          <asp:Label runat="server" CssClass="ms-breadcrumb-header"
            Text="&lt;%$Resources:wss,master_breadcrumbHeader%&gt;" />
        </div>
    <asp:ContentPlaceHolder id="PlaceHolderTitleBreadcrumb" runat="server">
      <SharePoint:ListSiteMapPath runat="server"
        SiteMapProviders="SPSiteMapProvider,SPContentMapProvider"
        RenderCurrentNodeAsLink="false" PathSeparator=""
        CssClass="ms-breadcrumb"
        NodeStyle-CssClass="ms-breadcrumbNode"
        CurrentNodeStyle-CssClass="ms-breadcrumbCurrentNode"
        RootNodeStyle-CssClass="ms-breadcrumbRootNode"
        NodeImageOffsetX="0" NodeImageOffsetY="289"
        NodeImageWidth="16" NodeImageHeight="16"
        NodeImageUrl="/_layouts/15/images/fgimg.png?rev=23"
        RTLNodeImageOffsetX="0" RTLNodeImageOffsetY="312"
        RTLNodeImageWidth="16" RTLNodeImageHeight="16"
        RTLNodeImageUrl="/_layouts/15/images/fgimg.png?rev=23"
        HideInteriorRootNodes="true" SkipLinkText="" />
      </asp:ContentPlaceHolder>
    </SharePoint:PopoutMenu>
  </SharePoint:AjaxDelta>
</div>

Note: In this above snippet, you can place your own image as node image or Popout image.

Hope this helps!

Cheers!

License

This article, along with any associated source code and files, is licensed under The Code Project Open License (CPOL)


Written By
Software Developer
India India
Having 5 years of experience with IT web technologies. I have been working on C# as my back end language and HTML5, CSS3, JavaScript, jQuery as front end development in Microsoft .net environment. I am currently working in Microsoft SharePoint technology, mainly focused on Branding stuffs. Very passionate about creative front end development and eager to learn new things about it. Somewhat I am gaming freak as well, specifically I am Valve Dota 2 fan. Smile | :)

Comments and Discussions

 
-- There are no messages in this forum --