Marketing

Navbar

Sticky navigation bar with scroll-aware background blur, desktop nav links, CTA button, and responsive mobile hamburger menu.

Open in Storybook

Usage

tsx
import { Navbar } from '@/components/marketing/navbar'

export default function Layout({ children }) {
  return (
    <>
      <Navbar
        brand="MarketMaker"
        links={[
          { label: 'Blog', href: '/blog' },
          { label: 'Roadmap', href: '#roadmap' },
          { label: 'Token', href: '#token' },
        ]}
        cta={{ label: 'Sign In', href: '/login' }}
      />
      {children}
    </>
  )
}

Props

PropType
brand*string
linksNavLink[]
cta{ label: string; href: string }
classNamestring