Back to Components
PreviousNext

Full Screen Nav

An animated full-screen navigation overlay with staggered background layer reveals, masked link animations, and built-in themes. Built with motion/react and Tailwind CSS.

Your hero section content goes here 😎

Examples

Layers Type Fade

Your hero section content goes here 😎

Installation

$ npx shadcn@latest add https://akshitr.com/r/full-screen-nav.json

Usage

import { FullScreenNav } from "@/components/full-screen-nav";
 
export default function FullScreenNavDemo() {
  return <FullScreenNav />;
}

Component API

FullScreenNav

PropTypeDefaultDescription
logo?React.ReactNodelogoContent rendered in the top-left of the nav bar. Accepts a string, an image, or any React element.
socials?NavLink[]-Secondary links rendered in the right column. On mobile these wrap into a horizontal row. Hidden when empty.
legal?NavLink[]-Small links rendered below socials. Hidden on mobile. Hidden when empty.
primaryLinks?NavLink[]-Large typographic links rendered in the left column of the overlay. Each item requires a label and href.
theme?NavThemeauroraControls the background layer colors, panel color, link color, and muted color.
className?string-Additional classes applied to the sticky nav bar element. Useful for adjusting position or blending with your page header
layersType?LayersTypenormalControls the background layer blend mode
interface NavLink {
  label: string;
  href: string;
}
type NavTheme =
  | "ice-mint"
  | "aurora"
  | "sunset"
  | "slate-fog"
  | "indigo-dust"
  | "graphite-violet"
  | "ember"
  | "rose-quartz"
  | "forest"
  | "paper"
  | "chalk"
  | "deep-ocean"
  | "neural"
  | "grape-night"
  | "peach-glow"
  | "electric-lime"
  | "desert-gold"
  | "mono-fade"
  | "toxic";

LayersType

type LayersType = "blend" | "fade" | "normal";