Underlay Navigation

Installation

Install the component

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

npx @motion-core/cli add underlay-navigation

npx @motion-core/cli add underlay-navigation

Import the component

Import the component into your Svelte file:

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

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

Usage

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

	type Props = Partial<ComponentProps<typeof UnderlayNavigation>>;

	const links = [
		{ label: "Home", href: "#", active: true },
		{ label: "Components", href: "#" },
		{ label: "Showcase", href: "#" },
		{ label: "Docs", href: "#" },
		{ label: "Updates", href: "#" },
		{ label: "Contact", href: "#" },
	];

	const footerGroups = [
		{
			title: "Socials",
			links: [
				{ label: "GitHub", href: "#" },
				{ label: "X / Twitter", href: "#" },
				{ label: "Discord", href: "#" },
			],
		},
		{
			title: "Quick Links",
			links: [
				{ label: "Registry", href: "#" },
				{ label: "CLI Guide", href: "#" },
			],
		},
	];

	let { panelWidth = "clamp(18rem, 32vw, 24rem)" }: Props = $props();
</script>

<UnderlayNavigation
	class="h-full min-h-172 w-full"
	{links}
	{footerGroups}
	{panelWidth}
>
	{#snippet brand()}
		<a href="/" class="inline-flex items-center gap-2 text-fixed-light">
			<span
				class="inline-flex shrink-0 items-center text-accent [&>svg]:h-5 [&>svg]:w-auto [&>svg]:fill-current"
				aria-hidden="true"
			>
				{@html motionCoreLogo}
			</span>
		</a>
	{/snippet}

	<div class="bg-fixed-dark relative h-full overflow-hidden">
		<img
			src="/images/demos/sample-16.jpg"
			alt=""
			class="absolute inset-0 h-full w-full object-cover"
		/>
	</div>
</UnderlayNavigation>

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

	type Props = Partial<ComponentProps<typeof UnderlayNavigation>>;

	const links = [
		{ label: "Home", href: "#", active: true },
		{ label: "Components", href: "#" },
		{ label: "Showcase", href: "#" },
		{ label: "Docs", href: "#" },
		{ label: "Updates", href: "#" },
		{ label: "Contact", href: "#" },
	];

	const footerGroups = [
		{
			title: "Socials",
			links: [
				{ label: "GitHub", href: "#" },
				{ label: "X / Twitter", href: "#" },
				{ label: "Discord", href: "#" },
			],
		},
		{
			title: "Quick Links",
			links: [
				{ label: "Registry", href: "#" },
				{ label: "CLI Guide", href: "#" },
			],
		},
	];

	let { panelWidth = "clamp(18rem, 32vw, 24rem)" }: Props = $props();
</script>

<UnderlayNavigation
	class="h-full min-h-172 w-full"
	{links}
	{footerGroups}
	{panelWidth}
>
	{#snippet brand()}
		<a href="/" class="inline-flex items-center gap-2 text-fixed-light">
			<span
				class="inline-flex shrink-0 items-center text-accent [&>svg]:h-5 [&>svg]:w-auto [&>svg]:fill-current"
				aria-hidden="true"
			>
				{@html motionCoreLogo}
			</span>
		</a>
	{/snippet}

	<div class="bg-fixed-dark relative h-full overflow-hidden">
		<img
			src="/images/demos/sample-16.jpg"
			alt=""
			class="absolute inset-0 h-full w-full object-cover"
		/>
	</div>
</UnderlayNavigation>

Props

UnderlayNavigation

Prop	Type	Default
`links`	`NavigationLink[]`	`—`
`footerGroups`	`FooterGroup[]`	`[]`
`brand`	`Snippet`	`undefined`
`children`	`Snippet`	`undefined`
`activeHref`	`string`	`undefined`
`menuLabel`	`string`	`"Menu"`
`closeLabel`	`string`	`"Close"`
`ariaLabel`	`string`	`"Primary navigation"`
`panelWidth`	`string`	`"clamp(18rem, 32vw, 24rem)"`
`foregroundRadius`	`string`	`"1rem"`
`open`	`boolean`	`false`
`class`	`string`	`""`
`classes`	`UnderlayNavigationClasses`	`undefined`

NavigationLink

Key	Type	Default
`label`	`string`	`—`
`href`	`string`	`—`
`active`	`boolean`	`false`
`target`	`string`	`undefined`
`rel`	`string`	`undefined`

FooterGroup

Key	Type	Default
`title`	`string`	`—`
`links`	`NavigationLink[]`	`—`

UnderlayNavigationClasses

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

type UnderlayNavigationClasses = Partial<{
	root: string;
	underlay: string;
	panel: string;
	toggleButton: string;
	toggleLine: string;
	navList: string;
	navLink: string;
	activeLink: string;
	footer: string;
	footerGroup: string;
	footerTitle: string;
	footerLink: string;
	foreground: string;
	header: string;
	brand: string;
	content: string;
}>;

type UnderlayNavigationClasses = Partial<{
	root: string;
	underlay: string;
	panel: string;
	toggleButton: string;
	toggleLine: string;
	navList: string;
	navLink: string;
	activeLink: string;
	footer: string;
	footerGroup: string;
	footerTitle: string;
	footerLink: string;
	foreground: string;
	header: string;
	brand: string;
	content: string;
}>;