Kinetic UI
Back to Introduction
Navigation

Fullscreen Menu

A bold, cinematic fullscreen navigation overlay with customizable entrance animations.

Quick Actions
CLI Installation
npx kinetic-ui-cli@latest add fullscreen-menu

The FullscreenMenu provides an immersive navigation experience, perfect for portfolios or creative agency sites. It overrides the entire viewport, forcing the user to focus purely on the navigation hierarchy. The underlying staggered text reveals give it a highly polished, premium feel. Now featuring 4 distinct entrance animations.

Live Preview

Fullscreen Menu

Main Content Area

Click the menu button in the top right of this container to preview the Fullscreen Menu overlay.

Usage Guide

1. Import the Component

Import the component into your React or Next.js page:

import { FullscreenMenu } from "@/components/creative/fullscreen-menu";

2. Implementation Example

Render the component and customize its behavior by passing props:

import { FullscreenMenu } from "@/components/creative/fullscreen-menu";

export default function Example() {
  return (
    <div className="w-full flex items-center justify-center p-8">
      <FullscreenMenu
        links="example"
      />
    </div>
  );
}
Performance Notes
  • Uses CSS hardware acceleration via GPU transform-binds.
  • Damped interpolation minimizes paint-redraw flashes.
  • Tree-shakable import: only compiles elements requested.
Accessibility Notes
  • Full keyboard focus-ring navigation support (`Tab`/`Shift+Tab`).
  • ARIA roles mapped correctly for assistive screen readers.
  • Respects `prefers-reduced-motion` system toggles.