LogoMkSaaS Docs
LogoMkSaaS Docs
HomepageIntroductionCodebaseVideo TutorialsGetting StartedEnvironment Setup
Configuration

Integrations

DatabaseAuthenticationEmailNewsletterStoragePaymentCreditsCron JobsAIAnalyticsNotificationCaptchaChatboxAffiliates

Customization

MetadataFontsThemesImagesi18nBlogDocsComponentsCustom PagesLanding PageUser Management

Codebase

IDE SetupProject StructureFormatting & LintingUpdating the Codebase
X (Twitter)

Sidebar Menus

Configuring the navigation menu for dashboard pages

Defines the navigation menu for dashboard/admin pages, each item is NestedMenuItem.

src/config/sidebar-config.tsx
export function getSidebarLinks(): NestedMenuItem[] {
  const t = useTranslations('Dashboard');

  return [
    {
      title: t('dashboard.title'),
      icon: <LayoutDashboardIcon className="size-4 shrink-0" />,
      href: Routes.Dashboard,
      external: false,
    },
    {
      title: t('admin.title'),
      icon: <SettingsIcon className="size-4 shrink-0" />,
      authorizeOnly: ['admin'],
      items: [
        {
          title: t('admin.users.title'),
          icon: <UsersRoundIcon className="size-4 shrink-0" />,
          href: Routes.AdminUsers,
          external: false,
        },
        // More admin items...
      ],
    },
    // More sidebar sections...
  ];
}

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

  • Top-level links with icons
  • Expandable sections with nested items
  • Only visible to specific roles through the authorizeOnly property

The sidebar is ideal for providing different menus based on user roles, such as ordinary users only seeing the dashboard, and administrators seeing the user management pages.

Sidebar

Video Tutorial

Next Steps

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

Website Configuration

Configure core settings for your MkSaaS website

Navbar Configuration

Configure the navigation menu in the header

Footer Configuration

Configure the links in the website footer

Avatar Configuration

Configure the user avatar dropdown menu

Table of Contents

Video Tutorial
Next Steps