Skip to main content
Documentation menu

Avatar Button

Configuring the user avatar dropdown menu

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

src/config/avatar-config.ts

export function getAvatarLinks(): MenuItemConfig[] {
  return [
    {
      title: m.dashboard_avatar_dashboard(),
      href: Routes.Dashboard,
      icon: IconLayoutDashboard,
    },
    ...(websiteConfig.payment?.enable
      ? [
          {
            title: m.dashboard_avatar_billing(),
            href: Routes.SettingsBilling,
            icon: IconCreditCard,
          },
        ]
      : []),
    {
      title: m.dashboard_avatar_settings(),
      href: Routes.SettingsProfile,
      icon: IconSettings2,
    },
  ];
}

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, no need to configure this item)

This menu provides quick access to specific functionality for users without cluttering the main navigation.

Avatar

Next Steps

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