App navigation

Marketing Navbar

A sticky marketing site navigation bar with logo, centred nav links, and a CTA button. Collapses to a hamburger sheet on mobile. Backdrop-blur applied on scroll.

Acme

Get started

import { MarketingNavbar } from "@aetherstack/blocks"

Installation

terminal

npx aether-ui add marketing-navbar

Import

import.tsx

import { MarketingNavbar } from "@aetherstack/blocks"

Usage

marketing-navbar.tsx

import { MarketingNavbar } from "@aetherstack/blocks"

export default function SiteLayout({ children }: { children: React.ReactNode }) {
  return (
    <>
      <MarketingNavbar
        brand="Acme"
        navItems={[
          { label: "Features", href: "#features" },
          { label: "Pricing", href: "#pricing" },
          { label: "Blog", href: "/blog" },
        ]}
        cta={{ label: "Get started", href: "/signup" }}
      />
      {children}
    </>
  )
}

Props

Prop	Type	Default	Description
brand	string	—	Brand name text rendered next to the logo.
logo	ReactNode	—	Custom logo element.
navItems	{ label: string; href: string }[]	—	Navigation link items.
cta	{ label: string; href: string; variant?: 'default' \| 'outline' }	—	Call-to-action button in the top right.
className	string	—	Additional classes on the header element.

* Required

Accessibility

→Desktop nav is wrapped in <nav aria-label='Marketing navigation'>.
→Mobile sheet has its own <nav aria-label='Mobile marketing navigation'>.
→Hamburger button includes aria-label='Open menu'.