Menu Management Guide

Admin Menu Configuration and Management

Menu Structure · Configuration Methods · Icon Usage

🎯 Overview

The menu system controls admin sidebar display, supporting multi-level menus, icons, permission associations, and more.

Features

✅ Support multi-level menus (tree structure)
✅ Support icon configuration
✅ Support permission association
✅ Support show/hide control
✅ Support sorting

Data Model

model Menu {
  id         String    @id @default(cuid())
  name       String                          // Menu name
  parentId   String?                         // Parent ID
  url        String?                         // Page path
  icon       String?                         // Icon name
  permission String[]  @default([])          // Associated permission IDs
  sort       Int       @default(0)           // Sort order
  enable     Boolean   @default(true)        // Whether enabled
  hidden     Boolean   @default(false)       // Whether hidden
  remark     String?                         // Remarks
}

System Management (Level 1 Menu)
├── User Management (Level 2 Menu)
├── Role Management
├── Permission Management
└── Menu Management

Content Management
├── Post Management
├── Category Management
└── Tag Management

Data Statistics
├── Overview
└── Reports

📝 Configuration Methods

Field	Value	Description
Name	System Management	Display name
Parent	-	Level 1 menus don't select parent
URL	-	Level 1 menus usually don't configure URL
Icon	SettingOutlined	Ant Design icon name
Sort	100	Smaller numbers appear first
Enabled	✅	Whether to display

Field	Value	Description
Name	User Management	Display name
Parent	System Management	Select parent menu
URL	/admin/rbac/users	Page path
Icon	UserOutlined	Optional
Sort	10	Sort order for same level menus
Associated Permissions	[View User, Edit User...]	Permissions required to access this menu

Configuration Example

// System Management Menu Group
{
  name: 'System Management',
  parentId: null,
  url: null,
  icon: 'SettingOutlined',
  permission: [],
  sort: 100,
  enable: true,
}

// User Management
{
  name: 'User Management',
  parentId: 'System Management ID',
  url: '/admin/rbac/users',
  icon: 'UserOutlined',
  permission: ['View User ID', 'Edit User ID', 'Delete User ID'],
  sort: 10,
}

// Role Management
{
  name: 'Role Management',
  parentId: 'System Management ID',
  url: '/admin/rbac/roles',
  icon: 'TeamOutlined',
  permission: ['View Role ID', 'Edit Role ID'],
  sort: 20,
}

🎨 Icon Usage

Supported Icons

NextJS Base uses Ant Design icon library, common icons:

Category	Icon Name	Description
System	`SettingOutlined`	Settings
	`DashboardOutlined`	Dashboard
	`AppstoreOutlined`	App
User	`UserOutlined`	User
	`TeamOutlined`	Team
	`SolutionOutlined`	Solution
Content	`FileTextOutlined`	File
	`FolderOutlined`	Folder
	`PictureOutlined`	Picture
Data	`BarChartOutlined`	Bar Chart
	`LineChartOutlined`	Line Chart
	`PieChartOutlined`	Pie Chart
Actions	`EditOutlined`	Edit
	`DeleteOutlined`	Delete
	`PlusOutlined`	Add
Status	`CheckCircleOutlined`	Success
	`CloseCircleOutlined`	Failure
	`ExclamationCircleOutlined`	Warning

Icon Picker

In the menu management page, clicking the icon field will pop up an icon picker where you can visually select icons.

Permission Association

Menus can associate multiple permissions. Users must have at least one associated permission to see the menu.

// Post Management Menu
{
  name: 'Post Management',
  url: '/admin/content/posts',
  permission: [
    'View Post ID',    // Can see menu as long as has view permission
    'Create Post ID',
    'Edit Post ID',
    'Delete Post ID',
  ],
}

Roles can choose whether to inherit menu permissions:

// Enable inheritance: Role automatically gets all permissions associated with menu
{
  name: 'admin',
  menu: ['Post Management ID'],
  inheritMenuPermissions: true,
  // Automatically gets: View Post, Create Post, Edit Post, Delete Post
}

// Disable inheritance: Need to explicitly assign permissions
{
  name: 'editor',
  menu: ['Post Management ID'],
  permission: ['View Post ID', 'Edit Post ID'],  // Only view and edit
  inheritMenuPermissions: false,
}

Display Conditions

Menu display requires meeting the following conditions:

Menu enabled (enable: true)
Menu not hidden (hidden: false)
User role contains this menu
User has at least one associated permission (if menu has associated permissions)

Rendering Flow

// 1. Get user roles
const roles = await getRoles(user.roles)

// 2. Aggregate menu IDs
const menuIds = [...new Set(roles.flatMap(r => r.menu))]

// 3. Get menu details
const menus = await getMenus(menuIds)

// 4. Filter visible menus
const visibleMenus = menus.filter(menu => {
  // Check enabled and hidden status
  if (!menu.enable || menu.hidden) return false
  
  // If menu has associated permissions, check if user has permission
  if (menu.permission.length > 0) {
    const userPermissions = getUserPermissions(user)
    const hasPermission = menu.permission.some(p => 
      userPermissions.includes(p)
    )
    if (!hasPermission) return false
  }
  
  return true
})

// 5. Build menu tree
const menuTree = buildTree(visibleMenus)

✅ Best Practices

✅ Recommended: Group by function module
System Management
├── User Management
├── Role Management
└── Permission Management

Content Management
├── Post Management
└── Category Management

❌ Not Recommended: Flat structure
├── User Management
├── Role Management
├── Post Management
├── Category Management
└── ...

2. Sort Convention

Level 1 menu sort: 100, 200, 300...
Level 2 menu sort: 10, 20, 30...

Example:
System Management (sort: 100)
├── User Management (sort: 10)
├── Role Management (sort: 20)
└── Permission Management (sort: 30)

Content Management (sort: 200)
├── Post Management (sort: 10)
└── Category Management (sort: 20)

3. URL Convention

/admin/{module}/{resource}

Examples:
/admin/rbac/users       - User Management
/admin/rbac/roles       - Role Management
/admin/content/posts    - Post Management
/admin/system/logs      - System Logs

4. Permission Association

✅ Recommended: Associate all related permissions
{
  name: 'Post Management',
  permission: ['View Post', 'Create Post', 'Edit Post', 'Delete Post'],
}

❌ Not Recommended: Only associate partial permissions
{
  name: 'Post Management',
  permission: ['View Post'],  // What about other permissions?
}

RBAC Configuration

Linkage settings between permission system and menus

Permission Model

RBAC architecture design and data relationships

Ant Design Icons

Select and preview menu icons

Authentication System

Complete loop combining login and permissions

Menu Management Guide

🎯 Overview

Features

📋 Menu Structure

Data Model

Menu Levels

📝 Configuration Methods

Create Level 1 Menu

Create Level 2 Menu