A pill button that expands into a list of social links, with an animated conic-gradient border on hover. Click outside or press Escape to close.
"use client";
import { Dribbble, Github, Instagram, Linkedin, Twitter } from "lucide-react";
import { SocialMenu } from "@/components/ui/social-menu";
export default function SocialMenuDemo() {
return (
// Kept compact and framed. A tall, mostly-empty canvas reads as a blank
// capture: a pill plus three small links covers well under 1% of a
// 1280-wide box.
<div className="flex w-full items-center justify-center bg-background p-8">
<div className="flex w-full max-w-2xl items-start justify-between gap-8 rounded-xl border bg-muted/40 p-10">
<SocialMenu
defaultOpen
items={[
{
label: "GitHub",
href: "https://github.com/Moazzam-Siddiqui",
icon: Github,
},
{
label: "LinkedIn",
href: "https://www.linkedin.com/in/moazzam-ahmad-siddiqui-350181280/",
icon: Linkedin,
},
{
label: "Instagram",
href: "https://www.instagram.com/m_a_s_9909/",
icon: Instagram,
},
]}
/>
<div className="max-w-xs text-sm leading-relaxed text-muted-foreground">
<p className="mb-2 font-medium text-foreground">Social Menu</p>
<p>
A pill that expands into your links. Click outside or press Escape
to close. The border traces while it is open.
</p>
</div>
<SocialMenu
label="FOLLOW"
align="end"
openOnHover
defaultOpen
items={[
{ label: "X", href: "https://x.com", icon: Twitter },
{ label: "Dribbble", href: "https://dribbble.com", icon: Dribbble },
]}
/>
</div>
</div>
);
}