# 菜單 >[warning] 此文檔可忽略，JeecgBoot已經改造 直接通過后臺配置菜單即可， > 保留文檔目的：便于大家理解前端菜單的原生實現。 項目菜單配置存放于[src/router/menus](https://github.com/vbenjs/vue-vben-admin/tree/main/src/router/menus)下面 提示 菜單必須和路由匹配才能顯示 ## 菜單項類型 ~~~ export interface Menu { // 菜單名 name: string; // 菜單圖標,如果沒有，則會嘗試使用route.meta.icon icon?: string; // 菜單路徑 path: string; // 是否禁用 disabled?: boolean; // 子菜單 children?: Menu[]; // 菜單標簽設置 tag: { // 為true則顯示小圓點 dot: boolean; // 內容 content: string'; // 類型 type: 'error' | 'primary' | 'warn' | 'success'; }; // 是否隱藏菜單 hideMenu?: boolean; } ~~~ ## 菜單模塊 一個菜單文件會被當作一個模塊 提示 children 的 path 字段不需要以`/`開頭 ~~~ import type { MenuModule } from '/@/router/types'; import { t } from '/@/hooks/web/useI18n'; const menu: MenuModule = { orderNo: 10, menu: { name: t('routes.dashboard.dashboard'), path: '/dashboard', children: [ { path: 'analysis', name: t('routes.dashboard.analysis'), }, { path: 'workbench', name: t('routes.dashboard.workbench'), }, ], }, }; export default menu; ~~~ 以上模塊會轉化成以下結構 ~~~ [ path: '/dashboard', name: t('routes.dashboard.dashboard'), children: [ { path: 'dashboard/analysis', name: t('routes.dashboard.analysis'), }, { path: 'dashboard/workbench', name: t('routes.dashboard.workbench'), }, ], ] ~~~ ## 新增菜單 直接在[src/router/menus/modules](https://github.com/vbenjs/vue-vben-admin/tree/main/src/router/menus/modules)內新增一個模塊文件即可。 不需要手動引入，放在[src/router/routes/menus/modules](https://github.com/vbenjs/vue-vben-admin/tree/main/src/router/menus/modules)內的文件會自動被加載。 ## 菜單排序 在菜單模塊內，設置`orderNo`變量，數值越大，排序越靠后