All Patterns

Nav Titan

Nav Titan Component

A responsive navigation header with desktop dropdown menu, mobile slide-down overlay, and scroll-state transitions.

Component Props

Pass these when using the component:

Prop Default Description
logoText Brand Text logo (shown when no image)
logoImage empty Image URL (hides text when set)
logoUrl / Logo link destination
ctaText Get Started Primary CTA button text
ctaUrl # CTA button link
loginText Login Login link text
loginUrl # Login link destination

Data Attribute (on header element)

Attribute Default Description
data-scroll-threshold 50 Pixels scrolled before blur/rounded state triggers

Edit via Cmd+K (Attributes Bar) on the Nav Titan header element.

Features

  • Desktop: Logo + pill nav with Offerings dropdown + Login/CTA
  • Mobile: Logo + CTA + hamburger → slide-down overlay with expandable submenu
  • Scroll State: Semi-transparent background, blur, rounded corners, subtle border
  • Logo: Text by default; provide logoImage URL to use image instead
  • Editor: Mobile nav is visible in Etch editor for editing (dashed border)

Editing Nav Links

Nav links (Offerings, About, Blog) and dropdown items are in the component. Edit Post ID 1976 directly. Update both desktop and mobile sections.