Highlights of Navigators

Highlights of Navigators

Navigators.pngWhen you navigate in SharePoint, don’t you wish you could get to multiple sub-sites, various projects, or links simply by changing tabs instead of opening a separate browser window and entering the URL? Does your Quick Launch have so many links that you wish you could collapse and expand the list when you want to navigate to something? Don’t you want a convenient menu that clearly presents your sitemap and navigation, rather than having to scroll endlessly or navigate clumsily in order to get where you want to go? So do we!

Navigators allows you to create custom menus, mega menus, tabs, tree items, and provides a Site Actions menu to navigate to sites, pages, or lists within and across sites and site collections. SharePoint security is enforced by keeping users without appropriate access from accessing any SharePoint links you may configure in your navigation via item-level security trimming. These navigation controls can help you build a clean, user-friendly project management site, or any other type of site that requires customized navigation controls.

CSS for Navigators Treeview

CSS for Navigators Treeview

Return to Configuring Navigators CSS

TreeMenu.pngAdd Navigators Tree Menu (not to be confused with Bamboo’s Tree View Menu web part) to the page or the site and configure it as needed. Navigate to the Style library in the parent level of the site collection.

Step Action Result
1. Download TreeView.CustomSkin file that belongs to Tree Menu folder. TreeViewSkin.png
2. Edit CSS code using your CSS Editor or Notepad to change items such as text color. FontColor.png
3. Upload the modified file to the CustomSkin folder. LookFeel.png
4. On the web part, the text color of the Tree menu is shown with red font. 13015-17.png

Icon-Warning If you do not use the default Customskin folder do the following:

Description Change

If you decide not to use the default folder (Customskin), you need to create a new folder Myskin at the same level as the Customskin folder and copy the images file and the CSS file to the Myskin folder.

The Image file name should be called “TreeView” and the CSS file name should be called “TreeView.MySkin”.

Skins.png
Also, if you decide to do this, it is also required that you replace all the names of classes in your CSS file from “Customskin” to “Myskin”. Classes.png
And it is also required that you change the path to the Myskin folder in the tool pane. LF.png

CSS for Navigators Tabstrip

CSS for Navigators Tabstrip

Return to Configuring Navigators CSS
Step Action Result
1. Within the Style library under the BambooSolutions folder, you will find the Navigators folder. Navigate to Menu folder > Skins > Customskin and you will see a file and a folder: the folder contains images and the file is the CSS file that you want to modify.

002.png

NOTE: If you are not comfortable with modifying CSS files, make a copy of it on your desktop in case you make too many changes that you may want to roll back to later. Also when you are happy with your changes, make a copy of your CSS file and keep in a safe spot.

2. Add Bamboo Navigator TabStrip web part to the page or the site. If you do not know how to add a web part to a page, follow the instructions here.
3. Configure the tool pane; select Custom Style option. 13015-9.png
4. Download the TabStrip.CustomSkin file and within your CSS text editor or Notepad, make your changes such as the background color of the TabStrip. 13015-10.png
5. Upload the modified file to the Customskin folder. Based on the changes made in the web part as shown below:

13015-11.png

  1. The text-color is now red.
  2. The background color of level1 is pink.
  3. The background color of level2 is green.
  4. The background when an item is selected becomes yellow.

NOTES:

Description Change

If you decide not to use the default folder (Customskin), you need to create a new folder Myskin at the same level as the Customskin folder and copy the images file and the CSS file to the Myskin folder. (We are using “Myskin” as an example, but you can call it what you want.)

The Image file name should be called “TreeView” and the CSS file name should be called “TreeView.MySkin”.

TabStripSkins.png
Also, if you decide to do this, it is also required that you replace all the names of classes in your CSS file from “Customskin” to “Myskin”. Skins4Tabstrip.png
And it is also required that you change the path to the Myskin folder in the tool pane. TabStripLF.png

Configuring the List and List View for the Navigator Web Parts

Configuring the List and List View for the Navigator Web Parts

Return to Overview of Web Part Configuration

To get started configuring this web part, you need to begin with which site your list resides in and from there, select the view and map the columns in your list to the Navigators list that Bamboo provides. If you have not deleted the Bamboo-provided list, all the mapping options will contain the default column name.

