侧边栏菜单
配置仪表盘页面的导航菜单
定义后台管理页面的左侧边栏导航菜单,每个项目都是 MenuItemConfig。
src/config/sidebar-config.ts
export function getSidebarLinks(): MenuItemConfig[] {
return [
{
title: m.dashboard_sidebar_dashboard(),
icon: IconLayoutDashboard,
href: Routes.Dashboard,
external: false,
},
{
title: m.admin_title(),
icon: IconShieldCheck,
authorizeOnly: ['admin'],
items: [
{
title: m.admin_users_title(),
icon: IconUsers,
href: Routes.AdminUsers,
external: false,
},
],
},
{
title: m.dashboard_sidebar_settings(),
icon: IconSettings2,
items: [
{
title: m.dashboard_sidebar_profile(),
icon: IconUserCircle,
href: Routes.SettingsProfile,
external: false,
},
...(websiteConfig.payment?.enable
? [
{
title: m.dashboard_sidebar_billing(),
icon: IconCreditCard,
href: Routes.SettingsBilling,
external: false,
},
]
: []),
{
title: m.dashboard_sidebar_security(),
icon: IconLock,
href: Routes.SettingsSecurity,
external: false,
},
{
title: m.dashboard_sidebar_files(),
icon: IconFileUpload,
href: Routes.SettingsFiles,
external: false,
},
{
title: m.dashboard_sidebar_api_keys(),
icon: IconKey,
href: Routes.SettingsApiKeys,
external: false,
},
...(websiteConfig.newsletter?.enable
? [
{
title: m.dashboard_sidebar_notifications(),
icon: IconBell,
href: Routes.SettingsNotifications,
external: false,
},
]
: []),
],
},
];
}
侧边栏配置类似于导航栏,但专门为仪表盘区域设计。它支持:
- 带图标的顶级链接
- 带嵌套可展开的菜单
- 通过
authorizeOnly属性实现菜单只有特定角色可见
侧边栏非常适合根据用户角色提供不同的菜单,例如普通用户只能看到仪表盘,管理员可以看到用户管理页面等。

下一步
现在您了解了侧边栏配置,请探索其他相关主题: