Using the Drag & Drop Menu Editor

Using the Drag & Drop Menu Editor

The Drag & Drop Menu Editor lets users easily build and customize mega menus and tabs strips. The browser-based designer allows adding and editing text, hyperlinks, and images with a simple drag and drop interface.

To get started, you need to begin by Configuring the List and List View for the Navigator Web Part.

NOTE: The Drag & Drop Menu Editor is only available for the Navigators Menu and Navigators TabStrip Web Parts. Show Mega Menu or Show Mega Content options must be selected in the Display and Navigation Web Part Settings to enable the editor.

Below is a screen shot of the editor that will appear after you select Edit Web Part to open the configuration tool pane. Each option is described below to help make sense of what you see in the editor to create menus.

Top


Menu-Editor.jpg

No. Option Description
1. Add New Select the Add New button to add menu tabs.
2. Delete Remove an item by selecting Delete from the drop-down arrow menu. To remove all items under a tab, select the Delete button from the tab container’s drop-down menu.
3. Borders Select Borders from the drop-down arrow menu to customize an item or tab container’s border properties. For additional information, see Configuring Border Options.
4. Styles &
Colors
Select Styles & Colors from the drop-down arrow menu to customize a Link or Text element’s font attributes. To apply styles to all items under a tab, select the Styles & Color option from the tab container’s drop-down menu. For additional information, see Configuring Styles & Colors Options.
5. Link Drag & drop or select the Link button to insert a hyperlink. Enter an absolute or relative URL address and the display text.
6. Picture Drag & drop or select the Picture button to insert an image. Enter an absolute or relative URL of the image location.
7. Text Drag & drop or select the Text button to insert text elements.
8. Save Select the Save button to save all changes.

Border Options Top

Navigators-Borders.jpg No. Option Description
1. Border
Width
Border Width sets the width of an items four borders. Expand this section to individually set the width for each border.
2. Border
Style
Border Style sets the style of an items four borders. Expand this section to individually style each border.
Available options: Dotted, Dashed, Solid, Double, Groove, Ridge, Inset, Outset.
3. Border
Color
Enter a color value or select from the color-piker to set the Border Color of an items four borders. Expand this section to individually color each border.
4. Border
Radius
Border Radius allows you to add rounded edges to an items four border corners. Expand this section to individually set a radius for each corner.
5. Box
Shadow
Box Shadow adds one or more shadows to an item. Specify each shadow, in pixels, separated by space key.
6. Width &
Height
This option allows you to set the Width and Height of an items or tabs container. Additionally, you can resize containers using drag and drop.
7. Padding Padding allows you to set the space between the border and the items or tab containers content. Expand this section to individually add padding for each border.
8. Background
Image
This option sets a Background Image for an item or a tab container. The image size will adjust to fit the containers size and padding.
9. Background
Repeat
Background Repeat sets how a background image is repeated. By default, a background image will not be repeated (No-Repeat).
Available options: No-Repeat, Repeat (repeats both vertically and horizontally), Repeat-X (repeats only horizontally), or Repeat-Y (repeats only vertically).
10. Background
Color
Enter a color value or select from the color-piker to set the Background Color for an item or a tab container.

Styles & Color Options Top

Navigators-StylesColors.jpg No. Option Description
1. Font
Name
Select a Font Name to specify the font for an item. To apply the same font to all items under a tab, specify the font from the tab container’s drop-down menu.
Available Options: Arial, Calibri, Comic Sans, Courier, Garamond, Georgia, Impact, Lucida Console, Palatino Linotype, Segoe UI (Default), Tahoma, Times New Roman, Trebuchet MS, Verdana.
2. Font
Size
Select the Font Size to set the size of the font. To apply the same font size to all items under a tab, specify the font size from the tab container’s drop-down menu.
3. Font
Style
Select a Font Style to specify the style for your text. To apply the same font style to all items under a tab, specify the font style from the tab container’s drop-down menu.
Available Options: Normal, Italic, Bold, Bold Italic.
4. Color Specify Color by entering a color value or selecting from the color-piker to set the font color. To apply the same font color to all items under a tab, specify the color from the tab container’s drop-down menu.
5. Alignment Select the horizontal Alignment for your text. To apply the same alignment to all items under a tab, specify alignment from the tab container’s drop-down menu.
Available Options: Left (aligns text to the left), Right (aligns text to the right), Center (center aligns text ), Justify (stretches text to fit line width).
6. Decoration Specify the Decoration to add to the text. To apply the same decoration to all text elements under a tab, specify decoration from the tab container’s drop-down menu.
Available Options: None (Default), Underline, Overline, Line-Through.
7. Line
Height
Select the Line Height options to specify the amount of space above and below inline elements. To apply the same line height to all text elements under a tab, specify line height from the tab container’s drop-down menu.
Available Options: Normal (Default), Number (multiplied by the item’s font size), Length (fixed height, in pixels), % (percent of the item’s font size).
8. Word
Spacing
Specify the Word Spacing to adjust the space between words. To apply the same spacing to all text elements under a tab, specify spacing from the tab container’s drop-down menu.
Available Options: Normal (Default), Length (define the space, in pixels).
9. Letter
Spacing
Specify the Letter Spacing to adjust the space between letters. To apply the same spacing to all text elements under a tab, specify spacing from the tab container’s drop-down menu.
Available Options: Normal (Default), Length (define the space, in pixels).

