How To Add a Navigators Tab Strip to the SharePoint Master Page

If you have multiple sub-sites, and/or various projects or links, don’t you often wish you could just simply go to the specific site changing tabs instead of opening a separate browser window and entering the URL? Navigators allow you to add tabs to your pages, and from those pages, you’re able to easily get back to where you were. And master pages provide the look and feel that you want for all of the pages in your site. By changing the styles or content of the master page, you can quickly customize the appearance of an entire site and use it for other pages.

Example: The Community Central site has built-in tabs. You want to add a link to a new “Workgroup” site. You want to be able to navigate from the “Workgroup” site back to the Community Central Site via a tab.

Note: Similar information can be found here: http://store.bamboosolutions.com/KB/article.aspx?id=12891. It’s also attached to this post with the custom master page v4_custom.master that you’re invited to download and use.

 

 

 

Resolution:

This blog provides the steps on how to add tab strips to the master page.

Related Information


How to Add a Navigator Tab Strip Web Part

  1. From the site where you want to have the Navigator tap strip, edit the page and select Add a Web Part. Select Bamboo Navigator Tab Strip:
  2. Next, add items to the Bamboo Navigators list. Note: Make sure to use relative path:

  3. Edit the Web Part. Enter the relative path of where the Bamboo Navigators list resides. Select a skin. In this case, the PMCClassic skin is selected:

The tabs on the default.aspx page looks like this:

 

Adding Navigators Tab Strips to the Master Page

  1. In SharePoint Designer, open the site whose master page you want to modify. From the default.aspx page, right-click and select Edit File in Advanced Mode:

  2. At the top of the page, copy the register code of the Web Part. Note: You can also paste it to Notepad, and copy later into the master page.

  3. This line:

       1: <%@ Register TagPrefix="WpNs0" Namespace="Bamboo.WebParts" Assembly="Bamboo.Navigators, Version=1.0.0.0, Culture=neutral, PublicKeyToken=2cc91efae2d531be"%>
       2:  

  4. Copy the Div line for the tabs. Put it above the “SharePoint:DelegateControl…”. Note: You can paste it to Notepad to copy later into the master page.
  5. 1: <div id=”bb-tabtrips” class=”s4-notdlg”>

    
    

    2: <div id=”bb-rowtab”>

    
    

    3: <div id=”bb-Navigators” class=”s4-notdlg”>

    
    

    4: <wpNs0:NavigatorTabStrip runat=”server” ImportErrorMessage=”Error importing Web Part” DisplayColumnName=”Title” DisplayColumnDescription=”Description” AllowHide=”True” SiteURL=”./” DisplayListName=”Bamboo Navigators” ExportMode=”All” PartImageLarge=”” DisplayColumnIconURL=”IconURL” DisplayColumnParentMenu=”ParentMenu” MissingAssembly=”Error importing Web Part” FrameType=”None” ID=”g_effb272c_df01_46b4_80ea_2ee4824197e3″ IsIncludedFilter=”” DetailLink=”” AllowRemove=”True” DisplayColumnSortOrder=”SortOrder” PartOrder=”2″ ApplyChanges=”True” HelpMode=”Modeless” IsIncluded=”True” DisplayViewName=”Navigators View” Description=”Bamboo Navigator TabStrip” FrameState=”Normal” DisplayColumnURL=”URL” Dir=”Default” AllowZoneChange=”True” AllowEdit=”True” AllowMinimize=”True” Title=”Bamboo Navigator TabStrip” LanguageForDisplay=”1033.English” DisplayListGUID=”1db60e17-9d81-4341-8a63-6f7f959f68b3″ DisplayViewGUID=”3430293f-ea51-4849-99b3-f9b130553123″ HelpLink=”” PartImageSmall=”” AllowConnect=”True” UseOffice2007RibbonUI=”False” ConnectionID=”00000000-0000-0000-0000-000000000000″ ExportControlledProperties=”True” ChromeType=”None” SuppressWebPartChrome=”False” DisplaySkin=”PMCClassic” IsVisible=”True” ZoneID=”Left” _MarkupType=”vsattributemarkup” __WebPartId=”{EFFB272C-DF01-46B4-80EA-2EE4824197E3}” WebPart=”true” Height=”” Width=””>

    
    

    5: </wpNs0:NavigatorTabStrip>

    
    

    6: </div>

    
    

    7: </div>

    
    

  6. Make a copy of the v4.master. Check out the v4.master page and select Edit File in Advanced Mode. Copy the code for “register” and “div” to the v4.master. Save and Check In. Note: You can also download the attached v4.master file as your template master page for SharePoint 2010.

    You will see this message:

    Make sure to select the updated v4.master page as the default master page and custom master page:

From the browser, go back to the site and you should see the tab strip on the right-hand side of the page:


Customizing the Tab Strips on the Master Page

