JSON menü
Uygulama menüsü tek bir JSON dosyasında tanımlanır; dikey menü, yatay menü, mobil çekmece ve komut paleti araması aynı tanımdan üretilir. Aktif sayfa, rozet, dış bağlantı ve üç seviyeye kadar alt menü desteklenir; menü yetki denetimi yapmaz, hangi öğelerin görüneceğine uygulama karar verir.
Temel kullanım
acun:menu tanımı menu prop'undan alır: resources/menu altındaki bir dosyanın adı, tam dosya yolu, PHP dizisi ya da Menu nesnesi. Örnekte tanım dizi olarak verildi; uygulamada JSON dosyası kullanın. Düzenlerin nav slot'u menüyü zaten sarar; tek başına kullanırken bir <nav> içine koyun.
<nav class="flex flex-col gap-0.5">
<acun:menu :menu="[
['section' => 'Genel'],
['title' => 'Pano', 'icon' => 'squares-2x2', 'url' => '#'],
['title' => 'Siparişler', 'icon' => 'shopping-bag', 'url' => '#siparisler'],
['title' => 'Raporlar', 'icon' => 'chart-bar', 'children' => [
['title' => 'Satış raporu', 'url' => '#satis'],
['title' => 'Müşteri raporu', 'url' => '#musteri'],
]],
['section' => 'Destek'],
['title' => 'Yardım merkezi', 'icon' => 'lifebuoy', 'url' => 'https://destek.ornek.com', 'target' => '_blank'],
]" />
</nav>| Prop | Değerler |
|---|---|
menu | Dosya adı | tam yol | dizi | Menu nesnesi |
JSON dosyası
Dosya resources/menu/ altında durur ve öğeleri menu anahtarında listeler. Her öğe ya bir bölüm başlığıdır (section) ya da title taşıyan bir bağlantı veya gruptur. icon yalnızca en üst seviyedeki öğelerde gösterilir.
{
"menu": [
{ "section": "Genel" },
{ "title": "Anasayfa", "icon": "home", "route": "anasayfa" },
{ "title": "Siparişler", "icon": "shopping-bag", "route": "siparisler.index", "active": "siparisler.*" },
{ "title": "Raporlar", "icon": "chart-bar", "badge": true, "children": [
{ "title": "Satış", "route": "raporlar.satis" },
{ "title": "Arşiv", "children": [
{ "title": "2025", "url": "/raporlar/arsiv/2025" }
] }
] },
{ "section": "Destek" },
{ "title": "Yardım merkezi", "icon": "lifebuoy", "url": "https://destek.ornek.com", "target": "_blank" }
]
}| Prop | Değerler |
|---|---|
section | Bölüm başlığı; altında öğe kalmazsa gizlenir |
title | Görünen ad |
icon | acun:icon adı |
Bağlantılar
route bir Laravel rota adıdır, parametreleri params ile verilir; rota tanımlı değilse bağlantı # olur. url göreli bir yol ya da tam adres alır. Menü verisi veritabanından da gelebileceği için yalnızca http, https, mailto ve tel adresleri ile göreli yollar kabul edilir; diğerleri (ör. javascript:) # olarak çizilir. "target": "_blank" bağlantıyı yeni sekmede açar ve wire:navigate kullanmaz.
{
"menu": [
{ "title": "Anasayfa", "icon": "home", "route": "anasayfa" },
{ "title": "Müşteri kartı", "icon": "identification", "route": "musteriler.show", "params": { "musteri": 42 } },
{ "title": "Arşiv", "icon": "archive-box", "url": "/raporlar/arsiv" },
{ "title": "Destek hattı", "icon": "phone", "url": "tel:+908500000000" },
{ "title": "Yardım merkezi", "icon": "lifebuoy", "url": "https://destek.ornek.com", "target": "_blank" }
]
}| Prop | Değerler |
|---|---|
route | Rota adı |
params | Rota parametreleri |
url | Göreli yol | http(s) | mailto | tel |
target | _blank |
Aktif sayfa
active verilmezse route öğesi o rota açıkken, url öğesi adres birebir eşleştiğinde aktif olur; dış adresler hiçbir zaman aktif sayılmaz. Alt sayfalarda da aktif kalması için active ile rota adları ya da / ile başlayan yol desenleri verin (* joker). Aktif öğe içeren grup açık çizilir.
{
"menu": [
{ "title": "Siparişler", "icon": "shopping-bag", "route": "siparisler.index", "active": "siparisler.*" },
{ "title": "Raporlar", "icon": "chart-bar", "url": "/raporlar", "active": ["/raporlar", "/raporlar/*"] }
]
}| Prop | Değerler |
|---|---|
active | Rota adı | /yol deseni | bunların dizisi |
Düzende kullanım
Menüyü düzenin nav slot'una koyun. horizontal yatay (üst) menü çizer: bölüm başlıkları atlanır, gruplar açılır panel olur. Yatay düzende mobil çekmece için aynı dosyayı mobileNav slot'una dikey olarak verin. searchItems() menüdeki her bağlantıyı komut paleti araması için döndürür; ayrı bir arama listesi gerekmez.
{{-- Dikey düzen: menü ve arama aynı dosyadan --}}
<acun:layout.sidebar>
<acun:slot:nav><acun:menu menu="dikey" /></acun:slot:nav>
<acun:slot:search>
<acun:command-palette :items="\Acun\Ui\Menu\Menu::fromFile('dikey')->searchItems()" />
</acun:slot:search>
…
</acun:layout.sidebar>
{{-- Yatay düzen: üstte yatay menü, mobil çekmecede dikey menü --}}
<acun:layout.horizontal>
<acun:slot:nav><acun:menu menu="dikey" horizontal /></acun:slot:nav>
<acun:slot:mobileNav><acun:menu menu="dikey" /></acun:slot:mobileNav>
…
</acun:layout.horizontal>| Prop | Değerler |
|---|---|
horizontal | true | false |
PHP ile kurma
Menü PHP'de Menu sınıfıyla da kurulabilir; tanım bir diziden, örneğin veritabanından gelebilir. transform her öğeye çizilmeden önce uygulanır; isActive öğenin aktif olup olmadığına karar verir, null dönerse varsayılan kural işler. Bu dokümantasyon sitesinin menüsü de bu şekilde kurulur.
use Acun\Ui\Menu\Menu;
$menu = new Menu(
$tanim,
// Her öğe çizilmeden önce buradan geçer: kendi alanınızı bağlantıya çevirin.
transform: fn (array $oge) => isset($oge['modul'])
? ['url' => '/moduller/'.$oge['modul']] + $oge
: $oge,
// true / false: öğe aktif mi; null: varsayılan kurala bırak.
isActive: fn (array $oge) => isset($oge['modul']) ? $oge['modul'] === $aktifModul : null,
);
// Blade: <acun:menu :menu="$menu" />
// Komut paleti: $menu->searchItems()| Prop | Değerler |
|---|---|
transform | fn (array $oge): array |
isActive | fn (array $oge): ?bool |
Prop'lar ve slot'lar
Bileşenin kabul ettiği değerler.
| Prop | Varsayılan | Açıklama |
|---|---|---|
menu | — | Zorunlu; dosya adı (resources/menu/…json), tam yol, dizi ya da Menu nesnesi |
horizontal | false | Yatay (üst) menü; bölüm başlıkları gösterilmez |
sections | auto | Yatay menüde true her bölümü tek bir açılır menü yapar (içindeki gruplar yana açılır); false öğeleri yan yana dizer; auto 6 öğeden fazlasında bölümler |
section | — | JSON: bölüm başlığı; yalnızca en üst seviyede |
title | — | JSON: görünen ad |
icon | null | JSON: acun:icon adı; en üst seviyede gösterilir |
route | null | JSON: rota adı; tanımlı değilse bağlantı # |
params | [] | JSON: rota parametreleri |
url | null | JSON: göreli yol ya da http, https, mailto, tel adresi; diğerleri # |
active | null | JSON: rota adı ya da /yol deseni (dizi olabilir, * joker) |
badge | null | JSON: sayı ya da metin; grupta true = alt öğe sayısı |
target | null | JSON: _blank = yeni sekme, wire:navigate kullanılmaz |
children | — | JSON: alt öğeler; en fazla 3 seviye |