Step Action Result
1. Click the arrow by the Web Part title and select Edit Web Part to open the configuration tool pane. HW55_Navigator_Menu_Setting1.png
2. Enter the Site URL. Type the URL address of the site where the Bamboo Navigators list resides, then click the green arrow button. Enter an absolute or relative URL.

01.jpg

NOTE: It is recommended that you enter a relative URL so that your site can be accessed via HTTP or HTTPS, and for portability when creating site templates. The syntax for entering the relative URL is shown in the screenshot above.

3. Select List. Select the Bamboo Navigators list.

02.jpg
You can also use your own list for creating your menu system. You just need to make sure that the list you use has similar columns to Menu Title, Description, URL Link, Parent Menu and Sort Order.
If there is no Bamboo Navigators list in the site you specified, create one by clicking Create List.

NOTE: If the list exists, the Create list button will be grayed out.

4. Select View. Select the view of the list that contains the items you want included in your navigation.

03.jpg
The Bamboo Navigators list comes with the Navigators View which includes all items in the list. If you need several navigator web parts to use the same Bamboo Navigators list, create a filtered view of the list for each web part instance. Only items included in the configured view will appear on the navigation web part (i.e., menu, tabs, tree).

NOTE: The columns included in the list view do not impact the display or configuration of the web part.

5. Menu Title. Select the column that contains the name of the menu item. 04.jpg
6. Description. Select the column that contains the description of the menu item. 05.jpg
This text is displayed in a tooltip when the user hovers over the menu item with a mouse.
7. URL Link. Select the column that contains the URL address for the menu item. 06.jpg
8. Parent Menu. Select the menu item that is the parent of the item you are creating. 07.jpg
This is a lookup column that looks up to the Menu Title column of the Bamboo Navigators list so that you can create submenus.
9. Sort Order. Set the order of the menu items at their respective levels. 08.jpg
For instance, for all of the menu items at the parent level (i.e. the Parent Menu column has no selection), you can set the order in which they are displayed. For three child items under one of these parent menu items, you can set the order in which they display under the parent menu item.
10. URL Icon. Select the column that contains the Icon URL. 09.jpg
You can choose to display a small icon next to the menu item; these icons must be in a column containing the image.

Configuring the Bamboo Navigator Menu Web Part

Configuring the Bamboo Navigator Menu Web Part

To configure this Web Part, do the following:

  1. Enter the Site URL. Type the URL address of the site you want to connect to, then click the green arrow button. Enter an absolute or relative URL. It is recommended that you enter a relative URL so that your site can be accessed via HTTP or HTTPS, and for portability when creating site templates.
  2. Select List. Select the Bamboo Navigators list. You can also use your own list to create your menu system. You just need to make sure that the list you use has similar columns to Menu Title, Description, URL Link, Parent Menu and Sort Order.
  3. Select View. Select the view of the list that contains the columns you want to choose from. The Bamboo Navigators list comes with the Navigators View which includes all of the columns needed for proper configuration (i.e. in the Menu Title, Description, URL Link, Parent Menu, Sort Order fields).
  4. Menu Title. Select the column that contains the name of the menu item.
  5. Description. Select the column that contains the description of the menu item. This text is displayed in a tooltip when the user mouses over the menu item.
  6. URL Link. Select the column that contains the URL address for the menu item.
  7. Parent Menu. Select the menu item that is the parent of the item you are creating. This is a lookup column that looks up to the Menu Title column of the Bamboo Navigators list so that you can create submenus.
  8. Sort Order. Set the order of the menu items at their respective levels. For instance, for all of the menu items at the parent level (i.e. the Parent Menu column has no selection), you can set the order in which they are displayed. For three child items under one of these parent menu items, you can set the order in which they display under the parent menu item.
  9. Select Skin. Select from a variety of user interface designs for your menus.
  10. Select a Language. Select a language from the drop-down menu to translate the Web Part user interface and tool pane settings. You can also create your own translation or modify the default files available in the drop-down menu. See for more information.

