Sidebar

Daraltılabilir ve gruplanmış uygulama navigasyonu.

Sidebar.tsx

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/sidebar.json

Kullanım Örneği

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

<Sidebar
  groups={navigationGroups}
  activeId="overview"
  defaultCollapsed={false}
  collapsible
  onSelect={setActiveItem}
/>

Özellikler & Parametreler (API)

Prop	Tür	Varsayılan	Açıklama
groups	SidebarNavGroup[]	—	Gruplanmış bağlantı ve aksiyon öğeleri.
activeId	string	—	aria-current ile işaretlenecek aktif öğe kimliği.
onSelect	(id: string) => void	—	Etkin bir öğe seçildiğinde çağrılır.
collapsed	boolean	—	Kontrollü daraltma durumu.
defaultCollapsed	boolean	false	Kontrolsüz kullanımın ilk daraltma durumu.
onToggleCollapse	(collapsed: boolean) => void	—	Daraltma durumu istendiğinde çağrılır.
collapsible	boolean	false	Daraltma kontrolünü gösterir.
brand	ReactNode	—	Üst marka veya logo alanı.
collapsedBrand	ReactNode	—	Dar görünümde kullanılacak alternatif marka.
footer	ReactNode	—	Alt bilgi veya profil alanı.
width	"sm" \| "md" \| "lg"	"md"	Açık ve kapalı sidebar genişlik ölçeği.
ariaLabel	string	"Ana navigasyon"	Sidebar ve iç navigasyonun erişilebilir adı.
collapseLabel	string	"Menüyü daralt"	Daraltma kontrolünün erişilebilir etiketi.
expandLabel	string	"Menüyü genişlet"	Genişletme kontrolünün erişilebilir etiketi.