Declaring Menu Items in Your App Model

In Bloqs, you configure the application navigation by declaring menu items inside your app model. Menu items can point to:

• Model-driven pages (using PageId)

• Custom Razor pages (using NavigateUri)

• External URLs (using NavigateUri)

---

1. Adding a Menu Item with Submenu Items

You can declare a menu item that groups related pages into a submenu. Use the SubMenuItems collection to define child entries.

Example: Menu with Submenu Items

.AddMenuItem(
    new MenuItem
    {
        Name = "Manage",
        SubMenuItems =
        [
            new SubMenuItem
            {
                Name = "Activities",
                PageId = AppConstants.Pages.ActivityListPage,
            },
            new SubMenuItem
            {
                Name = "Categories",
                PageId = AppConstants.Pages.CategoryListPage,
            },
        ],
    }
)

This will create a “Manage” menu entry with “Activities” and “Categories” as submenu options.

---

2. Adding a Menu Item That Links to a Model-Driven Page

If you want to link directly to a model-driven page, you can reference it using PageId.

.AddMenuItem(
    new MenuItem
    {
        Name = "Activities",
        PageId = AppConstants.Pages.ActivityListPage,
    }
)

This will create a direct menu entry pointing to the Activities list page.

---

3. Adding a Menu Item That Links to a Custom Razor Page

You can also link to a custom Razor page by specifying the route with NavigateUri.

.AddMenuItem(
    new MenuItem
    {
        Name = "Charts",
        NavigateUri = "charts"
    }
)

This will create a direct menu entry pointing to the Charts page at /sample-app/charts.

---

4. Adding a Menu Item That Links to an External Page

Finally, you can link to external websites with NavigateUri. This works in both main menu items and sub menu items.

Example: Main Menu External Link

.AddMenuItem(
    new MenuItem
    {
        Name = "Help",
        NavigateUri = "https://bloqs.blue",
    }
)

Example: Submenu External Link

.AddMenuItem(
    new MenuItem
    {
        Name = "Resources",
        SubMenuItems =
        [
            new SubMenuItem
            {
                Name = "Bloqs Website",
                NavigateUri = "https://bloqs.blue",
            },
            new SubMenuItem
            {
                Name = "Activities",
                PageId = AppConstants.Pages.ActivityListPage,
            },
        ],
    }
)

---

Key Points

1. Use .AddMenuItem() to declare navigation in your app model.

2. PageId → Use for model-driven pages.

3. NavigateUri → Use for custom Razor pages or external links.

4. You can declare both PageId and NavigateUri in main menu items and sub menu items.

5. Mixing model-driven, custom, and external links in the same menu is fully supported.