LogoMkSaaS Docs

Avatar Button

Configuring the user avatar dropdown menu

Defines the menu items in the user avatar dropdown in the header, each item is MenuItem.

src/config/avatar-config.tsx
export function getAvatarLinks(): MenuItem[] {
  const t = useTranslations('Marketing.avatar');
  
  return [
    {
      title: t('dashboard'),
      href: Routes.Dashboard,
      icon: <LayoutDashboardIcon className="size-4 shrink-0" />,
    },
    {
      title: t('billing'),
      href: Routes.SettingsBilling,
      icon: <CreditCardIcon className="size-4 shrink-0" />,
    },
    {
      title: t('settings'),
      href: Routes.SettingsProfile,
      icon: <Settings2Icon className="size-4 shrink-0" />,
    },
  ];
}

The avatar configuration defines the dropdown menu that appears when users click on their profile avatar in the header. This typically includes links to:

  • User dashboard
  • Account settings
  • Billing/subscription management
  • Logout option (handled separately)

This menu provides quick access to user-specific functionality without cluttering the main navigation.

Next Steps

Now that you understand the avatar 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

Sidebar Configuration

Configure the navigation menu for dashboard

Table of Contents