Breadcrumb elementi, kullanıcıların uygulama içinde bulundukları konumu görsel ve hiyerarşik olarak takip etmesini sağlar. Bu sayede kullanıcılar, önceki sayfalara hızla dönebilir ve menü yapısı içinde kaybolmadan gezinebilir.

Kullanım Alanları:

• E-ticaret uygulamalarında Kategori → Alt Kategori → Ürün Detayı ekranlarının gösterimi,
• Yönetim panellerinde Dashboard → Kullanıcı Yönetimi → Kullanıcı Detayı,
• Doküman yönetim sistemlerinde Ana Sayfa → Belgeler → Raporlar → 2025-Q1.

Breadcrumb elementi yalnızca web uygulamalarında desteklenmektedir.

Veri Kaynağı Bağlama

1. Datasources Modülü

• Datasources modülüne gidin. 
• Tables başlığı yanındaki + ikonuna tıklayın.
• Tabloya BreadcrumbData adını verin.

3. SQL Actions

SQL Actions bölümünden BreadcrumbData adında aksiyon oluşturun.

SELECT 1 AS Id, 'Elektronik' AS Label, '/electronics' AS PathBreadcrumb, 0 AS IsActiveUNION ALLSELECT 2, 'Telefonlar', '/electronics/phones', 0UNION ALLSELECT 3, 'iPhone 15', '/electronics/phones/iphone15', 1

Bu yapı, kullanıcının şu anda iPhone 15 Detay ekranında olduğunu gösterir.

UI Design Modülü İşlemleri

1. UI Design modülüne gidin.
2. Sol kenardaki Elements > Navigation kategorisinden Breadcrumb elementini ekleyin.
3. Properties panelinde:
   
   • Options→ BreadcrumbData aksiyonunu seçin.

• Active Item Color → #007BFF (örnek mavi)

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

Options

• Açıklama: Breadcrumb zincirinde gösterilecek menü öğelerini tanımlar.
• Nasıl Kullanılır: BreadcrumbData SQL aksiyonu seçilir. Bu aksiyondaki her satır, zincirdeki bir adımı temsil eder.
• Örnek:
  
  • Elektronik
  • Telefonlar
  • iPhone 15

Active Item Color

• Açıklama: Breadcrumb zincirinde aktif (mevcut sayfayı gösteren) öğenin rengini belirler.
• Nasıl Kullanılır: Properties panelinden bir renk kodu seçilir.
• Örnek: #007BFF rengi seçildiğinde, “iPhone 15” aktif olduğu için mavi renkte görünür.

Senaryo Tamamlandığında

• Kullanıcı ekranın üst kısmında Elektronik > Telefonlar > iPhone 15 breadcrumb zincirini görür.
• "Elektronik" veya "Telefonlar" adımlarına tıklayarak üst seviyelere geri dönebilir.
• "iPhone 15" aktif olduğu için vurgulu renkte görünür.

Kısıtlamalar

• Breadcrumb sadece web uygulamalarında kullanılabilir.
• SQL veri kaynağında hiyerarşi sırası doğru oluşturulmazsa zincir hatalı görüntülenir.

İpuçları ve Best Practices

Breadcrumb tablosunda Id sıralamasına göre ORDER BY ekleyin ki hiyerarşi yanlış görünmesin.

• Uzun etiketlerde kullanıcı deneyimi için kısa ve anlaşılır isimler kullanın.
• Temada uyum için Active Item Color uygulamanın renk paletiyle uyumlu olmalıdır.