Main Menu and Layout

Menu and Layout files are located under the following folders:

• Menu definition: src/lib/navigation/appNavigation.tsx
• Layout components: src/pages/admin/components/layout/

ASP.NET Zero has 13 theme options and some of them use left menu while others use top menu. Both menu types get the menu definition from the buildRawMenu function and useAppMenu hook in appNavigation.tsx. If you need to add new menu items, modify this file.

React routes are defined in:

• src/routes/AppRouter.tsx - defines all application routes

Menu Item Properties

A menu item is defined using the AppMenuItem interface:

export interface AppMenuItem {
  id: string;
  title: string;
  permissionName?: string;
  icon?: string;
  fontIcon?: string;
  route?: string;
  routeTemplates?: string[];
  children?: AppMenuItem[];
  external?: boolean;
  parameters?: Record<string, unknown>;
  requiresAuthentication?: boolean;
  featureDependency?: () => boolean;
}

Adding a New Menu Item

To add a new menu item, modify the buildRawMenu function in appNavigation.tsx:

export const buildRawMenu = (): AppMenuItem[] => [
  // ... existing items
  {
    id: "MyNewPage",
    title: L("MyNewPage"),
    permissionName: "Pages.MyNewPage",
    icon: "my-icon",
    route: "/app/admin/my-new-page",
  },
  // ... more items
];

Make sure to:

1. Add the localization key MyNewPage to your localization files
2. Create the corresponding route in AppRouter.tsx
3. Create the page component

Feature Dependency Example

You can conditionally show menu items based on features:

{
  id: "Chat",
  title: L("Chat"),
  icon: "message-text-2",
  route: "/app/chat",
  featureDependency: () => abp.features.isEnabled("App.ChatFeature"),
}

Next

• Edition Management