Skip to content
ShipSaaSShipSaaS Docs

Sidebar Configuration

Defines the left sidebar navigation menu for the dashboard administration pages. Each item is a MenuItemConfig.

src/config/sidebar-config.ts

export function getSidebarLinks(): MenuItemConfig[] {
  return [
    {
      title: m.dashboard,
      icon: IconLayoutDashboard,
      href: Routes.Dashboard,
      external: false,
    },
    {
      title: am.title,
      icon: IconShieldCheck,
      authorizeOnly: ['admin'],
      items: [
        {
          title: am.users.title,
          icon: IconUsers,
          href: Routes.AdminUsers,
          external: false,
        },
      ],
    },
    {
      title: m.settings,
      icon: IconSettings2,
      items: [
        { title: m.profile, icon: IconUserCircle, href: Routes.SettingsProfile },
        // billing (depends on payment.enable)
        { title: m.security, icon: IconLock, href: Routes.SettingsSecurity },
        { title: m.files, icon: IconFileUpload, href: Routes.SettingsFiles },
        { title: m.apiKeys, icon: IconKey, href: Routes.SettingsApiKeys },
        { title: m.notifications, icon: IconBell, href: Routes.SettingsNotifications },
      ],
    },
  ];
}

The sidebar configuration is similar to the navigation bar, but designed specifically for the dashboard area. It supports:

  • Top-level links with icons
  • Nested, expandable menus
  • Visibility restrictions for specific roles via the authorizeOnly property

The sidebar is ideal for providing different menus depending on the user’s role, such as regular users only seeing the dashboard while administrators can see user management pages, etc.

Next Steps

Section titled “Next Steps”

Now that you understand the sidebar configuration, explore these related topics: