Dev GuideAPI ReferenceUser Guide
HomeDev GuideAPI Reference
Dev GuideAPI ReferenceUser GuideGitHubNuGetDev CommunityDoc feedbackLog In
GitHubNuGetDev CommunityDoc feedback

CMS version 11.21 and higher.

The following section shows how to extend the navigation for Optimizely Content Management System (CMS) version 11.21 and higher.

You can extend the navigation to let editors access CMS and other products from the global menu.

  • The `[MenuItem]` attribute adds an interface to the menu, see [Adding and configuring menu items](🔗).

  • You can also configure and implement a custom menu provider, see [Using menu providers](🔗).

Attributes and menu providers must reside in an assembly configured as [a shell module](🔗).

In version 11.21 of CMS UI, a new global navigation menu was introduced that differs slightly from how it worked before. If you are upgrading from the old global navigation menu to the new, see [Upgrading navigation](🔗).

Optimizely Content Management System (CMS) version 10 to 11.20.

The following sections show how to extend the navigation for Optimizely Content Management System (CMS) version 10 to 11.20.

You can extend the navigation to let editors access CMS and other products from the global menu.

  • The `\[MenuItem\]` attribute adds an interface to the menu.

  • You can also configure and implement a custom menu provider.

Attributes and menu providers must reside in an assembly configured as a shell module.

## \[MenuItem\] attribute

Use MenuItem on ASP.NET MVC controllers. `MenuItem` adds links to the top menu (and requires the module to be registered; see [Configuring Shell modules](🔗). The required `menuPath` parameter is a logical path of the menu element in the menu. Use the Url parameter to add a linked URL to the interface.

The following example adds a menu item to the top menu bar with the text **Start** and the URL is inferred from the ASP.NET MVC route table:


When you have added menu items, you need to implement the new page to include CMS's styling for shell and also render the menu so you can navigate back.
The key functions to render a menu are:
  • `@Html.Raw(ClientResources.RenderResources("Navigation"))`
  • `@Html.Raw(Html.ShellInitializationScript()) `
  • `@Html.Raw(Html.GlobalMenu()) `
In the following code example, the `GlobalMenu` line renders the HTML markup needed for the menu. Scripts and styles come from the `RenderResources` in the \<head> tag.

### Localize menu items with the MenuItem attribute
You can localize menu items defined with attributes with a static property of a resource class. `ResourceType` references a class with a static property. `TextResourceKey` is the name of the static property that returns the localized text.
Example:

### Organize menu items
The menu path is used to organize menu items in a tree structure. All menu items in the top menu are in the /global bucket. The next segment is the name of menu section, for example, /global/cms. The last segment represents the actual user interface, for example, /global/cms/edit.
### Create a link in a menu
Some menu items have a URL. This creates a link in the menu. The page at the end of this URL should render a menu where the corresponding menu path is selected.
### Permissions with the MenuItem attribute
You can restrict who sees a certain menu item by using the \[Authorize\] attribute. For example:

## Use menu providers
The building blocks of the navigation are menu providers and menu items. A menu provider provides an enumeration of menu items which are organized in a tree according to their menu path. CMS contains a menu provider that looks at `\[MenuItem\]` attributes and provides them as menu items.
### IMenuProvider
You can extend the standard menu by implementing a menu provider as an alternative to attributes. The menu provider returns menu items that are correctly localized. To use a menu provider, implement the `IMenuProvider` interface, decorate it with the `\[MenuProvider\]` attribute, and make it part of a registered shell module.
### Add menu items
You can add menu sections and sub-menu items such as menu sections, drop-downs, URLs and pop-up menu items. Each menu item defines a path which determines its location in the menu hierarchy. For example, a URL menu item with path /global/cms/myMenu is placed in the CMS section of the menu (which has the path /global/cms).
Types:
  • **URL Menu Item** are links; a click navigates to specified URL.
  • **Popup Menu Item** are links opened in a popup window (javascript window.open).
  • **Section Menu Item** are top menu sections which open an underlying menu.
  • **Drop-Down Menu** **Item** are drop-down style menu items designed for the utility menu area (right).
Example:

### Localize menu items with a menu provider
A menu provider returns localized menu items.
### Permissions with the menu provider
The menu provider can defer permission filtering to the menu item by setting the `IsAvailable` delegate to a method that checks access for the user provided with the `RequestContext` parameter.
### Flow of menu items
Menu items flow from the providers into a hierarchical model, which is rendered into HTML.

### Configure web.config
To extend the menu you can, for example, configure _web.config_ as follows:

## Examples
### Global menu button


### Extend the CMS menu section


### New global menu section

Note
While the example below works, you should not use the main navigation for external links. A better example for external links could be example 6 below.

### Extend the User Settings menu using controller action


### Extend the User Settings menu using menu provider


### New drop-down menu with items