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:

Release Notes for Navigators

Release Notes for Navigators

NOTE: Release Notes will open in a new browser tab

WSSv3/MOSS SharePoint 2010 SharePoint 2013 SharePoint 2016
Release Notes Release Notes Release Notes Release Notes
Microsoft ended mainstream support for SharePoint 2007 in October 2012. See Microsoft’s Lifecycle Support Policy.
At that time, Bamboo stopped enhancements to our SharePoint 2007 product line, but continues to provide support and bug fixes to customers with active support contracts until October 2017. Previously purchased licenses will continue to function after October 2017, but support for these products will end, and no additional bug fixes will be provided beyond that time. Bamboo plans to cease selling new licenses and annual support contacts for its SharePoint 2007 products in October 2016 to ensure customers will be eligible to receive support for at least one year after purchase.
Microsoft plans to end mainstream support for SharePoint 2010 in October 2015. See Microsoft’s Lifecycle Support Policy. At that time, we will stop any enhancements for our SharePoint 2010 product line but will continue to provide support and bug fixes for our SharePoint 2010 products to customers with active support contracts until October 2020. Previously purchased licenses will continue to function after October 2020, but support for these products will end, and no additional bug fixes will be provided beyond that time. Bamboo plans to cease selling new licenses and annual support contacts for its SharePoint 2010 products in October 2019 to ensure customers will be eligible to receive support for at least one year after purchase.

Visit our website where you can get the latest info about each of our products for SharePoint 2013.

A separate installation package and license key is required for SharePoint 2013 deployment. For additional details, review the following knowledge base articles:

Bamboo Solutions has also begun releasing products for SharePoint 2016. For additional details, check the product release notes in the link above, or contact us.

For details on migration, see the Knowledge Base Article “Migrate Bamboo Products from SharePoint 2013 to SharePoint 2016”

Understanding Bamboo Releases:

  • Bamboo offers Trial, Basic and Premium support.
    • Free Trial support expires after 30 days.
    • For more information about Basic and Premium support, please see the Support Plans page.
    • There may be a fee to upgrade from a major version to another.

See Also:

Overview of Navigators Configuration

Overview of Navigators Configuration

Navigators includes three Web Parts and one SharePoint Feature. They are:

  • Navigators Menu Web Part
  • Navigators TabStrip Web Part
  • Navigators Tree Menu Web Part
  • Bamboo Site Action Menu

All of these items are installed automatically when you install. You do not need to install them individually. However, the Bamboo Site Action Menu feature cannot be automatically activated during install. You must manually activate this SharePoint feature.

When any of the Web Parts are added to a page, the
Navigators list is created on the site where the Web Part was added. If the Navigators list already exists, it will not be overwritten with a new list.

When the Bamboo Site Actions Menu is activated in the Site Collection Features on the top-level site (see Manually Activating the Navigators for a Site Collection for SharePoint 2007, Manually Activating the Navigators for a Site Collection for SharePoint 2010, Manually Activating the Navigators for a Site Collection for SharePoint 2013), the Navigators – Site Actions Configuration list is automatically created. This list only requires one entry. This entry indicates the list information needed to define the parent menu and submenu information for your custom Site Action menu navigation. You can use a list that you create or a copy of the Navigators list as your source for your Site Action menu navigation definition. If you create your own list, make sure it contains the following column data:

  • Menu Title
  • Description (used for tooltips)
  • Parent Menu (lookup to Menu Title column)
  • URL (link destination for the menu item)
  • Sort Order (determines the order of menu items relative to their parent menu)

Whatever the names of your columns are in your own list, you can map them in the tool pane properties of each of the Web Parts and in the Navigators – Site Action Configuration list. See Configuration (for SharePoint 2007), Configuration (for SharePoint 2010), or Configuration (for SharePoint 2013) more information.

You can connect to a Navigators list (or your own list) across sites or site collections as long as you have access and your users have access to the sites referenced in the list. If a user does not have access to a menu/tab/tree item, that menu/tab/tree item is not displayed to the user.

Overview of Navigator Configuration

Overview of Navigator Configuration