NOTE: The translation options for Spanish, French, German and English are currently all still in English. You must customize the files directly to translate the Web Part user interface to the language you require. See Customizing the Translation Settings for more information.

Configuring the Bamboo Navigators Tab Strip Web Part

Configuring the Bamboo Navigators Tab Strip Web Part

Return to Overview of Web Part Configuration

TabStrip.jpgTo configure this web part, follow the steps for each section below.

Step Action Result
1. Enter the Site URL Type the URL address of the site you want to connect to, then click the green arrow button. Enter an absolute or relative URL. It is recommended that you enter a relative URL so that your site can be accessed via HTTP or HTTPS, and for portability when creating site templates.
2. Select List

Select the Bamboo Navigators list. You can also use your own list for creating your menu system. You just need to make sure that the list you use has similar columns to Menu Title, Description, URL Link, Parent Menu and Sort Order. If you do not want to use the Bamboo Navigators list, you can delete it manually.

Create List. In case you deleted the unused Bamboo Navigators list, you can create it again by clicking on this button.
NOTE: If the list exists, the Create list button will be grayed out.

3. Select View Select the view of the list that contains the columns you want to choose from. The Bamboo Navigators List comes with the Navigators View, which includes all of the columns needed for proper configuration (i.e. in the Menu Title, Description, URL Link, Parent Menu, Sort Order fields).
4. Menu Title Select the column that contains the name of the tab.
5. Description Select the column that contains the description of the tab. This text is displayed in a tooltip when the user hovers with a mouse over the tab.
6. URL Link Select the column that contains the URL address for the tab.
7. Parent Menu The Tab Strip Web Part only displays first-level (i.e. parent level) tabs. It cannot display child items from a tab. This column should be blank in order to display each item in the list as a separate tab.
8. Sort Order Set the order of the tabs. For instance, for all of the tabs at the parent level (i.e. the Parent Menu column has no selection), you can set the order in which they are displayed.
9. URL Icon Select the column that contains the Icon URL.

Configuring the Bamboo Site Action Menu Feature

Configuring the Bamboo Site Action Menu Feature

The Bamboo Site Actions Menu Feature allows you to create a menu system for just Administrators to access from the Site Actions menu. This is not a web part but a site collection feature that you activate and a list that you populate.

First you need to go to your Site Collection Features menu and activate the Bamboo Navigator Site Action Menu feature.Activate.png
FeatureActivated.png

Once you activate the site collection feature, Bamboo creates a list called Bamboo Navigator – Site Actions Configuration. By default, if you do not add any content to Bamboo’s Site Actions Configuration list, the feature will use the Bamboo Navigators list items.

Follow the steps below to configure the Bamboo Navigator – Site Actions Configuration list:

Step Action Result
1. Navigate to the Bamboo Navigator – Site Actions Configuration list on the top level site of the site collection where you activated this feature. Bamboo Navigator - Site Actions Configuration.png
2. Click New to create a configuration item. You only need one configuration item for this feature.

NewItem.png

NOTE: You cannot create more than one Site Action Menu item – only child menu items can be created under the single Site Action Menu item.

Config.jpg
3. Menu Items List URL Type the URL address to the list you want to use for the Site Actions menu items. You can use an existing Bamboo Navigators list or create one of your own as long as it contains the columns that can map to Menu Title, Description, Parent Column, URL Link and Sort Order.

Enter an absolute or relative URL. We recommended that you enter a relative URL so that your site can be accessed via HTTP or HTTPS, and for portability when creating site templates.

4. Site Actions Menu Title. Type the name of your custom Site Actions menu.
5. Site Actions Menu Description. Type the description of the menu item. This text is displayed in a tooltip when the user hovers with a mouse over the menu item.
6. Menu Title Column Name. Type the exact name of the column in your list that contains the menu title.
7. Menu Description Column Name. Type the exact name of the column in your list that contains the menu item description.
8. Menu Parent Column Name. Type the exact name of the column in your list that contains the parent menu.
9. Menu Sort Order Column Name. Type the exact name of the column in your list that contains the sort order for the menu items.
10. Parent Menu Icon URL. Enter a relative or absolute path to an icon image to be displayed next to the parent menu title. A default icon has been included with the product installation. It can be found here:
/_layouts/images/Bamboo.Navigators/parent.gif
11. Child Menu Icon URL. Enter a relative or absolute path to an icon image to be displayed next to the child menu title. A default icon has been included with the product installation. It can be found here:
/_layouts/images/Bamboo.Navigators/child.gif

