NavUser

A user navigation component combining an avatar and a dropdown menu, typically used in the header of an application to provide access to user-specific actions like profile, settings, and sign out.

Props

PropTypeDescription
userobjectThe user object containing user details.
{
  name: string,
  email: string,
  imageUrl?: string
}

Example

Live Preview

This component combines the Avatar and Dropdown components. It displays the user's image or falls back to initials.

import NavUser from '@/components/NavUser';

// Example with an image
const userWithImage = {
  name: 'Amelia Hart',
  email: 'amelia.hart@example.com',
  imageUrl: 'https://.../avatar.jpg',
};

// Example without an image (falls back to initials)
const userWithoutImage = {
  name: 'Benjamin Carter',
  email: 'ben.carter@example.com',
};

export default function MyComponent() {
  return (
    <>
      <NavUser user={userWithImage} />
      <NavUser user={userWithoutImage} />
    </>
  );
}