Topbar

Header navigasi horizontal dengan slot brand, center content, actions, dan opsi sticky/glass.

import { Topbar, TopbarNav } from "@naraya/ui";

Basic topbar

<Topbar brand={<strong>Naraya</strong>} actions={<Button>Sign in</Button>}>
  <TopbarNav items={[...]} />
</Topbar>

Sticky + glass

<Topbar sticky glass ...>...</Topbar>

Prop	Type	Default	Description
sticky	`boolean`	`false`	Topbar fixed di atas viewport.
glass	`boolean`	`false`	Glass visual style.
brand	`ReactNode`	—	Konten area kiri.
actions	`ReactNode`	—	Konten area kanan.
children	`ReactNode`	—	Area tengah (umumnya TopbarNav).
TopbarNav.items*	`TopbarNavItem[]`	—	Daftar item navigasi.

--bg-surface

Background topbar

--border-subtle

Bottom border

--glass-bg

Glass variant background

--text-main

Nav/brand text color