Also see:

Navigators Tree View Skins

Navigators Tree View Skins

This is a list of available skins and alternate color schemes for the Navigator Tree View Web Part.

Arrows3DClassic – Blue, Green, Orange

Arrows3D.png

Black

black.png

BracketsClassic – Blue, Green, Orange

brackets.png

Classic

classic.png

Color

color.png

Default

default.png

EmbossClassic – Blue, Green Orange

embossclassic.png

ExampleSkins

example skins.png

ExampleSkinsContext Menu

example skins context menu.png

ExampleSkinsCustomNodeStyle

example skins custom node style.png

Forest

forest.png

GlassyBlue – Green

glassy blue.png

Hay

hay.png

Inox

inox.png

Mac

mac.png

Metro

metro.png

MetroTouch

metrotouch.png

MSDNClassic – Blue, Green, Orange

msdnclassic.png

Office2007

Office2007.png

Office2010Black – Silver, Blue

Office2010.png

Outlook

outlook.png

Round3DClassic – Blue, Green, Orange

round3dclassic.png

RoundClassic – Blue, Green, Orange

roundclassic.png

Simple

simple.png

Sitefinity

sitefinity.png

Square3DClassic – Blue, Green, Orange

square3dclassic.png

SquareRectangleClassic – Blue, Green, Orange

squarerectangleclassic.png

Sunset

sunset.png

Telerik

telerik.png

Transparent

transparent.png

Vista

vista.png

Web20

web20.png

WebBlue

webblue.png

Windows7

windows7.png

Navigators Tab Strip Skins

Navigators Tab Strip Skins

Below are examples of the skins available in Navigators Tab Strip to help you see what the differences are between them. Each example shows what menu option looks like when someone clicks on that option on the tab strip:

Skin Name Image
Black Black.jpg
Blue3D Blue3D.jpg
BlueBar** BlueBar.jpg
ClassicBlue ClassicBlue.jpg
ClassicGreen ClassicGreen.jpg
ClassicGrey ClassicGrey.jpg
ClassicOrange ClassicOrange.jpg
ClassicRed ClssicRed.jpg
Cool Cool.jpg
Default Default.jpg
Forest Forest.jpg
GlassyElectric GlassyElectric.jpg
Grey Grey.jpg
Hay Hay.jpg
Inox Inox.jpg
Longhorn Longhorn.jpg
Mac Mac.jpg
Metro Metro.jpg
MetroTouch MetroTouch.jpg
MySite MySite.jpg
OceanI OceanI.jpg
OceanII OceanII.jpg
Office2007 Office2007.jpg
PinkTabs PinkTabs.jpg
PMCBlue PMCBlue.jpg
PMCClassic PMCclassic.jpg
PMCClassic2013 PMCclassic2013.jpg
PMCDark PMCdark.jpg
PMCSkyBLue PMCskyBlue.jpg
PMCYellowGreen PMCyellowGreen.jpg
SA15Default SA15Default.jpg
Simple Simple.jpg
SimpleBarBrick SimpleBarBrick.jpg
SimpleBarGreen SimpleBarGreen.jpg
SImpleBlueBar SimpleBlueBar.jpg
Sitefinity SiteFinity.jpg
Sunset Sunset.jpg
Telerik Telerik.jpg
TelerikGrey TelerikGrey.jpg
Transparent Transparent.jpg
VerticalAdvanced VerticalAdvanced.jpg
VerticalLeft VerticalLeft.jpg
VerticalRight VerticalRight'.jpg
VerticalSimple VerticalSimple.jpg
VerticalVS2005 VerticalVS2005.jpg
Vista Vista.jpg
Web20 Web20.jpg
WebBlue WebBlue.jpg
Windows7 Windows7.jpg
WinVista WinVista.jpg
Wizard Wizard.jpg

