Kuika’nın Menu elementi, uygulama içi navigasyonu düzenlemek ve kullanıcıların farklı sayfa ya da işlevlere hızlıca erişmesini sağlamak için kullanılır. Tek seviyeli veya çok seviyeli (nested) menü yapıları oluşturabilir, uygulamanın bilgi mimarisini kullanıcı dostu bir şekilde sunabilirsiniz.
Menu elementi, hem masaüstü hem de mobil arayüzlerde tutarlı bir navigasyon deneyimi sunarak kullanıcıların uygulama içinde kaybolmadan ilerlemesini sağlar.
Menu elementi hem web hem de mobil uygulamalarda desteklenmektedir.
1.1. Sık Kullanım Senaryoları
Uygulama genelinde ana navigasyon menüsü oluşturma
Kullanıcıların farklı sayfalar arasında hızlı geçiş yapmasını sağlama
Yönetim panellerinde modül, ekran veya özellik bazlı menüleme
Çok seviyeli (ana menü – alt menü) navigasyon yapıları oluşturma
Mobil uygulamalarda yan menü (drawer) veya hamburger menü kullanımı
Kullanıcı rolüne göre farklı menü içeriklerinin gösterilmesi
Çok dilli uygulamalarda dile göre menü başlıklarının dinamik olarak değiştirilmesi
Sık kullanılan işlemleri veya sayfaları tek bir menü altında toplama
2. Temel Özellikler
Çok seviyeli menü yapısı desteği. Ana menü ve alt menüler oluşturarak karmaşık navigasyon senaryolarını düzenli şekilde sunar.
Sayfa yönlendirme desteği. Menü öğeleri aracılığıyla farklı ekranlara veya URL’lere geçiş yapılabilir.
Dinamik veri ile menü oluşturma. Menü başlıkları ve hedefleri statik tanımlanabileceği gibi veri kaynaklarından dinamik olarak da beslenebilir.
Rol bazlı görünürlük. Kullanıcının yetkisine veya rolüne göre menü öğeleri gösterilip gizlenebilir.
İkon destekli menü öğeleri. Menü başlıklarına ikon eklenerek görsel olarak daha anlaşılır bir navigasyon sağlanır.
Genişletilebilir ve daraltılabilir yapı. Alt menüler kullanıcı etkileşimine göre açılıp kapatılabilir.
2.1. Menu Elementi Özellikleri
Properties panelinden aşağıdaki ayarları yapılandırabilirsiniz:
Select a Data Type: Menü verilerini Statik (Static) veya Dinamik (Dynamic) olarak yapılandırabilirsiniz.
Static: Menü öğelerini manuel olarak ekleyebilirsiniz. + Sub Menu ile alt menüler, + Menu Item ile tek seviyeli menü öğeleri ekleyebilirsiniz.
Dynamic: Menü öğeleri bir veri kaynağından alınır. Options alanından veri kaynağına ait özel aksiyonu seçebilirsiniz.
Direction: Menü öğelerinin yatay (Horizontal) veya dikey (Vertical) görüntülenmesini sağlar.
Theme: Menü temasını Light veya Dark olarak seçebilirsiniz.
Hamburger Control: Menü öğesini simge şeklinde (üç çizgili ikon) daraltarak, tıklanıldığında menünün açılmasını sağlayan kontrol unsurudur.
closeSiblingSubmenusOnOpen: Bir alt menü (sub menu) açıldığında, aynı seviyedeki diğer alt menülerin otomatik olarak kapanmasını sağlar.
2.1.1. Çoklu Dil Desteği Sağlama
Menü eklediğiniz uygulamayı açın.
Sol paneldeki Languages paneline gidin.
Languages başlığı yanındaki “+” simgesine tıklayın.
Açılan New Language penceresinde eklemek istediğiniz dili seçin ve isimlendirin.
CREATE butonuna tıklayarak işlemi tamamlayın.
Menu elementindeki metinler, eklediğiniz her dilde otomatik olarak çeviri penceresine eklenir. Çevirileri ekleyerek uygulamanızın çok dilli desteğini etkinleştirebilirsiniz.
2.1.2. Alt Menülerin Açılıp Kapanması ve Kolon Gibi Dizilmesi
Kuika Menu elementi, Sub Menu özelliği sayesinde çok seviyeli (multi-level) menü yapılarının oluşturulmasına olanak tanır. Bu sayede kullanıcılar, bir ana menü başlığına tıklayarak alt menü seçeneklerini görüntüleyebilir veya gizleyebilir. Bu yapı hem kullanıcının uygulama içinde daha kolay gezinmesini sağlar hem de karmaşık menüleri sade bir düzene oturtur.
Sub Menu Yapısı Kurma
Menü Tipini Seçin: Menu elementi için veri tipi olarak Static seçin. Böylece menü yapısını manuel olarak oluşturabilirsiniz.
Sub Menu Ekleyin: Properties panelinde, + Sub Menu butonuna tıklayarak bir ana menü başlığı ekleyin. Bu öğe, alt menülerin bağlı olacağı başlık görevini görür.
Alt Menü Öğeleri Ekleyin: Eklediğiniz Sub Menu’nün altında yer alan + Menu Item butonuna tıklayarak bir veya birden fazla alt menü öğesi oluşturabilirsiniz. Her Menu Item, kullanıcıyı farklı bir ekran ya da işlem sayfasına yönlendirebilir.
Otomatik Geçiş Davranışı: Menü başlıklarına tıklanıldığında alt menülerin açılması, tekrar tıklanıldığında kapanması Kuika platformu tarafından otomatik olarak sağlanır. Bu geçiş için ek bir yapılandırmaya gerek yoktur.
Dikey Dizilim (Alt Alta Kolon Gibi Görüntüleme)
Menü Yönünü Ayarlayın: Menu elementinin Direction parametresini Vertical olarak ayarlayın. Bu sayede hem ana menü başlıkları hem de alt menü öğeleri dikey hiyerarşiyle alt alta yerleştirilir.
Kolon Yapısı: Alt menü öğeleri, bağlı oldukları başlığın hemen altında kolon görünümünde listelenir. Bu yapı, özellikle sol kenar menülerde kullanıldığında kullanıcıya klasör benzeri bir navigasyon deneyimi sunar.
Responsive Uyum: Menü yapısı ekran genişliğine göre uyumlu (responsive) şekilde çalışır. Mobil cihazlarda alt menüler daraltılabilir yapıda gösterilirken, geniş ekranlarda açık ya da sabit halde sunulabilir.
Menü Daraltma (Collapse) ve Genişletme
Menü elementinde Collapsed özelliği aktifleştirildiğinde, menü daraltılmış görünümde yalnızca ikonlar ya da öğelerin baş harflerini gösterir.
Kullanıcı daraltılmış menüde bir ikona tıkladığında menü genişleyerek alt menüleri görünür hale getirir.
Kullanım Senaryosu Örneği
Örneğin:
“Ürünler” adında bir Sub Menu oluşturabilirsiniz.
Bu başlık altına + Menu Item ile “Yeni Ürün Ekle”, “Ürün Listesi”, “Kategoriler” gibi alt başlıklar eklenebilir.
Kullanıcı “Ürünler”e tıkladığında bu alt başlıklar kolon şeklinde açılır. Başka bir başlığa geçildiğinde (örn. “Siparişler”), istenirse “Ürünler” alt başlıkları kapanacak şekilde davranış tanımlanabilir.
2.2. Elemente Eklenebilen Aksiyonlar (onChange)
Menu elementi, kullanıcı menüde farklı bir öğe seçtiğinde tetiklenen onChange olayı üzerinden aksiyonlarla ilişkilendirilebilir. Bu tetikleyici, navigasyon ve ekran bazlı akışların yönetilmesinde kullanılır.
onChange: Kullanıcı menüde farklı bir menü öğesine tıkladığında veya seçim değiştirdiğinde tetiklenir.
Menü seçimine bağlı olarak aksiyon çalıştırılabilir. Örneğin:
Seçilen menü öğesine göre farklı bir sayfaya yönlendirme
İlgili ekranın verilerini yeniden yükleme
Seçilen menü değerine göre filtreleme veya state güncelleme
onChange tetikleyicisi genellikle aşağıdaki senaryolarda kullanılır:
Sidebar veya üst menü üzerinden ekranlar arası geçiş
Menü seçimine bağlı içerik alanını dinamik olarak değiştirme
Kullanıcının aktif menü bilgisini global state veya değişkende tutma
Menu elementi üzerinde onClick gibi ayrı bir tetikleyici bulunmaz; kullanıcı etkileşimleri yalnızca onChange üzerinden yönetilir. Bu sayede menü seçimi, uygulama akışının merkezi bir kontrol noktası olarak kullanılabilir.
3. Menu Elementi Nasıl Kullanılır?
Web Uygulama Örneği
Bu bölümde Menu elementinin uçtan uca kullanımını örnek senaryolar üzerinden ele alacağız.
Senaryo: Footer Menü Yapısı
Bir iş yönetimi veya muhasebe uygulamasında, kullanıcıların uygulama içerisinde temel sayfalara hızlıca erişebilmesi için footer alanında konumlandırılmış bir menü yapısı kullanılır. Bu menü, uygulamanın ana işlevlerini sade ve erişilebilir bir şekilde sunarak kullanıcı deneyimini destekler.
Footer menüsü içerisinde yer alan her bir menü öğesi, kullanıcıyı ilgili sayfaya yönlendirecek şekilde yapılandırılmıştır. Kullanıcı, footer alanı üzerinden fatura listesi, yeni fatura oluşturma ve raporlama gibi temel ekranlara tek dokunuşla erişebilir.
Senaryoda:
Footer menüsü, uygulamanın alt bölümünde sabit olarak konumlandırılır.
Menü içerisinde ana sayfalara yönlendiren ikon ve metinler birlikte kullanılır.
Her bir menü öğesi, ilgili sayfaya yönlendirme aksiyonu ile ilişkilendirilir.
Bu yapı sayesinde kullanıcı, uygulama içerisinde hızlı ve pratik bir şekilde sayfalar arasında geçiş yapabilir.
Adım 1 - Sayfaları Oluşturma
UI Design modülünü açın:
Sol yan panelde Screens bölümünden “AnaSayfa”, “FaturaListesi“ ve “OdenmemisFaturalar” adında yeni sayfalar oluşturun.
Örneğin, Ana Sayfa için sayfayı aşağıdaki şekilde oluşturabilirsiniz.
Ana Sayfa için sayfayı oluşturduktan sonra, sağ yan panelde yer alan “Role” alanını Page > Properties >Role > Starting Screen olarak ayarlayın.
Kalan “FaturaListesi“ ve “OdenmemisFaturalar” sayfalarında Role tanımlaması yapmanıza gerek yoktur. Adım 1.2.’ ye benzer şekilde sayfaları oluşturmanız yeterlidir.
Adım 2 - Ana Sayfa Element Ekleme
Sol yan panelden Elements > Container > Footer elementine tıklayın. Elements sayfaya otomatik olarak eklenecektir.
Footer içerisine Elements > Navigation > Menu elementini sürükleyip bırakın.
Menüyü yatay hizalamak için Menu > Properties > Direction > Horizontal olarak ayarlayın.
Footer içerisinde Menu elementi yatay hizada kullanıldığı için Collapsed (menü öğelerinin yalnızca ilk harfinin görünmesi) ve Collapsible (menüyü genişletme/daraltma butonu) ayarlarının aktif edilmesine gerek yoktur.
Menu elementine tıklayın. Sol yan panelde Menu > Properties alanına giderek Menu Item’lara sırasıyla tıklayın ve yukarı ok butonunu kullanarak menü öğelerini en üste taşıyın.
Veri tipi varsayılan olarak Static şekilde gelir. Mevcut senaryoda, işleyişin daha iyi anlaşılabilmesi amacıyla Static kullanım tercih edilmiştir. İhtiyaca bağlı olarak Dynamic seçeneği de kullanılabilir.
Beklenen sıralama aşağıdaki gibidir.
En altta yer alan Sub Menu’nün yanındaki silme butonunu kullanarak kaldırın.
İlk Menu Item’ a tıklayın. MenuItem > Label > “Ana Sayfa” yazısını ekleyin.
Ana Sayfa sembol gösterimi için MenuItem > Icon > home ikonunu seçin.
Düzenleme sonrasında ilk Menu Item aşağıdaki gibi görünmelidir.
İkinci Menu Item’ a tıklayın. MenuItem > Label > “Fatura Listesi” yazısını ekleyin.
Fatura Listesi sembol gösterimi için MenuItem > Icon > list ikonunu seçin.
Navigate aksiyonu içerisindeki To Screen alanında OdenmemisFaturalar sayfasını seçin.
Son kalan Gecikmiş Ödemeler Menu Item’ı alt menü kullanımına örnek olması amacıyla eklenmiştir. Herhangi bir ayarlama yapılmasına gerek yoktur.
Adım 4 - Ana Sayfadaki Aksiyonları Diğer Sayfalara Kopyalama
Ana Sayfa içerisindeki Menu elementine tıklayın. Açılan seçenekler arasından üçüncü seçenek olan “Kopyala”ya tıklayın.
Sol yan Screens panelinden oluşturduğunuz FaturaListesi sayfasına gidin.
Sayfaya Elements > Container > Footer elementini ekleyin.
Footer elementine tıklayın. Açılan seçenekler arasından üçüncü seçenek olan “Yapıştır”a basın.
Eklenen Menu elementi için, Adım 2’de uygulanan işlemleri sırasıyla FaturaListesi sayfası içerisinde de uygulayın. Tüm adımlar aynı olacaktır.
Son olarak, Adım 3’te yer alan işlemleri OdenmemisFaturalar sayfası içerisinde uygulayın.
Preview
Uygulama test edildiğinde, Ana Sayfa ve Fatura Listesi sayfalarında yer alan Fatura Durumları menü öğesi, ilgili sayfalar için ortak bir alt menü yapısı olarak kullanılır. Bu menüye tıklandığında Ödenmemiş Faturalar ve Gecikmiş Ödemeler alt menüleri görüntülenir ve her biri kendi sayfasına yönlendirme sağlar.
Kullanıcı, seçtiği alt menü öğesine tıkladığında ilgili fatura durumuna ait sayfaya yönlendirilir ve yalnızca seçilen duruma ait faturaları görüntüler. Bu yapı sayesinde kullanıcı, farklı sayfalardan fatura durumlarına hızlı ve tutarlı bir şekilde erişebilir.
Mobil Uygulama Örneği
Bu bölümde Menu elementinin uçtan uca kullanımını örnek senaryolar üzerinden ele alacağız.
Senaryo: Footer Menü Yapısı
Bir iş yönetimi veya muhasebe uygulamasında, kullanıcıların uygulama içerisinde temel sayfalara hızlıca erişebilmesi için footer alanında konumlandırılmış bir menü yapısı kullanılır. Bu menü, uygulamanın ana işlevlerini sade ve erişilebilir bir şekilde sunarak kullanıcı deneyimini destekler.
Footer menüsü içerisinde yer alan her bir menü öğesi, kullanıcıyı ilgili sayfaya yönlendirecek şekilde yapılandırılmıştır. Kullanıcı, footer alanı üzerinden fatura listesi, yeni fatura oluşturma ve raporlama gibi temel ekranlara tek dokunuşla erişebilir.
Senaryoda:
Footer menüsü, uygulamanın alt bölümünde sabit olarak konumlandırılır.
Menü içerisinde ana sayfalara yönlendiren ikon ve metinler birlikte kullanılır.
Her bir menü öğesi, ilgili sayfaya yönlendirme aksiyonu ile ilişkilendirilir.
Bu yapı sayesinde kullanıcı, uygulama içerisinde hızlı ve pratik bir şekilde sayfalar arasında geçiş yapabilir.
Adım 1 - Dinamik Kullanım İçin Aksiyon Oluşturma
DataSources modülünü açın:
Yeni SQL Action ekleye tıklayın.
Açılan editörde aşağıdaki SQL kodunu ekleyin ve oluşturulan aksiyona PageNavigationHierarchy adını verin.
DECLARE @AnaSayfaId UNIQUEIDENTIFIER = NEWID();
DECLARE @FaturaListesiId UNIQUEIDENTIFIER = NEWID();
DECLARE @FaturaDurumları UNIQUEIDENTIFIER = NEWID();
DECLARE @OdenmemisFaturalar UNIQUEIDENTIFIER = NEWID();
SELECT @AnaSayfaId AS Id, NULL AS ParentId, N'Ana Sayfa' AS PageName, 'home' AS IconName, 'HomePage' AS LinkName, 1 AS OrderNo
UNION ALL
SELECT @FaturaListesiId, NULL, N'Fatura Listesi', 'list', 'FaturaListesi', 2UNION ALL
SELECT @FaturaDurumları, NULL, N'Fatura Durumları', 'expand_less', '', 3UNION ALL
SELECT @OdenmemisFaturalar, @FaturaDurumları ,N'Odenmemiş Faturalar', 'paid', 'OdenmemisFaturalar', 4
Adım 2 - Sayfaları Oluşturma
UI Design modülünü açın:
Sol yan panelde Screens bölümünden “FaturaListesi“ ve “OdenmemisFaturalar” adında yeni sayfalar oluşturun.
Örneğin, Fatura Listesi için sayfayı aşağıdaki şekilde oluşturabilirsiniz.
Sol yan panelden Elements > Container > Footer elementine tıklayın. Elements sayfaya otomatik olarak eklenecektir.
Footer içerisine Elements > Navigation > Menu elementini sürükleyip bırakın.
Menü veri türünü, web platformda Select a Data Type > Dynamic olarak seçin.
Menüyü yatay hizalamak için Menu > Properties > Direction > Horizontal olarak ayarlayın.
Sayfa adları ve diğer detayları için Menu > Properties > Options > Action > PageNavigationHierarchy aksiyonunu tanımlayın. Alanlara gerekli tanımlamayı aşağıdaki gibi uygulayın.
Adım 4 - Ana Sayfadaki Aksiyonları Diğer Sayfalara Kopyalama
Ana Sayfa içerisindeki Menu elementine tıklayın. Açılan seçenekler arasından üçüncü seçenek olan “Kopyala”ya tıklayın.
Sol yan Screens panelinden oluşturduğunuz FaturaListesi sayfasına gidin.
Sayfaya Elements > Container > Footer elementini ekleyin.
Footer elementine tıklayın. Açılan seçenekler arasından üçüncü seçenek olan “Yapıştır”a basın.
Preview
Uygulama test edildiğinde, Ana Sayfa ve Fatura Listesi sayfalarında yer alan Fatura Durumları menü öğesi, ilgili sayfalar için ortak bir alt menü yapısı olarak kullanılır. Bu menüye tıklandığında Ödenmemiş Faturalar ve Gecikmiş Ödemeler alt menüleri görüntülenir ve her biri kendi sayfasına yönlendirme sağlar.
Kullanıcı, seçtiği alt menü öğesine tıkladığında ilgili fatura durumuna ait sayfaya yönlendirilir ve yalnızca seçilen duruma ait faturaları görüntüler. Bu yapı sayesinde kullanıcı, farklı sayfalardan fatura durumlarına hızlı ve tutarlı bir şekilde erişebilir.
4. Ortak Özellikler (Properties)
Menu elementi üzerinde yer alan bazı alanlar tüm UI elementlerinde ortak olarak kullanılır. Bu nedenle, aşağıdaki özelliklerin detaylı açıklamaları ilgili genel kılavuz sayfalarında yer almaktadır:
Menü yapısını sade ve hiyerarşik tasarlayın. Çok fazla menü ve alt menü kullanmak, kullanıcıların aradıkları içeriğe ulaşmasını zorlaştırabilir.
Menü başlıklarını kısa ve anlaşılır tutun. Kullanıcı, menüye baktığında hangi ekrana gideceğini net şekilde anlayabilmelidir.
onChange tetikleyicisini kontrollü kullanın. Menü değiştiğinde gereksiz aksiyonlar veya tekrar eden veri çağrıları çalıştırmak performansı olumsuz etkileyebilir.
Mobil kullanım için menü düzenini test edin. Mobilde uzun menüler veya çok fazla alt seviye, erişilebilirliği azaltabilir.
Menü öğelerini yetkilendirme (Authorization) kurallarıyla birlikte kullanarak, kullanıcıların yalnızca erişim izni olan ekranları görmesini sağlayın.
6. Kısıtlamalar
Menu elementi, kendi içinde veri listeleme veya filtreleme işlemi yapmaz; yalnızca navigasyon ve seçim amacıyla kullanılır.
Menü öğeleri üzerinde ayrı ayrı aksiyon tanımlanamaz. Tüm kullanıcı etkileşimleri onChange olayı üzerinden yönetilir.