Once you populate the Bamboo Navigator – Site Actions Configuration list, you will see that list item within your Site Actions menu (under the Gear icon on SharePoint 2013).

NavigatorsSiteActionMenu.png
hw55-2010-siteactionsnav.jpg

NOTE: You may want to set unique permissions on the list so that only your site admins will see this menu; as a default, it inherits permission from the parent site.

Configuring the Bamboo Tree Menu

Configuring the Bamboo Tree Menu

Return to Overview of Web Part Configuration

ViewTreeMenu.jpgNavigators allows you to create Tree Menu items to navigate to sites, pages, or lists within and across sites and site collections. SharePoint security is enforced by keeping users without appropriate access from accessing any SharePoint links you may configure in your navigation via item-level security trimming. These navigation controls can help you build a clean, user-friendly project management site, or any other type of site that requires customized navigation controls.

After adding the Bamboo Tree Menu web part to a page, configure the web part following the instructions below:TreeMenu.jpg

Step Action Result
1. Click the arrow by the web part title and select Edit Web Part to open the configuration tool pane. Edit4TreeMenu.png
2. Enter the Site URL Type the URL address of the site you want to connect to, then click the green arrow button. Enter an absolute or relative URL. It is recommended that you enter a relative URL so that your site can be accessed via HTTP or HTTPS, and for portability when creating site templates. The syntax for entering the relative URL is shown in the screenshot below.
URL.jpg
3. Select List

Select the Bamboo Navigators list. You can also use your own list for creating your tab system. You just need to make sure that the list you use has similar columns to Menu Title, Description, URL Link, Parent Menu and Sort Order. If you do not want to use the Bamboo Navigators list, you can delete it manually.

  • Create List – In case you deleted the unused Bamboo Navigators list, you can create it again by clicking on this button.
    List.jpg

    NOTE: If the list exists, the Create list button will be grayed out.

4. Select View Select the view of the list that contains the columns you want to choose from. Bamboo Navigators list comes with the Navigators View, which includes all of the columns needed for proper configuration (i.e. in the Menu Title, Description, URL Link, Parent Menu, Sort Order fields).
5. Menu Title Select the column that contains the name of the tree menu item.
6. Description Select the column that contains the description of the tree menu item. This text is displayed in a tooltip when the user hovers the mouse over the tree menu item.
7. URL Link Select the column that contains the URL address for the tree menu item.
8. Parent Menu Select the tree menu item that is the parent of the item you are creating. This is a lookup column that looks up to the Menu Title column of the Bamboo Navigators list so that you can create submenus.
9. Sort Order Set the order of the tree items. For instance, for all of the tree menu items at the parent level (i.e. the Parent Menu column has no selection), you can set the order in which they are displayed.
10. URL Icon Select the column that contains the Icon URL.

See also:

Configure Navigator Look and Feel Settings

Configure Navigator Look and Feel Settings

In the Web Part Tool Pane you can configure the following Look and Feel Settings to customize the Web Part Menu to individual needs. From release 1.5, it is possible to edit the skin and apply changes via the CSS also. See Customizing Navigators for more information.

Step Action Result
1. Inherit from site theme. Select this option to change the skin to reflect your site theme. 01.jpg
2. Custom Style. Select this option to apply custom style settings. 02.jpg
3. Menu Style. Set skin and font format. 03.jpg
4. Select Skin. Choose from the drop-down list to select from the available skin types. 04.jpg
See images below to see examples of how changing skins changes the look and feel of the web part.
5. Font Format. Click on the checkbox with letter “A” to configure font settings in a dialogue box. Select Font (use the arrows for selection), Style and Size to format font. 05.jpg
Click OK and the selected format is displayed in the sample box. Change the color by picking a new color for Foreground and hover and select respectively. Click apply and ok and the selected format is displayed in the sample box.
6. Automatically resize the Menu. This box is set by default. Deselect this box to set menu size manually. 06.jpg
7. Menu Size. Add pixel(px) value for setting width of the menu. 07.jpg

