Create a custom menu from the code

[alysonsm-dev]

I am trying to create a custom menu that is entirely defined in the code. The idea is to use Liquid to generate a new custom menu where all levels are specified within the code. Something like:

Story
-- Add New Story
-- List Stories
The custom module must include Text or DisplayText, a URL, and a CSS class to add an icon in front of the menu option.

Does anyone know how to do this? I can't find any reference on how to implement it.

Actually, I found something in the TheAdmin theme, but INavigationProvider is only called in the admin area.

https://docs.orchardcore.net/en/latest/guides/add-admin-menu/

Any help would be greatly appreciated.

[hishamco]

@alysonsm-dev the link that you refer to is used for admin menus, there is an OrchardCore.Menu module that allows you to create a menu that could be used in your site

You could create a menu by extending NamedMenu NamedNavigationProvider by specifying your menu name, then in liquid you could use the menu shape to render it as the following

{% shape "menu", alias: "alias:main-menu" %}

[alysonsm-dev]

Thank you so much for your answer. I forgot to mention that the version I am using is 1.2.6. I wasn't able to find the NamedMenu class or controller you mentioned. Could you provide some code?

I really appreciate your help

[hishamco]

Ya this will be a part of 3.0.0 but you could implement INavigationProvider like what we did in admin menus, but you need to use a different menu name

[alysonsm-dev]

Can you please tell me how this is called in the main page instead of admin page? Below you'll see my code:

Startup.cs

`public class Startup : StartupBase
{
private readonly IShellConfiguration _configuration;
private readonly IServiceCollection _services;

public Startup(IShellConfiguration configuration, IServiceCollection services)
{
    _configuration = configuration;
    _services = services;
}

public override void ConfigureServices(IServiceCollection services)
{
    services.AddNavigationProvider<CustomMenuProvider>();
}

}`

CustomMenuProvider. cs

` public class CustomMenuProvider : INavigationProvider
{
internal readonly IStringLocalizer S;

 public CustomMenuProvider(IStringLocalizer<CustomMenuProvider> localizer)
 {
     S = localizer;
 }

 public ValueTask BuildNavigationAsync(string name, NavigationBuilder builder)
 {
     //Only interact with the "main" navigation menu here.
     if (!String.Equals(name, "main", StringComparison.OrdinalIgnoreCase))
     {
         return ValueTask.CompletedTask;
     }

     builder
         .Add(S["Notifications"], S["Notifications"], notifications => notifications
             .Action("Index", "Template", new { area = "CRT.Client.OrchardModules.CommunicationTemplates", groupId = "1" })
             .LocalNav()
         );

     return ValueTask.CompletedTask;
 }

}`

[hishamco]

BTW I made a mistake above the class name is NamedNavigationProvider

TBH I never use a coded menu using Liquid but I'm sure if you did create it from admin UI it will work. Could you try this

{% shape "main-menu" %}