Profile Button

Interactive Demo

Click the avatar button below to interact with the dropdown menu. For this demo, all navigation actions are disabled.

Usage

Import and use the ProfileButton component in your navigation bar:

import { ProfileButton } from "@/components/profile-button"

export function Navbar({ user }) {
  return (
    <nav>
      {/* Other navbar items */}
      <ProfileButton user={user} />
    </nav>
  )
}

Features

• Displays user avatar with fallback initials
• Shows user name and email in dropdown
• Quick access to profile, billing, and settings pages
• Sign out functionality
• Fully responsive and accessible dropdown menu
• Customizable navigation handlers

Dependencies

• Next.js for routing
• Supabase for authentication
• Lucide React for icons
• Shadcn/ui components (Avatar, Button, DropdownMenu)

Next Steps

Check out the documentation for related components:

• Hero Component
• Pricing Component