Header elementi, bir uygulama ekranının en üst bölümünde yer alarak kullanıcıya sayfanın amacı, başlığı ve önemli aksiyon noktalarını sunan yapısal bir arayüz elementidir. Genellikle logo, başlık, menü butonları, arama alanı, bildirim ikonları veya kullanıcıya özel hızlı erişim butonları gibi önemli unsurlar bu alan içinde konumlandırılır. Dikey hiyerarşi sağlaması sayesinde kullanıcı, bulunduğu sayfayı kolayca tanımlar ve ihtiyaç duyduğu üst seviye navigasyon seçeneklerine hızla ulaşır.
Header aynı zamanda uygulamanın genel görünümünün bütünlüğünü sağlar; marka kimliği, renk yapısı ve tipografi öğeleri bu bölgede güçlü şekilde vurgulanabilir. Mobil ve web ekranlarda responsive olarak çalışır ve farklı cihaz boyutlarına uyum sağlar.
Header elementi, hem web hem de mobil uygulamalarda desteklenmektedir.
Logo veya marka kimliğini vurgulamak. Uygulamanın şirket logosu ya da proje ismi Header içinde konumlandırılabilir.
Üst seviye navigasyon sunmak. Menü ikonları, hamburger menu, geri butonu, anasayfa butonu gibi navigasyon öğeleri için idealdir.
Kullanıcı işlemlerine hızlı erişim sağlamak. Bildirimler, profil menüsü, ayarlar, yardım gibi erişim noktaları Header üzerinde yer alabilir.
Arama çubuğu eklemek. Özellikle içerik yoğun uygulamalarda arama alanı Header içinde kullanılarak yer tasarrufu sağlanır.
Aksiyon butonları yerleştirmek. “Kaydet”, “Ekle”, “Filtre”, “Düzenle” gibi işlemler doğrudan Header’dan tetiklenebilir.
Mobil uygulamalarda sabit üst menü oluşturmak. Geri dönüş butonu ve hızlı aksiyon butonları (Add, Search, QR Scan vb.) için uygundur.
Sayfa genelinde hiyerarşi ve düzen sağlamak. Kullanıcıya nerede olduğunu hissettiren, temiz ve tutarlı bir görsel yapı sunar.
2. Temel Özellikler
Sayfanın en üst kısmında sabit konumlama. Header, ekranın üst bölgesine yerleşir ve kullanıcı sayfayı kaydırsa bile üst yapıyı koruyabilir. Bu, özellikle mobil uygulamalarda hızlı gezinme sağlar.
Esnek içerik alanı. Logo, başlık, buton, ikon, arama çubuğu, metin veya özel UI elementleri Header içerisine yerleştirilebilir.
Düzenli hiyerarşi oluşturma. Header, sayfa mimarisini belirginleştirir ve ekran başlığını diğer içeriklerden ayırarak kullanıcı deneyimini iyileştirir.
Tam özelleştirilebilir görünüm. Arka plan rengi, yazı rengi, tipografi, yükseklik, hizalama ve boşluk yönetimi gibi tüm görsel ayarlar esnek şekilde düzenlenebilir.
Aksiyon butonları ile fonksiyonel kullanım. Header içerisinde yer alan butonlara eklenen aksiyonlarla, kullanıcıya hızlı işlem imkânı sağlanır (ör. “New”, “Save”, “Back”).
Responsive yapı desteği. Hem web hem de mobil ekran boyutlarına göre otomatik uyum sağlar.
Navigasyon kolaylığı sağlama. Menü ikonları, geri dönüş butonu veya uygulama genel navigasyon butonları Header içinde kolayca konumlandırılabilir.
2.1. Element Ayarları (Properties)
Header elementi, bir düzen (layout) bileşeni olarak çalıştığı için kendi özel Properties paneline sahip değildir. Header; içerisine eklenen diğer UI elementleriyle şekillenen bir üst bölüm alanıdır.
Bu nedenle:
Header’ın kendi başına değiştirilebilir bir özelliği yoktur.
Arka plan rengi, yazı rengi, hizalama veya boşluk (padding/margin) gibi görsel ayarlar Header içine eklenen Text, Icon veya Button elementleri üzerinden kontrol edilir.
Header’ın genel yapısı; içine eklenen elementlerin düzeni, sırası, hizalaması ve özellikleriyle oluşturulur.
Header bir kapsayıcı (container) gibi davranır ve tüm stil/düzenlemeleri çocuk elementleri üzerinden yönetilir.
Header’ın bağımsız Properties ayarı bulunmaz; tüm yapılandırmalar içine yerleştirilen UI elementleri aracılığıyla yapılır.
2.2 Elemente Eklenebilen Aksiyonlar
Header elementi bir düzen (layout) bileşeni olduğu için kendi üzerinden aksiyon (ADD ACTION) ekleme desteği bulunmaz.
Header seçildiğinde aksiyon paneli görüntülenmez ve Header’a doğrudan bir tetikleyici atanamaz.
Bu nedenle:
Header’ın kendisine aksiyon atanamaz.
Kullanıcı etkileşimlerini yönetmek için Header içine eklenen Button, Icon, Text gibi elementlere aksiyon eklenir.
Navigasyon, kayıt işlemleri, modal açma gibi tüm davranışlar Header içindeki elementler aracılığıyla tetiklenir.
Header yalnızca kapsayıcı bir üst bölüm olarak işlev görür; fonksiyonellik çocuk elementler üzerinden sağlanır.
Header’a aksiyon eklenemez; tüm işlevsel davranışlar Header içine yerleştirilen elementlerin aksiyonlarıyla yönetilir.
3. Header Elementi Nasıl Kullanılır?
Bu bölümde Header elementinin uçtan uca kullanımını örnek senaryolar üzerinden ele alacağız.
Senaryo: Header Navigasyon Alanı Bir uygulamada kullanıcılar, platform içinde gezinirken üst menüde yer alan Header alanını kullanır. Header elementi, uygulamanın temel navigasyon öğelerine hızlı erişim sağlayan yapıyı sunar.
Senaryoda:
Kullanıcı, sol taraftaki logo üzerinden ana sayfaya dönebilir.
Grid (menü) ikonu ile uygulama içi sayfa veya modüllere hızlı erişim sağlayabilir.
Orta bölümdeki arama alanını kullanarak içerikler arasında filtreleme veya arama yapabilir.
Sağ taraftaki profil ikonu üzerinden kullanıcı hesabı ekranına erişilebilir.
Sepet ikonu ile satın alma veya ödeme süreçlerine yönlendirme yapılabilir.
Adım 1 - Element Ekleme ve Stil Düzenleme
Başlangıçta anasayfada:
UI Design modülünü açın.
Sol yan panelden Elements > Container > Header elementini sayfaya sürükleyip bırakın. Tıklandığında da otomatik olarak eklenecektir.
Header içerisine Elements > Container > Row elementini sürükleyip bırakın.
Row içerisinde Row > Properties > Desktop alanında 3 sütunu seçin.
Row > Properties > Customize alanında sütun boyutlarını aşağıdaki gibi çift çizgiyi sağa doğru sürükleyerek ayarlayın.
İlk sütun içerisine Elements > Container > HorizontalStack elementini sürükleyip bırakın.
Horizontal Stack içerisinde Styling > Layout > Align dikeyde ortalayın. Not: Horizontal Stack yatayda ortalama uygulamanıza izin vermez.
Horizontal Stack içerisine Elements > Display > Image elementini ekleyin.
Image yanına Elements > Display > Icon elementini ekleyin.
Ortadaki sütunu Col >Styling > Layout > Align alanından dikeyde ve yatayda ortalayın.
Ortadaki sütun içerisine de Elements > Container > Horizontal Stack elementini ekleyin.
Horizontal Stack içerisinde Styling > Layout > Align dikeyde ortalayın.
Horizontal Stack içerisine Elements > Text Input > TextInput elementini ekleyin.
Text Input element boyutunu TextInput > Styling > Layout > Width > 270 olarak ayarlayın.
Üçüncü sütunu Col >Styling > Layout > Align alanından dikeyde ortalayın ve yatayda sağa hizalayın.
Sütun içerisine Elements > Container > Horizontal Stack elementini ekleyin ve Styling > Layout > Align dikeyde ortalayın.
Horizontal Stack içerisine iki tane Elements > Display > Icon elementlerini sürükleyip bırakın.
Adım 2 - Element Ayarlamalarının Yapılması
İlk sütun içerisindeki Horizontal Stack > Properties > Gap değerini 20 olarak ayarlayın.
Üçüncü sütun içerisindeki ikonlarda Icon > Properties > Icon alanlarına sırasıyla ‘account_circle’ ve ‘shopping_cart’ ikonlarını seçin.
Header tasarımınız UI üzerinde hazır durumdadır. Bu yapıyı diğer sayfalarda da kullanmak için, Row elementindeki üçüncü seçenek olan ‘Kopyala’ butonuna tıklayarak istediğiniz sayfaya aktarabilirsiniz.
Aktarmak istediğiniz sayfada Header alanına tıklayıp üçüncü seçenek ‘Yapıştır’ butonuna tıklayarak aynı tasarımı hızlıca çoğaltabilirsiniz.
Adım 3 - Uygulamaların Listelenmesi Aksiyonu (İsteğe Bağlı)
UI Design ekranında yan panelden Screens alanına ilerleyin ve yeni sayfa oluşturun.
Açılan ekranda sayfa adını ‘HeaderApps’ olarak tanımlayın.
Yeni sayfa içerisine Elements > Container > Row elementini ekleyin ve Row > Properties > Desktop alanından 2 pencereyi seçiniz.
Row > Styling > Layout > Align alanlarını sol sütun için sağ yönde, sağ sütun için sol yönde ve her iki sütunu dikeyde hizalayın.
Sütunlar içerisine Elements > Container > HorizontalStack elementini ekleyin.
Horizontal Stack içerisine Elements > Display > Image ve Elements > Display > Label elementleri sırasıyla sürükleyip bırakın.
Benzer şekilde sağ sütuna da Image ve Label elementlerini sürükleyip bırakınız.
Row alanını seçip ‘Çoğalt’ butonuna tıklayıp aynı yapıdan kolayca oluşturunuz.
Çoğaltma sonrası sayfa içeriği şu şekilde olmalıdır:
Image elementi içine eklemek istediğiniz görselleri, Image > Properties > Value > Uploaded Images yolunu izleyerek ‘Add Image’ seçeneği üzerinden, Adım 3.2’de gösterildiği şekilde yükleyebilirsiniz.
Label içerisindeki uygulama adlarını Genel Bakış, Projeler, Profil ve Ayarlar gibi adlandırmaları Label > Properties > Value içerisinden tanımlayabilirsiniz.
UI Design sayfasında Header’ın oluşturulduğu anasayfaya geri dönüş yapın ve Icon elementine tıklayın.
Son olarak Navigate aksiyonu içerisinde aşağıdaki tanımlamaları yapın.
Preview:
Uygulama test edildiğinde, Header elementi üzerinden arama yapılabilir ve ilgili sayfalara yönlendirme işlemleri gerçekleştirilebilir. Mevcut senaryoda, Kuika logosunun yanında yer alan ‘Apps’ alanına Header üzerinden doğrudan yönlendirme sağlanmaktadır.
4. Ortak Özellikler (Properties)
Header 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:
Header’ı sade ve anlamlı tutun. Fazla buton veya gereksiz içerik, kullanıcıda karışıklık yaratabilir.
Mobil cihazlarda Header yüksekliğini minimum tutun. Ekranın fazla kısmını kaplayan Header, mobil kullanıcı deneyimini bozar.
İkon + kısa metin kombinasyonunu değerlendirin. Navigasyon butonlarında ikonların anlaşılır olması önemlidir.
Header içindeki elementleri hizalarken tutarlılık sağlayın. Sol, orta veya sağ hizalı düzenlerden birini tercih edip tüm uygulamada aynı yaklaşımı kullanın.
Geri butonu gibi sık kullanılan aksiyonları Header’da konumlandırın. Kullanıcı akışını hızlandırır.
6. Kısıtlamalar
Header kendi başına Properties paneline sahip değildir. Görsel veya yapısal ayarlamalar sadece Header içine eklenen elementlerle yapılabilir.
Header’a aksiyon eklenemez. Tüm aksiyonlar içindeki butonlar veya ikonlar üzerinden tetiklenir.
