CrystalNav

Responsive navigation with GSAP animations

A token-driven navbar component featuring fluid responsive scaling, animated hamburger menu, slide-out drawer, and full GSAP timeline architecture.

Live Demo

Resize browser to see responsive behavior

Hamburger menu appears below 768px

Position

TransparentBlur

Features

Fluid Responsive

clamp()-based scaling, no stepped breakpoints

GSAP Animations

Entrance, hover, hamburger, drawer timelines

Theme-Aware

Inherits CSS custom properties automatically

Accessible

prefers-reduced-motion support, keyboard nav

Swappable Logo

Text, SVG, or custom ReactNode

Variant Architecture

Drawer now, fullscreen/dropdown later

Usage

Basic usage

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

<CrystalNav
  links={[
    { label: 'Home', href: '/', active: true },
    { label: 'About', href: '/about' },
    { label: 'Work', href: '/work' },
    { label: 'Contact', href: '/contact' },
  ]}
  position="fixed"
  blur
  cta={<Button>Get Started</Button>}
/>

Custom logo

<CrystalNav
  logo={<span className="font-bold text-xl">CAITOY</span>}
  logoHref="/"
  links={links}
  transparent  // For hero overlay
/>

Props

Prop	Type	Default
links	CrystalNavLink[]	required
logo	ReactNode	AC logomark
logoHref	string	'/'
position	'fixed' \| 'sticky' \| 'static'	'fixed'
mobileBreakpoint	number	768
mobileVariant	'drawer' \| 'fullscreen' \| 'dropdown'	'drawer'
cta	ReactNode	undefined
transparent	boolean	false
blur	boolean	true
disableEntrance	boolean	false
respectReducedMotion	boolean	true

Open DevTools and toggle device toolbar (Cmd+Shift+M) to test mobile hamburger menu