Topbar Layout

Shell halaman marketing/landing: Topbar horizontal sticky + area konten yang mengalir. Section membawa Container sendiri agar hero/feature bisa full-bleed.

import { TopbarLayout } from "@naraya/ui";

Overview

TopbarLayout adalah frame untuk halaman publik: landing page, pricing, about, atau docs marketing. Navigasi ada di atas (horizontal), konten mengalir vertikal, dan footer opsional menempel di bawah. Cocok dipakai berulang lintas halaman marketing — tidak perlu menulis ulang struktur Topbar di tiap halaman.

Examples

Full marketing shell (logo + nav + dropdown + actions)

Komposisi lengkap seperti di sandbox: Logo, TopbarNav (termasuk item ber-child yang membuka dropdown), command trigger, lang & theme switch, app launcher, dan avatar. Di mobile, nav otomatis pindah ke menu sheet (tombol ☰).

<TopbarLayout
  brand={<Logo variant="full" size="sm" />}
  nav={
    <TopbarNav
      items={[
        { label: "Dashboard", active: true },
        { label: "Projects" },
        { label: "Resources", children: [
          { label: "Docs" }, { label: "Guides" }, { label: "Changelog" },
        ] },
        { label: "Pricing" },
      ]}
    />
  }
  actions={
    <>
      <CommandPaletteTrigger label="Cari..." onClick={openCmdk} />
      <LangToggle />
      <ThemeMenu />
      <AppLauncher apps={[...]} />
      <Avatar size="sm" name="Kei Ryusaki" />
    </>
  }
>
  <Container size="xl">...hero + feature grid...</Container>
</TopbarLayout>

Props

Prop	Type	Default	Description
brand	`ReactNode`	—	Logo/brand di kiri topbar.
nav	`ReactNode`	—	Navigasi tengah (links/menu).
actions	`ReactNode`	—	Aksi kanan topbar (tombol, toggle).
sticky	`boolean`	`true`	Topbar menempel saat scroll.
glass	`boolean`	`true`	Treatment glassmorphism pada topbar.
footer	`ReactNode`	—	Footer halaman opsional.
children*	`ReactNode`	—	Konten halaman (bawa Container sendiri per-section).

Topbar Layout

Overview

Examples

Build product pages faster.

Props

Accessibility

Related