Navigators Menu Skins

Navigators Menu Skins

CSS Blue

css_blue.png

CSS Brick

css_brick.png

CssGreen

css_green.png

CssGrey

css_grey.png

Fusion

fusion.png

Ivory

ivory.png

Metallic

metallic.png

Office2010Black

office2010_black.png

Office2010Blue

office2010_blue.png

Office2010Silver

office2010_silver.png

Outlook

outlook.png

Robotic

robotic.png

System

system.png

Terminal

terminal.png

Navigator Look and Feel Settings

Navigator Look and Feel Settings

Return to Overview of Web Part Configuration

LFsettings.jpgIn the Web Part Tool Pane you can configure the following Look and Feel Settings to customize the Web Part Menu to individual needs.

Step Action Result
1. Inherit from site theme Select this option to change the look and feel (also know as skin) to reflect your site’s theme.
2. Custom Style Selecting this option, lets you apply custom style settings and opens a URL window in which to enter the location of your custom style.
CustomStyle.jpg
3. Menu Style

You have two options within this selection.

  • Select Skin – Choose from the drop-down list to select from the available skin types depending on the web part you have chosen.
  • Font Format – Click on the checkbox with letter “A” to configure font settings in a dialog box.
    Font.jpg
    Select Font (use the arrows for selection), Style and Size to format font. 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 Selected respectively. Click apply and ok and the selected format is displayed in the sample box.

    HW55_2010_FontPopup.jpg
4. Automatically resize the Menu This box is set by default. Deselect this box to set menu size manually.
5. Menu Size If you choose not to automatically resize the menu, add a pixel (px) value for setting a static width for the menu.

Navigator Display and Navigation Settings

Navigator Display and Navigation Settings

Return to Overview of Web Part Configuration

Top


The Navigation Settings sub-pane offers the following optional settings for customizing the display and navigation of the menu according to your needs.

NavigatorOptions.jpg

Step Action Description
1. Show Mega Menu Select this option to display further drop-down menus, tables, or images for showing content when hovering over the top-level menu header item.
For additional information, see Add Mega Menus from the Navigators List or Using the Drag & Drop Menu Editor.
2. Show Icon Select this option to display icons next to the header of the menu.HW55_2013_DispandNav4.jpg

Displaying the icons next to the menu options.
3. List the numbers of the sub menu next to the menu The count of items appears in parenthesis alerting you there are three sub-menu options below the main one.
Count.jpg
4. Open the link in another window Select this option to open all links in another window instead of opening them on the same page.
5.![ Menu Orientation Your choices are vertical or horizontal. Step 3 above shows an example of the horizontal choice, which is the default. Selecting Vertical as your choice displays your main menu options vertically and your sub-menu options fly out to the right.
Vertical.jpg

Tab Strip Web Part

Top

NavigatorsOptions-TabStrip.jpg

Step Action Description
1. Display External Content in Frame

Select this option to embed IFrame content from an external or internal URL within the Tab area.

The URL value stored in the Bamboo Navigators list will be populated when clicking the top-level menu header. For more information, see Adding Content to Bamboo Navigators List.

2. Show Mega Content Select this option to enable the Drag & Drop Menu Editor.

Menu-Editor1.jpg

For more information, see Using the Drag & Drop Menu Editor.
3. Show Two Levels Select this option to display two levels of Tab Strips.
4. Show Icon Select this option to display icons next to the header of the menu.HW55_2013_DispandNav4.jpg

Displaying the icons next to the menu options.
5. Open the link in another window Select this option to open all links in another window instead of opening them on the same page.
6. TabStrip Orientation Select vertical or horizontal orientation for displaying TabStrips.

Tree Menu Web Part

Top

NavigatorsOptions-TreeMenu.jpg

Step Action Description
1. Show Icon Select this option to display icons next to the header of the menu.HW55_2013_DispandNav4.jpg

Displaying the icons next to the menu options.
2. Open the link in another window Select this option to open all links in another window instead of opening them on the same page.

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 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:

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 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 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 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.

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

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.