Skip to content

Menu Builder Feature

Basic Usage

The minimum requirements are as follows:

  • Create a class with the [BlazorPath] attribute. The class definition must include the partial attribute.
  • Define constants of type const string as members within the class.
  • Add the [Item("DisplayName")] attribute to the members.

BlazorPathHelper will automatically scan for class definitions that meet these criteria and generate menu structure data.

WebPaths.cs
1
2
3
4
5
6
7
8
using BlazorPathHelper;

[BlazorPath]
public partial class WebPaths
{
    [Item("TopPage")]
    public const string Home = "/";
}
Generated Code
Auto Generated Code
 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
// <auto-generated />
public partial class WebPaths
{
  public static readonly BlazorPathMenuItem[] MenuItem = [
    new BlazorPathMenuItem(){
      Name = "TopPage",
      Path = "/",
      Children = []
      // omitted
    },
  ];
}

Adding Submenus

If the URLs have a hierarchical structure, submenus will be generated automatically.

For example, consider a menu with the following hierarchical structure:

Text Only
1
2
3
4
5
6
7
8
├── TopPage
├── Sample1
│   ├── Sample1C1
│   └── Sample1C2
│       └── Sample1C2C1
├── Sample2
│   └── Sample2C1
└── Sample3

In this case, you would define the class as follows. No special processing is required.

WebPaths.cs
 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17
18
19
20
21
22
using BlazorPathHelper;

[BlazorPath]
public partial class WebPaths
{
    [Item("TopPage")]
    public const string Home = "/";
    [Item("Sample1")]
    public const string Sample1 = "/sample1";
    [Item("Sample1C1")]
    public const string Sample1C1 = "/sample1/child1";
    [Item("Sample1C2")]
    public const string Sample1C2 = "/sample1/child2";
    [Item("Sample1C2C1")]
    public const string Sample1C2C1 = "/sample1/child2/child1";
    [Item("Sample2")]
    public const string Sample2 = "/sample2";
    [Item("Sample2C1")]
    public const string Sample2C1 = "/sample2/child1";
    [Item("Sample3")]
    public const string Sample3 = "/sample3";
}
Generated Code (Excerpt)
Auto Generated Code
 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
public partial class WebPaths
{
  public static readonly BlazorPathMenuItem[] MenuItem = [
    new BlazorPathMenuItem(){
      Name = "TopPage",
      Path = "/",
      Children = [
        new BlazorPathMenuItem(){
          Name = "Sample1",
          Path = "/sample1",
          Children = [
            new BlazorPathMenuItem(){
              Name = "Sample1C1",
              Path = "/sample1/child1",
              Children = []
            },
            new BlazorPathMenuItem(){
              Name = "Sample1C2",
              Path = "/sample1/child2",
              Children = [
                new BlazorPathMenuItem(){
                  Name = "Sample1C2C1",
                  Path = "/sample1/child2/child1",
                  Children = []
                }
              ]
            }
          ]
        }
      ]
    },
    new BlazorPathMenuItem(){
      Name = "Sample2",
      Path = "/sample2",
      Children = [
        new BlazorPathMenuItem(){
          Name = "Sample2C1",
          Path = "/sample2/child1",
          Children = []
        }
      ]
    },
    new BlazorPathMenuItem(){
      Name = "Sample3",
      Path = "/sample3",
      Children = []
    }
  ];
}

The generated child elements are stored in the Children property.

Displaying the Menu

In the simplest example, the structure would look like this:

NavMenu.razor
 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17
@using BlazorPathHelper

<ul>
@foreach(var item in MenuItems)
{
  <li><a href="@item.Path">@item.Name</a></li>
  @if(item.HasChildren)
  {
    <NavMenu MenuItems="item.Children"/>
  }
}
</ul>

@code {
  [Parameter]
  public BlazorPathMenuItem[] MenuItems { get; set; } = WebPaths.MenuItem;
}

Of course, you can modify the design to suit each component. For more details, refer to Framework Examples.

Customizing Menu Items

Refer to Customizing Menu Items.

Details of Generated Properties

The following properties are generated as part of the BlazorPathMenuItem class. For more details, refer to BlazorPathMenuItem and ItemAttribute.

Property of BlazorPathMenuItem Specification Method for ItemAttribute Description Default Value
Key (Auto-generated) A unique key (string) for the entire menu —
Index (Auto-generated) An index (number) for the entire menu —
GroupKey Group A string representing the menu's hierarchy. Items with the same GroupKey belong to the same group. Automatically determined from URL (e.g., /foo/bar becomes /foo)
GroupLevel (Auto-generated) The hierarchy level of the menu. The top level is 0. —
GroupIndex (Auto-generated) An index (number) within the submenu —
Path (Auto-generated) The link destination of the menu Value of the const string variable
Name Name or first argument The display name of the menu. Can support i18n by specifying a resource key name. Variable name
Description Description A description of the menu NULL
Icon Icon or specified generically (for classes) The icon of the menu NULL
Children (Auto-generated) The child elements of the menu Empty array