The Project tab is only display when Control Builder is running as an independent application outside of Visual Studio.Net. In this case, project related information is needed to locate external resources such as images or CSS files used by the control.

You can create or load the navigation control from this tab. If you are going to create a new navigation control, you need to specify the working folder of the control and the type of the control (e.g, for Menu, select horizontal, vertical, context or page-bound context types). Clicking Create New Menu button to create a new menu and it will bring you to the Template tab to choose a template to start with.

The Template tab allows you to select a template to begin building your menu.

In this tab, all the available templates are listed in the left pane; the right panel previews the selected template. Select a template and click Create From Selected Template to initialize your menu based on the selected template.

Refer to look, skin & theme for more details.

Use the Menu tab to configure and modify the menu. The Menu tab allows you to:

• Modify Menu's properties;
• Create and edit look items;
• Create and edit navigation items;
• Edit navigation item styles;

Edit control's properties

Select the root node on the left pane. The right pane will display all available properties for the control.

To create and edit look item

1. Highlight the Item Looks node in the left pane;
2. Click New Look Item button on the toolbar;

A new look item will be created with an automatic generated look ID. While the automatic generated ID can be safely referred by all navigation items, it is recommended to change it to some meaningful IDs. To change the look ID, select a look item from the left pane and edit its ItemID property from the property grid.

To edit a look item, simply select the look item from the left pane and edit its properties from the property grid. Note that while look item is a NavigationItem, many navigation items' properties are not displayed for a look item because those properties are not appearance related properties.

To create and edit navigation item

To create a navigation item:

1. Highlight the parent navigation item node or highlight the navigation items node if you want to create a top level navigation item;
2. Click New navigation item if you want to create a navigation item, or click New Separator if you want to create a separator;

A new navigation item or separator will be created and appended into the tree. To edit the navigation item:

1. Highlight the navigation item in the left pane;
2. Click navigation item on the toolbar to display navigation item's property, - OR -
3. Click Sub Menu on the toolbar to display sub menu properties;
4. Edit the selected item's property in the property grid;

Note that many properties, include all sub menu properties, are not available for a separator item.

To move navigation item

To move navigation items, simply drag the navigation item to its target location, or use one of these buttons on the toolbar:

Use Move Up button to move the selected navigation item up among the siblings;

Use Move Down button to move a navigation item down among the siblings;

Use Move Into button to turn a navigation item into the next navigation item's sub navigation item;

Use Move Out button to move a sub navigation item out of the sub menu;

To delete a navigation item

Click Delete button to delete the selected navigation item.

To use CSS Style Editor

CSS Style Editor is only available within Visual Studio.Net. To edit navigation item styles using CSS Style Editor:

1. Select a navigation item or a look item in the left pane;
2. Select a style property you want to edit, for example, NormalStyle , from the property grid and expand it;
3. Click CssText property;
4. Click the Browse button, the CSS Style Builder is displayed:
   

You can use CSS Style Editor to edit all style properties, including NormalStyle, HoverStyle, ExpandStyle, SelectedStyle, SelectedHoverStyle, SelectedExpandStyle, DisabledStyle and item group's Style.

Use the Preview tab to preview the menu. All images and styles will be rendered in the preview tab. Custom items and client side event handlers are not rendered.

This tab allows you to immediately preview the menu you just created/configured. This is a powerful function that is especially useful to test menu styles.

The Deploy tab contains tools to save a menu or save the menu as skin.

This tab allows you to save the menu as a file or a skin. A menu can be saved as a file only if it does not have any custom items. To load a saved menu, use Menu.LoadMenu method. To load a saved skin, use Menu.LoadMenuSkin method.

Depending on the type of the editor used, the saved menu or skin file has an extension of ".EO.Web.Menu.ascx", ".EO.Web.SlideMenu.ascx" or "EO.Web.TabStrip.ascx". You should not change this extension. Changing this extension will cause LoadMenu/LoadTabStrip or LoadMenuSkin to fail.

Use EO.Web SlideMenu Builder

EO.Web SlideMenu Builder is almost identical to EO.Web Menu Builder, except that it works with SlideMenu rather than Menu, ContextMenu and PageContextMenu. It also offers built-in skins for slide menu rather than regular menus. For detail information about how to use a slide menu, see here.

Use EO.Web TabStrip Builder

EO.Web TabStrip Builder is very similar to EO.Web MenuBuilder too. TabStrip Builder works with TabStrip control. For detail information about how to use a TabStrip, see here.