Navigation

Account menu

The signed-in user’s avatar in the header, opening their links and sign out.

import { AccountMenu } from '@jsonresume/ui'Source(opens in a new tab)

Examples

In the site header

Show code

account-menu/header.tsx

'use client';

import {
  AccountMenu,
  DropdownMenuItem,
  Logo,
  SiteHeader,
  SiteHeaderLink,
} from '@jsonresume/ui';
import { LayoutDashboard, Settings } from 'lucide-react';

export default function AccountMenuHeader() {
  return (
    <SiteHeader
      brand={<Logo />}
      navLabel="Account example"
      actions={
        <AccountMenu
          name="Thomas Davis"
          email="thomas@example.com"
          avatarUrl="https://avatars.githubusercontent.com/u/416209?v=4"
          onSignOut={() => {}}
        >
          <DropdownMenuItem icon={<LayoutDashboard />}>
            Dashboard
          </DropdownMenuItem>
          <DropdownMenuItem icon={<Settings />}>Settings</DropdownMenuItem>
        </AccountMenu>
      }
    >
      <SiteHeaderLink href="#jobs">Jobs</SiteHeaderLink>
    </SiteHeader>
  );
}

Accessibility

The trigger is named "Account: <name>" when only the avatar shows.

Props

Also accepts the attributes of the element AccountMenu renders.
Prop	Type	Default	Description
name required	string	–
avatarUrl	string \| null	–
children	ReactNode	–	Menu items (DropdownMenuItem) between the header and sign out.
email	string	–
onSignOut	(() => void)	–
showName	boolean	false	Show the name beside the avatar in the trigger.
signOutLabel	string	Sign out