CrystalNav

Responsive navigation system with GSAP animations, drawer menu, and fluid scaling.

CrystalNav is a responsive navigation bar built with GSAP timeline animations. It includes a logo, desktop links with animated underlines, a hamburger toggle that morphs to X, and a slide-out drawer for mobile.

Import

import { CrystalNav } from '@artasce/crystal-ui';

Usage

const links = [
  { label: 'Home', href: '/' },
  { label: 'Work', href: '/work', active: true },
  { label: 'About', href: '/about' },
  { label: 'Contact', href: '/contact' },
];

<CrystalNav links={links} />

Props

CrystalNav Props

Token	Variable	Value	Description
`links`	`CrystalNavLink[]`	(required)	Navigation link items
`logo`	`ReactNode`	AC logomark	Custom logo element
`logoHref`	`string`	'/'	Logo link destination
`position`	`'fixed' \| 'sticky' \| 'static'`	'fixed'	Position behavior
`mobileBreakpoint`	`number`	768	Mobile breakpoint (px)
`mobileVariant`	`'drawer' \| 'fullscreen' \| 'dropdown'`	'drawer'	Mobile menu style
`cta`	`ReactNode`	—	CTA/action slot
`transparent`	`boolean`	false	Transparent background
`blur`	`boolean`	true	Backdrop blur effect
`disableEntrance`	`boolean`	false	Disable entrance animation
`isOpen`	`boolean`	—	Controlled mobile menu state
`onMenuOpen`	`() => void`	—	Mobile menu open callback
`onMenuClose`	`() => void`	—	Mobile menu close callback
`respectReducedMotion`	`boolean`	true	Respect prefers-reduced-motion

Values update live with theme changes. Click any row to copy the CSS variable.

CrystalNavLink Type

interface CrystalNavLink {
  label: string;
  href: string;
  icon?: ReactNode;
  active?: boolean;
  external?: boolean;
}

Examples

With CTA Button

<CrystalNav
  links={links}
  cta={<CrystalMagneticButton variant="solid">Contact</CrystalMagneticButton>}
/>

Transparent Over Hero

<CrystalNav links={links} transparent blur />

Custom Logo

<CrystalNav
  links={links}
  logo={<img src="/logo.svg" alt="My Brand" className="h-8" />}
  logoHref="/"
/>

Animation System

CrystalNav uses the useCrystalNavTimelines hook to coordinate four GSAP timelines:

Timeline	Trigger	Effect
Entrance	Page load	Logo blur-to-sharp + links stagger fade-in
Hamburger	Toggle click	Three-line to X morph
Drawer	Menu open/close	Right-side slide with link stagger
Link hover	Mouse enter/leave	Animated underline (desktop only)

All animations respect prefers-reduced-motion and clean up automatically via useGSAP.

Sub-Components

Component	Purpose
`CrystalNavLogo`	Logo wrapper with link and entrance animation
`CrystalNavLink`	Individual link with animated underline
`CrystalNavHamburger`	Animated hamburger/X toggle button
`CrystalNavDrawer`	Slide-out mobile navigation panel

These are used internally by CrystalNav but can also be imported individually for custom navigation layouts.

CrystalNav Props

On this page