ConfigurationToolPane.jpgNavigators lets users create custom menus, tabs, tree items, and a Site Actions menu to navigate to sites, pages, or lists within and across sites and site collections. These navigation controls can help build a clean, user-friendly site that requires customized navigation controls. For example, if you have multiple sub-sites, various projects or links, you can simply go to the specific site by changing tabs instead of opening a separate browser window and entering the URL. Navigators lets you add tabs to the page. 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.

The image here is noted with numbers that refer to each of the sections on the configuration tool pane. To get started configuring the web part, follow the instructions in each of the topics linked below:

No. Section Description
1. Select List, View, Sort and Icon Options Select your list and view and map the columns in your list to the items that the web part needs to function.
2. Navigator Look and Feel Settings These settings control how the Navigator tabs appear in your site.
3. Navigator Display and Navigation Settings These settings drive the orientation and levels of menus within the Navigators.
4. Localize Bamboo Web Parts for your Language Bamboo products can be configured to display product menus, user interface text, and settings in your local language. You can also customize the default text provided with the product. To change the language or text a product displays, perform the steps described in this topic.

Navigators has three web parts you can use: Tree View, Tabs and Mega Menus as well as a site collection feature that you may want to configure:

Navigator Web Part How To Configure
TreeViewNav.jpg Configuring the Bamboo Tree Menu Navigator Web Part
TabStripNav.jpg Configuring the Bamboo Navigator Tab Strip Web Part

Add Menus using the Drag & Drop Menu Editor

MMexample.jpg Add Mega Menus directly to the Bamboo Navigators List

Add Mega Menus using the Drag & Drop Menu Editor

Site Collection Feature for Navigator Site Action Menu
NavigatorsSiteActionMenu.png Configuring the Bamboo Site Action Menu Feature

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.

Migrating Navigators from SharePoint 2010 to SharePoint 2013

Migrating Navigators from SharePoint 2010 to SharePoint 2013

Be sure you have at least the Minimum SharePoint 2010 Product Release (shown in the table below) installed before migrating. If not, upgrade your Bamboo product release before migrating. For more information, see Upgrading your Bamboo Web Part. Also, the target SharePoint 2013 farm requires at least the Minimum SharePoint 2013 product release shown.

Icon-WarningIMPORTANT: When migrating from SharePoint 2010 to SharePoint 2013, the Database Attach Upgrade Method is the only method supported.

Minimum SharePoint 2010 Product Release 10.3.47 Minimum SharePoint 2013 Product Release 10.5.74.2013
Database Attach Upgrade Method
Issues The Navigators migrate without any errors or additional steps required if relative paths were used when configuring the web parts in the SP2010 farm. If absolute paths were used, additional steps are required to complete the migration.
Resolution The web parts in the SP2013 farm need to be configured to ensure they use the URL for the new farm.

Migrating Navigators from SharePoint 2007 to SharePoint 2010

Migrating Navigators from SharePoint 2007 to SharePoint 2010

Be sure you have at least the Minimum SharePoint 2007 Product Release (shown in the table below) installed before migrating. If not, upgrade your Bamboo product release before migrating. For more information, see Upgrading your Bamboo Web Part. Also, the target SharePoint 2010 farm requires at least the Minimum SharePoint 2010 product release shown.

Icon-Warning IMPORTANT: When migrating from SharePoint 2007 to SharePoint 2010, you MUST select the option to change existing SharePoint sites to use the new user experience. Your Bamboo products will not perform as expected with the old look and feel.

Minimum SharePoint 2007 Product Release 1.3.11 Minimum SharePoint 2010 Product Release 10.3.12
In-Place Upgrade
Issues The Navigators Web Parts migrate without any errors or additional steps required.
Resolution N/A
Database Attach Upgrade Method
Issues The successful migration of SharePoint Navigators depends on the original configuration of the Web Parts:

  1. If the Web Parts were configured using relative paths, then then migration will be successful without additional steps.
  2. If the Web Parts were configured using absolute paths, the following message will be displayed in SharePoint 2010:

    OnPreRender: The Web application at [Site URL] could not be found. 
    Verify that you have typed the URL correctly. If the URL should be 
    serving existing content, the system administrator may need to add 
    a new request URL mapping to the intended application.
    
Resolution To resolve Case 2, update the affected SharePoint Navigator Web Part with the appropriate relative URL.