Results of Skin Changes

HW55_Navigato_Menu_Skin2.png

Navigator Menu with Web 20 skin applied

HW55_Navigator_Menu_Skin1.png

Navigator Menu with CSS Green skin applied

HW55_Navigator_Menu_Skin3.png
Navigator Menu with Inox skin applied

Complementary Products for Navigators

Complementary Products for Navigators

sharepointsolutions.pngYou will find many of our products complement each other quite nicely saving you the time and trouble to write custom code. With Bamboo at the heart of your SharePoint investment, you gain access to a huge catalog of enhancements, components, and accessories that add the critical functionality your business requires.

The same components can be easily used in future applications and they all come from a single, trusted vendor, ensuring an easy purchase process and support you can count on. That’s the Bamboo Way!


Adding Content to Bamboo Navigators List

Adding Content to Bamboo Navigators List

When you click the Create List button in the Navigators Web Part Tool Pane, the Bamboo Navigators list is created. It stores the values for the menu options displayed in the web part.

NOTE: Prior to Release 1.5, The Bamboo Navigators list was created automatically when any Navigator web part was added to a page in the site. With Release 1.5 and later, click the Create List button in the web part tool pane to create the list. It is no longer created automatically.

Below is a screen shot of the new form that opens when you create a new item in the Navigators list. Each option is described below to help make sense of what you see in the list and how the data shows up in the Navigators menu.

NavigatorsList.jpg

