Avatar Button

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

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

• Credit balance (enabled by enableCredits in website.tsx)
• 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.

Video Tutorial

Next Steps

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