Highlight parent menu items

Describes how to highlight parent menu items.

Keep the correct parent menu item highlighted when an add-on navigates to an unlisted view. This technique is useful when an add-on has multiple views but only some appear in the menu. For example, the "Email Manager" add-on has three menu views:

Overview
Create email
Reports

The following menu provider defines these three views:

[MenuProvider]
public class EmailsMenuProvider: IMenuProvider {
  public IEnumerable<MenuItem> GetMenuItems() {
    // parent
    var emailsSection = new UrlMenuItem("Email manager", "/global/emails", ResolveMenuUrl("Overview")) {
      IsAvailable = (request) => true
    };

    var overview = new UrlMenuItem("Overview", "/global/emails/overview", ResolveMenuUrl("Overview")) {
      IsAvailable = (request) => true,
        SortIndex = 100
    };
    var create = new UrlMenuItem("Create email", "/global/emails/create", ResolveMenuUrl("Create")) {
      IsAvailable = (request) => true,
        SortIndex = 200
    };
    var reports = new UrlMenuItem("Reports", "/global/emails/reports", ResolveMenuUrl("Reports")) {
      IsAvailable = (request) => true,
        SortIndex = 300
    };

    return new MenuItem[] {
      emailsSection,
      overview,
      create,
      reports,
    };
  }

  public static string ResolveMenuUrl(string item) {
    var moduleUrl = Paths.ToResource(typeof (EmailsMenuProvider), "emails");
    return UriUtil.Combine(moduleUrl, item);
  }
}

Create email is a form with a submit action. After a user sends an email, the application redirects to the Mail sent confirmation page. This page does not appear in the menu, but the Create email menu item should remain highlighted.

To achieve this, add the Mail sent view to the provider with its path nested under the Create email path (/global/emails/create/mailsent) and set IsAvailable to false. The item does not render in the menu but highlights its direct parent.

[MenuProvider]
public class EmailsMenuProvider: IMenuProvider {
  public IEnumerable<MenuItem> GetMenuItems() {
    // parent
    var emailsSection = new UrlMenuItem("Email manager", "/global/emails", ResolveMenuUrl("Overview")) {
      IsAvailable = (request) => true
    };

    var overview = new UrlMenuItem("Overview", "/global/emails/overview", ResolveMenuUrl("Overview")) {
      IsAvailable = (request) => true,
        SortIndex = 100
    };
    var create = new UrlMenuItem("Create email", "/global/emails/create", ResolveMenuUrl("Create")) {
      IsAvailable = (request) => true,
        SortIndex = 200
    };
    var reports = new UrlMenuItem("Reports", "/global/emails/reports", ResolveMenuUrl("Reports")) {
      IsAvailable = (request) => true,
        SortIndex = 300
    };
    var mailSent = new UrlMenuItem(string.Empty, "/global/emails/create/mailsent", ResolveMenuUrl("ResendMessage")) {
      IsAvailable = (request) => false,
        SortIndex = 400
    };

    return new MenuItem[] {
      emailsSection,
      overview,
      create,
      reports,
      mailSent
    };
  }

  public static string ResolveMenuUrl(string item) {
    var moduleUrl = Paths.ToResource(typeof (EmailsMenuProvider), "emails");
    return UriUtil.Combine(moduleUrl, item);
  }
}

Updated 17 days ago