Topbar

Marka, merkez içerik ve aksiyonlara sahip uygulama başlığı.

Topbar.tsx

Archintel UI

Kurulum

shadcn CLI ile projenize ekleyebilir veya yukarıdaki "Kaynak Kodu" sekmesinden kodu doğrudan projenize kopyalayabilirsiniz:

$npx shadcn@latest add https://ui.cagriozay.com.tr/r/topbar.json

Kullanım Örneği

import { Topbar } from "@/components/layout/Topbar"

<Topbar
  brand={<Logo />}
  breadcrumbs={[{ label: "Projeler", href: "/projects" }, { label: "Detay" }]}
  center={<SearchInput />}
  centerRole="search"
  centerOnMobile
  right={<Button>Yeni proje</Button>}
/>

Özellikler & Parametreler (API)

Prop	Tür	Varsayılan	Açıklama
brand	ReactNode	—	Sol logo veya marka alanı.
breadcrumbs	BreadcrumbItem[] \| ReactNode	—	Breadcrumb veri dizisi veya özel yol içeriği.
left	ReactNode	—	Sol tarafa eklenen özel içerik.
center	ReactNode	—	Arama, filtre veya sekmeler için orta alan.
right	ReactNode	—	Etiketli sağ aksiyon grubu.
statusBadge	ReactNode	—	Geniş ekranlarda marka yanında gösterilen durum rozeti.
sticky	boolean	true	Üst çubuğu viewport tepesinde sabitler.
bordered	boolean	true	Alt kenarlığı gösterir.
height	"sm" \| "md" \| "lg"	"md"	Minimum üst çubuk yüksekliği.
centerOnMobile	boolean	false	Orta alanı mobilde ikinci satırda gösterir.
centerLabel	string	"Üst çubuk merkezi"	Orta bölgenin erişilebilir adı.
centerRole	"group" \| "search"	"group"	Orta alanın içeriğe uygun erişilebilir rolü.
actionsLabel	string	"Üst çubuk aksiyonları"	Sağ aksiyon grubunun erişilebilir adı.