Breadcrumb Navigasyon Demosu¶
Canlı Breadcrumb Demosu¶
Aşağıda breadcrumb navigasyonunun farklı iç içe geçme seviyelerinde nasıl görüneceğini görebilirsiniz:
Seviye 1 Navigasyon¶
Seviye 3 Navigasyon (Orta Yol)¶
Seviye 5 Navigasyon (Uzun Yol - Kaydırmayı Gösterir)¶
Gösterilen Özellikler¶
Responsive Davranış¶
- Masaüstü: Hover efektleri ve yumuşak animasyonlarla tam breadcrumb yolları
- Tablet: Okunabilirliği koruyarak hafif sıkıştırılmış breadcrumb'lar
- Mobil: Gerektiğinde yatay kaydırma ile kompakt breadcrumb'lar
Görsel Göstergeler¶
- Geçiş Göstergeleri: İçeriğin kaydırılabilir olduğunu gösterir (pencerenizi yeniden boyutlandırmayı deneyin)
- Hover Efektleri: Etkileşimli bağlantı animasyonları ve alt çizgi efektleri
- Metin Kısaltma: Alan sınırlı olduğunda uzun sayfa başlıkları üç nokta ile kısaltılır
Erişilebilirlik Özellikleri¶
- Schema.org: Daha iyi SEO ve makine okunabilirliği için yapılandırılmış veri
- Klavye Navigasyonu: Tam klavye erişilebilirlik desteği
- Odak Yönetimi: Net odak göstergeleri ve mantıklı sekme sırası
Teknik Uygulama¶
Breadcrumb sistemi otomatik olarak:
- Navigasyon yolu uzun olduğunda mevcut sayfayı göstermek için kayar
- Kaydırılabilir içerik için gradyan göstergeleri görüntüler
- Uzun sayfa başlıklarını üç nokta ile kısaltır
- Uygun ARIA etiketleri ve yapılandırılmış veri ile erişilebilirliği korur
- Tepkisel (Responsive) tasarımla farklı ekran boyutlarına adapte olur
Test Talimatları¶
- Pencereyi Yeniden Boyutlandır: Yatay kaydırmayı çalışır halde görmek için tarayıcı pencerenizi daraltın
- Hover Efektleri: Etkileşimli animasyonları görmek için breadcrumb bağlantılarının üzerine gelmeyi deneyin
- Mobil Görünüm: Mobil davranışı test etmek için tepkisel (responsive) tasarım modunu kullanın
- Erişilebilirlik: Klavye erişilebilirliğini test etmek için sekme navigasyonunu kullanın
Breadcrumb bileşeni otomatik olarak oluşturulur ve manuel yapılandırma gerektirmez.