Note that after you have modified the master page, the tabs do not display fully on the page. The top gets cut off. In order to fix this, it’s necessary to add an additional CSS stylesheet.

  1. From SharePoint Designer, check out the v4.master page and select Edit File in Advanced Mode. Add the tags for the CSS stylesheet as follows:
  2. Note: Add the lines right below the “SharePoint:SPHelpPageComponent…”

    1: <style type=”text/css”>

    
    

    2: .s4-trc-container-menu{

    
    

    3: margin:0px;

    
    

    4: }

    
    

    5: .s4-trc-container-menu #bb-signin{

    
    

    6: float:right;

    
    

    7: }

    
    

    8: .s4-devdashboard{

    
    

    9: margin:0px;

    
    

    10: width:20px;

    
    

    11: }

    
    

    12: #bb-signin .s4-help{

    
    

    13: float:right;

    
    

    14: margin:0px !important;

    
    

    15: }

    
    

    16: #bb-tabtrips{

    
    

    17: clear:right;

    
    

    18: }

    
    

    19: #bb-rowtab{

    
    

    20: float:right;

    
    

    21: }

    
    

    22: #bb-Navigators{

    
    

    23: margin-top:8px;

    
    

    24: }

    
    

    25: </style>

    
    

    You should see the site adjusted like this:

    You can also use the PMC Classic skin adding the CSS stylesheet tags as follows:

    1: <style type=”text/css”>

    
    

    2: .s4-trc-container-menu{

    
    

    3: margin:0px;

    
    

    4: }

    
    

    5: .s4-trc-container-menu #bb-signin{

    
    

    6: float:right;

    
    

    7: }

    
    

    8: .s4-devdashboard{

    
    

    9: margin:0px;

    
    

    10: width:20px;

    
    

    11: }

    
    

    12: #bb-signin .s4-help{

    
    

    13: float:right;

    
    

    14: margin:0px !important;

    
    

    15: }

    
    

    16: #bb-tabtrips{

    
    

    17: clear:right;

    
    

    18: }

    
    

    19: #bb-rowtab{

    
    

    20: float:right;

    
    

    21: }

    
    

    22: #bb-Navigators .RadTabStrip_PMCClassic{

    
    

    23: font:11px Verdana, arial, tahoma;

    
    

    24: height:auto !important;

    
    

    25: }

    
    

    26: #bb-Navigators .RadTabStrip_PMCClassic .level1{

    
    

    27: background-image:none !important;

    
    

    28: }

    
    

    29: #bb-Navigators .RadTabStrip_PMCClassic .level1 li a{

    
    

    30: padding-left: 0px;

    
    

    31: color: #ffffff;

    
    

    32: text-decoration: none;

    
    

    33: line-height:normal !important;

    
    

    34: border-left: #e1e1e1 1px solid;

    
    

    35: }

    
    

    36: #bb-Navigators .RadTabStrip_PMCClassic .level1 li a:hover{

    
    

    37: color: #FFFFFF !important;

    
    

    38: background-image:none !important;

    
    

    39: text-decoration:none !important;

    
    

    40: line-height:normal !important;

    
    

    41: }

    
    

    42: #bb-Navigators .RadTabStrip_PMCClassic .level1 li a .innerWrap{

    
    

    43: padding:0 15px;

    
    

    44: }

    
    

    45: #bb-Navigators .RadTabStrip_PMCClassic .level1 li a.selected{

    
    

    46: line-height:normal !important;

    
    

    47: color: #FFFFFF;

    
    

    48: border-left:none;

    
    

    49: border-right:none;

    
    

    50: }

    
    

    51: #bb-Navigators .RadTabStrip_PMCClassic .level1 li a.selected .innerWrap{

    
    

    52: background-image:none !important;

    
    

    53: color: #FFFFFF !important;

    
    

    54: }

    
    

    55: #bb-Navigators .RadTabStrip_PMCClassic .level1 li a.selected:hover{

    
    

    56: color: #FFFFFF !important;

    
    

    57: }

    
    

    58: #bb-Navigators .RadTabStrip_PMCClassic .level1 li a.selected:hover .innerWrap{

    
    

    59: background-image:none !important;

    
    

    60: }

    
    

    61: #bb-Navigators .RadTabStrip_PMCClassic .level1 li a:visited{

    
    

    62: color: #ffffff;

    
    

    63: }

    
    

    64: #bb-Navigators{

    
    

    65: margin-top:8px;

    
    

    66: }

    
    

    67: </style>

    
    

    It will look like this:


You have now customized your site with the Navigators tabs to allow you and your users to easily get to the other sites. Note: If you are using these steps to add tabs for the PM Central master page, please make sure to use the instructions in the Customization PM Central where you only modify the nested master page only. You can also delete the Navigator TabStrip in the middle of your website selecting Delete Web Part.

 

APPLIES TO:


Attachment: v4.master.zip

SharePoint Online

The cloud parts are functional components that extend your SharePoint Online environment in Microsoft 365.

Supports Classic and Modern sites for SharePoint Online/Microsoft 365

SharePoint

Top SharePoint Online Products

Experience greater power and savings by bundling our SharePoint apps and cloud parts.


Calendar Plus


Chart Plus


Knowledge Base


Project Management Central


Simple List Search

 

On-Premises Only

These web parts extend SharePoint beyond its out-of-the-box capabilities by tailoring it to your requirements with Bamboo Solution’s growing portfolio of SharePoint Web Parts.

SharePoint 2013, 2016, 2019 – Classic Pages Only

SharePoint

Top On-Premises Only Products

Experience greater power and savings by bundling our SharePoint apps and web parts.


Calendar Plus


Data Viewer


Password Change


Password Expiration


Password Reset

 

Our team of Microsoft 365 experts help you get the most out of your Microsoft technology, we have the best Microsoft 365 talent to streamline your organization.

Streamline Your Department

We Have What You Need

Bamboo Solutions

About


Blogs


Webinar & Events


Twitch


Culture & Diversity

 

 

Bamboo Solutions

Tools


Resources


Bamboo Installer