---
title: Add and configure menu items
slug: cms-11/dev-docs/adding-and-configuring-menu-items
docTags:
createdAt: 2026-07-22T19:45:21.284Z
---
## MenuItem attribute
Use `MenuItem` on MVC controllers. `MenuItem` adds links to the top menu (and requires the module to be registered; see [Configuring Shell modules](docId\:DNal_JrQ2rB1HrWlcgbGo). The required `menuPath` parameter is a logical path of the menu element in the menu. Optionally, you can add the `Url` parameter to specify the linked URL to the interface. By default, the URL is set to the registered shell route for the module (`/EPiServer/{ShellModule}/{controller}/{action}` for protected modules and `/modules/{ShellModule}/{controller}/{action}` for public modules).
The following example adds a menu item to the top menu bar with the text **Start** and infers the URL from the registered route for the shell module:
```csharp
public class DashboardController: Controller {
[MenuItem("/global/dashboard", Text = "Start")]
public ActionResult Index() {}
}
```
When you add menu items, you need to implement the page to include Optimizely Content Management System (CMS) styling for the shell and render the menu so you can return.
The key function to render a menu is `@Html.CreatePlatformNavigationMenu()`.
Note that the calls to `Html.ShellInitializationScript()` might still be needed depending on what content you are showing in addition to the navigation menu. It is not necessary for the navigation menu itself.
In addition to `Html.CreatePlatformNavigationMenu`, you also need to wrap content below the menu in an element decorated by using this HTML helper `html.ApplyPlatformNavigation()`.
:::hint{type="info"}
**Note**
The Platform Navigation font sizing uses REM and expects the root element to have size 16px (browser default). Some style frameworks, such as Bootstrap 3, override the root font size while others, like Bootstrap 4, do not.
:::
To adapt the example above to work with versions 11.21 and higher, you need to start using `CreatePlatformNavigationMenu()` and `ApplyPlatformNavigation()`. Note that you no longer need `@Html.Raw(ClientResources.RenderResources("Navigation"))` nor `@Html.Raw(Html.ShellInitializationScript())`:
```csharp
@using EPiServer.Framework.Web.Resources
@using EPiServer.Shell.Navigation
@ViewBag.Title
@ClientResources.RenderResources("ShellCore")
@ClientResources.RenderResources("ShellCoreLightTheme")
@Html.CreatePlatformNavigationMenu()
@RenderBody()
```
### Localize menu items with the MenuItem attribute
You can localize menu items by specifying `TextResourceKey`. By default, is the key resolved against `LocalizationService`. Alternatively attribute `ResourceType` can be specified that they should be a class a with a static property named `TextResourceKey` that returns the localized text.
Example:
```javascript
[MenuItem("/global/dashboard", TextResourceKey = "Start", ResourceType = typeof(MenuResources))]
```
### Organize menu items
The menu path organizes menu items in a tree structure. Menu items in the top menu are in the `/global` bucket. The next segment is the name of the menu section, for example, `/global/cms`. The last segment represents the actual user interface, for example, `/global/cms/edit`.
### Permissions with the MenuItem attribute
By default, CMS applies this security policy to shell module controllers. You can configure the policy through attribute `authorizationPolicy` in [module.config](docId\:dI64jrVOXLd4rWo8gsedO). You can then evaluate the availability of the menu item through the policy. You can apply the [AuthorizeAttribute](https://docs.microsoft.com/en-us/dotnet/api/microsoft.aspnetcore.authorization.authorizeattribute?view=aspnetcore-5.0) to specify a custom authorization to complement the default policy that applies to the module. Note, however, that if there is a policy for the shell module, it also evaluates that policy for the request.
```csharp
public class DashboardController: Controller {
[MenuItem("/global/dashboard")]
[Authorize(Roles = "SomeGroup")]
public ActionResult Index() {}
}
```
## Examples
### Global menu button
```csharp
namespace Alloy.Business {
public class EpiServerWorldGlobalMenuItem: Controller {
[MenuItem(MenuPaths.Global + "/globalLink", SortIndex = SortIndex.First - 10, Text = "Optimizely world",
Url = "https://world.episerver.com/cms/")]
public ActionResult Index(string viewName) {
return View();
}
}
}
```
### Extend the CMS menu section.
```csharp
namespace Alloy.Business {
[MenuProvider]
public class CmsMenuProvider: IMenuProvider {
private readonly ModuleTable _modules;
public CmsMenuProvider(ModuleTable modules) {
_modules = modules;
}
public IEnumerable