Avatar Button
Configuring the user avatar dropdown menu
Defines the menu items in the user avatar dropdown in the header, each item is MenuItem.
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: