Kuika’nın Menu elementi, kullanıcıların uygulama içinde farklı sayfalara veya işlemlere kolayca erişebilmesini sağlar. Menü, çok seviyeli (multi-level) yapı desteğiyle ana başlıklar ve onların alt menülerini hiyerarşik biçimde görüntüler. Bu yapı sayesinde kullanıcılar uygulama içinde düzenli, sezgisel ve erişilebilir bir navigasyon deneyimi yaşar.

Menu elementi hem web hem de mobil uygulamalarda kullanılabilir.

Kullanım Alanları

• Sol kenar navigasyon menüsü oluşturma
• Farklı ekranlar arasında geçiş sağlama
• Ürün, sipariş veya proje gibi içerikleri kategorize etme
• Çok seviyeli menü yapıları kurma
• Çoklu dil desteğiyle menü içeriğini dinamikleştirme

Kullanım Senaryosu – Ürün Yönetimi Menüsü

Bir e-ticaret yönetim panelinde, kullanıcıların ürünlerle ilgili işlemleri kolayca yapabilmesi için sol kenarda dikey bir Menu eklenir.

Menü yapısı şu şekildedir:

• Products (Ana Menü)
  
  • Add New Product
  • Product List
  • Categories
    
    • Add New Category
• Projects
• Pricing

Kullanıcı “Products” başlığına tıkladığında alt menüler açılır, tekrar tıkladığında kapanır. Menü daraltıldığında (Collapsed) yalnızca ikonlar görünür.

Veri Kaynağı Bağlama

1. Datasources Modülü

• Datasources modülüne gidin. 
• Tables başlığı yanındaki + ikonuna tıklayın.
• Tabloya MenuData adını verin.
• Aşağıdaki tabloyu oluşturun. 

• Ardından Actions > SQL Actions bölümünden yeni bir SQL Action oluşturun ve adına MenuData yazın:

SELECT 1 AS Id, NULL AS ParentId, 'Products' AS Label, NULL AS Path, 'box' AS IconUNION ALLSELECT 2, 1, 'Add New Product', '/new-product', 'plus'UNION ALLSELECT 3, 1, 'Product List', '/products', 'list'UNION ALLSELECT 4, 1, 'Categories', NULL, 'grid'UNION ALLSELECT 5, 4, 'Add New Category', '/new-category', 'folder-plus'UNION ALLSELECT 6, NULL, 'Projects', '/projects', 'briefcase'UNION ALLSELECT 7, NULL, 'Pricing', '/pricing', 'dollar-sign';

UI Design Modülü İşlemleri

1. UI Design modülüne gidin.
2. Sol kenardaki Master Screens altında yeni bir Master Screen oluşturun.
3. Elements > Navigation > Menu elementini çalışma alanına sürükleyip bırakın.

Properties Panelinde aşağıdaki ayarları yapın:

• Direction → Vertical
• Theme → Light
• Primary Color → #3B82F6 (örnek mavi ton)
• Collapsible → True
• Select a Data Type → Dynamic
• Options → MenuData SQL Action seçin

Özelliklerin Senaryo Bağlamında Kullanılması

• Select a Data Type: Menü verisinin kaynağını belirler. Dynamic seçilerek MenuData SQL Action bağlanır.
• Direction: Menünün yönünü belirler. Vertical seçilerek menü sol kenarda dikey görünür.
• Theme: Menünün renk temasını belirler. Light seçildiğinde menü beyaz arka planla görüntülenir.
• Primary Color: Seçili menü öğesinin vurgusunu ayarlar. #3B82F6 (örnek mavi ton) seçildiğinde aktif öğe mavi renkte görünür.
• Collapsible: Menünün daraltılabilir olmasını sağlar. Aktif edildiğinde menü daraltılır, sadece ikonlar görünür.
• Hamburger Control: Mobil cihazlarda menüyü gizleyip açmak için kullanılır. Daraltıldığında üç çizgili simge (hamburger menü) görünür.

Senaryo Tamamlandığında

• Kullanıcı Products menüsüne tıkladığında alt öğeler açılır: “Add New Product”, “Product List”, “Categories”

• Categories tıklandığında altındaki “Add New Category” görünür.
• Menü daraltıldığında yalnızca ikonlar kalır.
• “Pricing” menüsüne tıklandığında /pricing sayfasına yönlendirilir.
• Görsel olarak aktif menü öğesi mavi renkle vurgulanır.

Kısıtlamalar

• Menüde dinamik veri kullanmak için Options alanına SQL Action bağlanmalıdır.
• Çoklu dil desteği yalnızca Languages paneli üzerinden tanımlanan diller için geçerlidir.
• Collapsed modunda mobil cihazlarda menü hamburger kontrolüyle açılır.

İpuçları ve Best Practices

• Menü öğeleri için açıklayıcı ikonlar kullanın.
• Çok seviyeli menülerde ParentId ilişkisini dikkatle tanımlayın.
• Menü başlıklarını kısa ve net tutun.
• Küçük ekranlarda Collapsible özelliğini aktif tutarak alan kazanın.