No. Column Description
1. Menu
Title
This is the title that displays on the menu.
MenuTitle.jpg
2. Desc-
ription
When users hover a mouse over the menu, this is the tool tip message they will see.
HoverText.jpg
3. URL You can enter an absolute URL (starts with http://) or a relative URL (for the current site, the relative notation is a dot followed by a slash, ./). Relative notation is recommended.
4. Parent Menu

This is a lookup column that looks up the Menu Title in this same list; use it to group your menu items. We recommend you first add all the parent menu items and subsequently add the child items that can look up to the parent.

In our screenshot in No. 2 above, our parent menu is called “Bamboo Solutions” and one of the child items is “Bamboo Products.” We first added the parent so that the parent menu was available for lookup when adding the child item.

Icon-WarningIMPORTANT: Not all Navigator web parts support multiple menu levels. Do not select a parent if you are using the Bamboo Navigator Tab Strip or the Bamboo Navigator Menu with the Mega Menu option enabled.

5. Sort
Order
You need to specify an ordering sequence beginning with 1 to put your menu options in a given order. This column is not required by default.
6. Icon
URL
Each menu option can have an icon displayed next to it. If you decide to show these icons, enter the Icon URL in this column. Example: /_layouts/images/BambooNavigators/icon.gif
7. Nav-
igation
This is optional. Recommended for use when there is more than one Navigator per site using the same list. Add the names of the different Navigation Views to the Navigation field and use this column to create filtered views of the Bamboo Navigators list. Select the appropriate list view when configuring each web part instance.
8. Mega
Content

Use Mega Content to add additional menus for users to see.

Icon-WarningIMPORTANT: Only the Bamboo Navigator Menu and Bamboo TabStrip web parts support Mega Menus.

9. Save or Cancel Always click Save to save your changes. Cancel will close the form without retaining any data you entered.

Also see:

Add Mega Menu to Navigators Menu Web Part

Add Mega Menu to Navigators Menu Web Part

Return to Overview of Web Part Configuration

NOTE: Mega Menus are available only with the Bamboo Navigator Menu Web Part. When using the mega menu feature, you cannot have sub-menu items. The Parent Menu column for all menu items must be blank.

Step Action Result
1. From your site where you want to have the Navigator Menu, edit the web part and check the box to “Show Mega Menu.” ShowMM.jpg
2. Add items to Bamboo Navigators list. AddItems.jpg
3. Insert a table into the Mega Content Window and enter some data into each row. MegaContent.jpg
4. In order to hyperlink your data, highlight an item in one row and click on the Insert menu in the ribbon to locate the Link icon where you can select whether you link is in SharePoint or an external address. LinkingMM.jpg
5. Insert your hyperlink either from SharePoint or from an external address. If you are using an external address, a dialog box will open to guide you in entering and testing the link. InsertHyperlink.jpg
When you are satisfied with your changes, click OK and click Save on the web part.
6. Now when you hover your mouse over the Navigators menu, you have a more robust menu displayed. MMresult.jpg

Also See:

Add Navigator Menu to a Master Page

Use these instructions to add the Bamboo Navigator Menu Web Part to a master page in SharePoint. The steps are the same for all supported versions of SharePoint, although the master pages themselves vary from version to version. If you don’t have SharePoint Designer, you can download the master page from the SharePoint Master Page Gallery, edit it in a text editor, and upload it back to the Master Page Gallery. Sample master pages are included in the Navigator installation package from version 18.1 on.

Plain Team Site - before snip.pngSpecifically, the out-of-the-box Team Site v4.master looks like this before making any changes:

updated master page AFTER.pngAfter adding the Bamboo Navigator Menu, it will look like this:

NOTE: Always make a backup of your master page before making any changes to it. If you rename your working copy of v4.master, be sure to change the site settings to reflect the new name of your master page.

Step Action
1. WPPg with WP on it.pngGo to the top site of the site collection where you want the master page changed and add a Bamboo Navigator Menu web part to a page on that site.

Add values to the Bamboo Navigators list so the menu shows some options.

The screenshot shows the Bamboo Navigator Menu web part with three options: Top A, Top B, and Top C. Home and PMC are links on the Top Link bar in the master page.

Hide Web Part Title.png

NOTE: You will probably not want to show the web part Title in your master page, so be sure to configure the web part with Chrome Type set to None in the Appearance section of the tool pane as shown here.

2. IE dev window.pngWhile viewing the web part page with the navigator web part in Internet Explorer, press F12 or click Tools > F12 Developer Tools to open the IE Developer window. It opens at the bottom of the page. Make sure the DOM Explorer window is displayed.
3. Using the Select Element feature of the IE Developer tool, make a note of the tag above or below which you want to insert the navigator.

find the tag where you plan to add the navigator web part.png
4. edit in SPD.pngEdit the web part page where you put the Bamboo Navigator Menu Web Part in SharePoint Designer. From the Page ribbon, expand the menu beneath Edit Page and click Edit in SharePoint Designer. The page (and the site) will open in the SharePoint Designer.
5. At the top of the web part page code, locate the register tag for the Bamboo Navigator Menu Web Part. Copy the whole tag to your clipboard so you will be able to paste it into the v4.master file.

NOTE: If you used the Bamboo Navigator Tab Strip or the Bamboo Tree Menu instead of the Bamboo Navigator Menu, this register tag will be slightly different than the one shown.

Navigator Register tag.png
6. In SharePoint Designer, edit the v4.master page in Advanced Mode.

Icon-WarningIMPORTANT: Always save a copy of the v4.master file before making any changes. As an alternative, consider saving the v4.master with another name and editing the copy rather than editing the v4.master.

edit the master page in SPD.png
7. Paste the register tag you copied to your clipboard in Step 5 above to the top section of the v4.master file with the other Register tags.

paste register tag.png
8. Go back to the web part page code and locate the Bamboo Navigator tag by searching for WpNs0. Copy the whole tag to your clipboard so you will be able to paste it into the v4.master file.

NOTE: If you used the Bamboo Navigator Tab Strip or the Bamboo Tree Menu instead of the Bamboo Navigator Menu, this tag will be slightly different than the one shown.

tag for nav menu.png
9. Create a new DIV tag in the v4.master file at the location where you want the Bamboo Navigator Menu Web Part to appear.

NOTE: You may consider adding a style to the tag as shown in the code snippet below.

When ready, paste the tag you copied in Step 8 into the new DIV tag.

add div tag and paste NavigatorMenu tag into master page.png
10. Save the changes to the v4.master and view your SharePoint site. You should see the navigator on all pages that use the v4.master.