Nav Menu
FREEİkonlu, rozetli, iç içe açılır gruplu ve aktif sayfada kayan vurgu gösteren dikey menü.
Kurulum
Terminal
npx @bloxa/cli add nav-menu
# or: npx shadcn@latest add @bloxa/nav-menuOtomatik kurulan paketler: motion, radix-ui
Örnekler
İkonlar, rozetler ve iç içe gruplar
Bir öğeye tıkla; vurgu kayarak yeni sayfaya geçer. Bu sitenin docs menüsü de NavMenu.
API
Her bileşen, oluşturduğu HTML elemanının özelliklerini de kabul eder.
NavMenu
| Özellik | Tip | Varsayılan | Açıklama |
|---|---|---|---|
| current | string | — | Geçerli adres (ör. pathname); eşleşen öğe aktif olur. |
| matchNested | boolean | false | Alt yollar da aktif saysın. |
NavSection
| Özellik | Tip | Varsayılan | Açıklama |
|---|---|---|---|
| title | ReactNode | — | Küçük bölüm başlığı. |
NavItem
| Özellik | Tip | Varsayılan | Açıklama |
|---|---|---|---|
| href | string | — | Bağlantı. |
| icon | ReactNode | — | Soldaki ikon. |
| badge | ReactNode | — | Sağdaki sayı ya da etiket. |
| active | boolean | — | Aktif durumu zorla. |
| asChild | boolean | false | Router bağlantını kullan (ör. Next Link). |
NavGroup
| Özellik | Tip | Varsayılan | Açıklama |
|---|---|---|---|
| title / icon / badge | ReactNode | — | Grup başlığı, ikonu ve rozeti. |
| defaultOpen | boolean | — | Başlangıçta açık; verilmezse aktif öğeyi içeren grup kendiliğinden açılır. |