Restoring the Navigate Up button using a master page

In the default SharePoint 2010 interface, there was a button to navigate up the breadcrumb structure, which looked like a Windows Explorer folder (see the following screenshot for reference). In SharePoint 2013, this control still exists, but has been hidden. In this recipe, we will restore it using our customized master page.

Restoring the Navigate Up button using a master page

How to do it...

Follow these steps to restore the Navigate Up breadcrumb control using a master page:

  1. Open SharePoint Designer.
  2. Select Open Site. Enter the complete URL to the SharePoint site and select Open.
  3. From the Navigation pane, select Master Pages.
  4. In the list of files in the Master Pages library, make a copy of seattle.master (for our example, we have renamed it as Seattle_RestoreNavigateUp.master).
  5. Check out the new Seattle_RestoreNavigateUp.master master page.
  6. Open the Seattle_RestoreNavigateUp.master master page.
  7. Locate the <div class="ms-breadcrumb-dropdownBox" element. The following code shows the content inside this element:
    <div class="ms-breadcrumb-dropdownBox" style="display:none;">
<SharePoint:AjaxDelta id="DeltaBreadcrumbDropdown" runat="server">
  <SharePoint:PopoutMenu
    Visible="false"
    runat="server"
    ID="GlobalBreadCrumbNavPopout"
    IconUrl="/_layouts/15/images/spcommon.png?rev=23"
    IconAlt="<%$Resources:wss,master_breadcrumbIconAlt%>"
            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">
  8. Remove style="display:none;" from the <div> element.
  9. Set the Visible attribute to true.
  10. Set the ThemeKey attribute to spcommon.
  11. Set the IconUrl attribute to /_layouts/15/images/spcommon.png.
    <div class="ms-breadcrumb-dropdownBox">
<SharePoint:AjaxDelta id="DeltaBreadcrumbDropdown" runat="server">
  <SharePoint:PopoutMenu
    Visible="true"
    runat="server"
    ID="GlobalBreadCrumbNavPopout"
    IconUrl="/_layouts/15/images/spcommon.png"
    IconAlt="<%$Resources:wss,master_breadcrumbIconAlt%>"
            ThemeKey="spcommon"
            IconOffsetX="215"
            IconOffsetY="120"
            IconWidth="16"
            IconHeight="16"
            AnchorCss="ms-breadcrumb-anchor"
            AnchorOpenCss="ms-breadcrumb-anchor-open"
            MenuCss="ms-breadcrumb-menu ms-noList">
  12. Save the master page.
  13. Check in and publish the master page using the Check In and Publish options.
  14. Set the master page as the Site Master Page.
  15. Navigate to the site in your preferred web browser to observe the results.

How it works...

The default SharePoint 2013 master pages already include the server control to create and render the breadcrumb navigation. By default, however, it is hidden. By modifying the properties of the control on the master page, we are instructing SharePoint to display the control.

See also

..................Content has been hidden....................

You can't read the all page of ebook, please click here login for view all page.
Reset
18.221.163.13