Floating Menu

pnpm dlx shadcn@latest add https://motion-kit-astro.vercel.app/r/floating-menu.json

npx shadcn@latest add https://motion-kit-astro.vercel.app/r/floating-menu.json

bunx --bun shadcn@latest add https://motion-kit-astro.vercel.app/r/floating-menu.json

yarn dlx shadcn@latest add https://motion-kit-astro.vercel.app/r/floating-menu.json

---
import "@/components/motion-kit/floating-menu-element.ts";

const menuGroups = [
  {
    title: "Explore",
    links: [
      { label: "Home", href: "/" },
      { label: "About", href: "/about" },
      { label: "Contact", href: "/contact" }
    ]
  },
  {
    title: "Resources",
    variant: "muted",
    links: [
      { label: "Blog", href: "/blog" },
      { label: "Docs", href: "/docs" }
    ]
  }
];

const logoHtml = `<svg width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><circle cx="12" cy="12" r="10"/></svg>`;
---

<motion-floating-menu
  menu-groups={JSON.stringify(menuGroups)}
  logo-html={logoHtml}
  primary-button={JSON.stringify({ label: "Get Started", href: "/start" })}
  secondary-button={JSON.stringify({ label: "Login", href: "/login" })}
  class="w-full"
/>

import "@/components/motion-kit/floating-menu-element.ts";

const menuGroups = [
  {
    title: "Explore",
    links: [
      { label: "Home", href: "/" },
      { label: "About", href: "/about" },
      { label: "Contact", href: "/contact" }
    ]
  },
  {
    title: "Resources",
    variant: "muted",
    links: [
      { label: "Blog", href: "/blog" },
      { label: "Docs", href: "/docs" }
    ]
  }
];

const logoHtml = `<svg width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><circle cx="12" cy="12" r="10"/></svg>`;

export default function Page() {
  return (
    <motion-floating-menu
      menu-groups={JSON.stringify(menuGroups)}
      logo-html={logoHtml}
      primary-button={JSON.stringify({ label: "Get Started", href: "/start" })}
      secondary-button={JSON.stringify({ label: "Login", href: "/login" })}
      className="w-full"
    />
  );
}

<script setup>
import "@/components/motion-kit/floating-menu-element.ts";

const menuGroups = [
  {
    title: "Explore",
    links: [
      { label: "Home", href: "/" },
      { label: "About", href: "/about" },
      { label: "Contact", href: "/contact" }
    ]
  },
  {
    title: "Resources",
    variant: "muted",
    links: [
      { label: "Blog", href: "/blog" },
      { label: "Docs", href: "/docs" }
    ]
  }
];

const logoHtml = `<svg width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><circle cx="12" cy="12" r="10"/></svg>`;
</script>

<template>
  <motion-floating-menu
    :menu-groups="JSON.stringify(menuGroups)"
    :logo-html="logoHtml"
    :primary-button="JSON.stringify({ label: 'Get Started', href: '/start' })"
    :secondary-button="JSON.stringify({ label: 'Login', href: '/login' })"
    class="w-full"
  />
</template>

<script>
  import "@/components/motion-kit/floating-menu-element.ts";

  const menuGroups = [
    {
      title: "Explore",
      links: [
        { label: "Home", href: "/" },
        { label: "About", href: "/about" },
        { label: "Contact", href: "/contact" }
      ]
    },
    {
      title: "Resources",
      variant: "muted",
      links: [
        { label: "Blog", href: "/blog" },
        { label: "Docs", href: "/docs" }
      ]
    }
  ];

  const logoHtml = `<svg width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><circle cx="12" cy="12" r="10"/></svg>`;
</script>

<motion-floating-menu
  menu-groups={JSON.stringify(menuGroups)}
  logo-html={logoHtml}
  primary-button={JSON.stringify({ label: "Get Started", href: "/start" })}
  secondary-button={JSON.stringify({ label: "Login", href: "/login" })}
  class="w-full"
/>

<script type="module" src="/components/motion-kit/floating-menu-element.js"></script>

<motion-floating-menu
  menu-groups='[{"title":"Explore","links":[{"label":"Home","href":"/"},{"label":"About","href":"/about"}]},{"title":"Resources","variant":"muted","links":[{"label":"Blog","href":"/blog"}]}]'
  logo-html="<svg width='24' height='24' viewBox='0 0 24 24' fill='none' stroke='currentColor' stroke-width='2'><circle cx='12' cy='12' r='10'/></svg>"
  primary-button='{"label":"Get Started","href":"/start"}'
  secondary-button='{"label":"Login","href":"/login"}'
  class="w-full"
/>