Floating Menu

Installation

Install the component

Run the following command to install the component and its dependencies:

npx @motion-core/cli add floating-menu

Import the component

Import the component into your Svelte file:

import { FloatingMenu } from "$lib/motion-core";

import { FloatingMenu } from "$lib/motion-core";

Usage

Due to the nature of the component, testing in full-screen mode is recommended.

Get Started

Platform

Resources

Company

<script lang="ts">
	import { FloatingMenu } from "motion-core";
	import motionCoreLogo from "$lib/assets/motion-core-logo.svg?raw";

	const menuGroups = [
		{
			title: "Platform",
			variant: "muted" as const,
			links: [
				{ label: "Home", href: "#" },
				{ label: "Components", href: "#" },
				{ label: "Showcase", href: "#" },
			],
		},
		{
			title: "Resources",
			variant: "default" as const,
			links: [
				{ label: "Documentation", href: "#" },
				{ label: "API Reference", href: "#" },
				{ label: "Community", href: "#" },
			],
		},
		{
			title: "Company",
			variant: "muted" as const,
			links: [
				{ label: "About Us", href: "#" },
				{ label: "Blog", href: "#" },
				{ label: "Careers", href: "#" },
			],
		},
	];
	let demoContainer: HTMLElement;
</script>

<div
	bind:this={demoContainer}
	class="relative flex h-full min-h-150 w-full scale-[1] transform items-center justify-center overflow-hidden p-4"
>
	<p class="text-center">
		Due to the nature of the component, testing in full-screen mode is
		recommended.
	</p>
	<FloatingMenu
		portalTarget={demoContainer}
		{menuGroups}
		primaryButton={{ label: "Get Started", href: "#" }}
	>
		{#snippet logo()}
			<a href="/" class="flex items-center">
				<span
					class="inline-flex shrink-0 items-center text-accent [&>svg]:h-6 [&>svg]:w-auto [&>svg]:fill-current"
					aria-hidden="true"
				>
					{@html motionCoreLogo}
				</span>
			</a>
		{/snippet}
	</FloatingMenu>
</div>

Props

FloatingMenu

Prop	Type	Default
`menuGroups`	`MenuGroup[]`	`—`
`logo`	`Snippet`	`undefined`
`primaryButton`	`MenuButton`	`undefined`
`secondaryButton`	`MenuButton`	`undefined`
`portalTarget`	`HTMLElementstring`	`"body"`
`class`	`string`	`undefined`
`classes`	`FloatingMenuClasses`	`undefined`

FloatingMenuClasses

Use the classes prop to style internal slots without replacing component structure or animation logic.

type FloatingMenuClasses = Partial<{
	root: string;
	overlay: string;
	header: string;
	toggleButton: string;
	toggleLine: string;
	logo: string;
	actions: string;
	primaryButton: string;
	secondaryButton: string;
	menuWrapper: string;
	grid: string;
	group: string;
	groupMuted: string;
	groupTitle: string;
	link: string;
	linkText: string;
	linkUnderline: string;
	divider: string;
}>;

type FloatingMenuClasses = Partial<{
	root: string;
	overlay: string;
	header: string;
	toggleButton: string;
	toggleLine: string;
	logo: string;
	actions: string;
	primaryButton: string;
	secondaryButton: string;
	menuWrapper: string;
	grid: string;
	group: string;
	groupMuted: string;
	groupTitle: string;
	link: string;
	linkText: string;
	linkUnderline: string;
	divider: string;
}>;

<FloatingMenu
	{menuGroups}
	classes={{
		root: "rounded-xl border-zinc-700/60",
		primaryButton: "bg-lime-400 text-black hover:bg-lime-300",
		groupMuted: "bg-zinc-900/80",
		link: "text-zinc-400 hover:text-zinc-50",
	}}
/>

<FloatingMenu
	{menuGroups}
	classes={{
		root: "rounded-xl border-zinc-700/60",
		primaryButton: "bg-lime-400 text-black hover:bg-lime-300",
		groupMuted: "bg-zinc-900/80",
		link: "text-zinc-400 hover:text-zinc-50",
	}}
/>

MenuGroup

Key	Type	Default
`title`	`string`	`—`
`variant`	`"default""muted"`	`undefined`
`links`	`MenuLink[]`	`—`

MenuLink

Key	Type	Default
`label`	`string`	`—`
`href`	`string`	`—`

MenuButton

Key	Type	Default
`label`	`string`	`—`
`href`	`string`	`—`