Drawer — nedir, DrawerLayout ve uygulamalarda yan menü

Drawer Nedir?

Drawer (Navigation Drawer), kaydırma hareketi veya hamburger simgesine (üç yatay çizgi) dokunarak ekranın sol kenarından kayan panel şeklinde bir navigasyon öğesidir. Drawer, navigasyon bağlantılarını, bir başlığı ve isteğe bağlı öğeleri içerir: kullanıcı avatarı, bildirim rozetleri, ayırıcılar. Panel, içeriği kaplayabilir (Modal) veya kaydırabilir (Standard).

Material Design 3 (2026), Navigation Drawer'ı 6+ navigasyon öğesi olan uygulamalar için bir bileşen olarak tanımlar. Bottom Navigation'ın aksine, Drawer ekranda kalıcı yer kaplamaz ve yalnızca kullanıcı isteği üzerine gösterilir. Bu, içerik için yer açar ancak açmak için ek bir işlem gerektirir. Google, derin bölüm hiyerarşisine sahip uygulamalar için Drawer'ı önerir.

UX Planet araştırması (2025) şunu gösterdi: Drawer, 5–15 bölümlü uygulamalar için uygundur, ancak navigasyon süresi Bottom Navigation'dan %40 daha yüksektir. Kullanıcılar ekran kıvrımının (kaydırma) altındaki menü öğelerini kaçırır. Bu nedenle önemli bölümler Drawer'ın üst kısmında, daha az önemli olanlar (Uygulama Hakkında, Ayarlar) ise bir ayırıcıyla ayrılarak alt kısımda olmalıdır.

Drawer Türleri: Modal ve Standard

Modal Drawer içeriğin üzerine kayar, arka planı karartır. Ekran genişliğinin sınırlı olduğu mobil cihazlarda kullanılır. Bir öğe seçtikten sonra Drawer otomatik olarak kapanır. Standard Drawer (Permanent) her zaman görünür, içeriği kaydıran sabit bir paneldir. 900 dp'den itibaren ekran genişliğine sahip tabletlerde ve masaüstünde kullanılır. Material 3 ayrıca Rail Drawer'ı tanımlar — yalnızca simgeleri gösteren tabletler için kompakt bir sürüm.

Android'de DrawerLayout

DrawerLayout, kayan yan menüyü uygulayan Android'deki standart ViewGroup'tur. DrawerLayout iki alt öğe içerir: birincisi — ana içerik (NavHostFragment ile FrameLayout), ikincisi — menülü NavigationView. DrawerLayout, kaydırma hareketlerini ve ActionBarDrawerToggle aracılığıyla programlı açma/kapamayı işler.

// DrawerLayout ve NavigationView ile Aktivite
class MainActivity : AppCompatActivity() {

    private lateinit var binding: ActivityMainBinding
    private lateinit var drawerLayout: DrawerLayout

    override fun onCreate(savedInstanceState: Bundle?) {
        super.onCreate(savedInstanceState)
        binding = ActivityMainBinding.inflate(layoutInflater)
        setContentView(binding.root)

        drawerLayout = binding.drawerLayout
        val navView = binding.navView
        val navController = findNavController(R.id.nav_host_fragment)

        // Drawer'ı Navigation Component'e bağlama
        NavigationUI.setupActionBarWithNavController(
            this, navController, drawerLayout
        )
        NavigationUI.setupWithNavController(navView, navController)
    }

    override fun onSupportNavigateUp(): Boolean {
        return NavigationUI.navigateUp(
            findNavController(R.id.nav_host_fragment),
            drawerLayout
        )
    }
}

// XML: activity_main.xml
// <androidx.drawerlayout.widget.DrawerLayout
//   android:id="@+id/drawerLayout"
//   ...>
//   <!-- Ana içerik -->
//   <FrameLayout android:id="@+id/nav_host_fragment"
//     android:layout_width="match_parent"
//     android:layout_height="match_parent" />
//   <!-- Navigation Drawer -->
//   <com.google.android.material.navigation.NavigationView
//     android:id="@+id/navView"
//     android:layout_width="wrap_content"
//     android:layout_height="match_parent"
//     android:layout_gravity="start"
//     app:menu="@menu/nav_menu" />
// </androidx.drawerlayout.widget.DrawerLayout>

NavigationView, Drawer içeriği için bir Material Design bileşenidir. Başlığı (headerLayout), menü öğelerini (menu), alt başlıkları, onay kutularını ve anahtarları destekler. app:menu özniteliği, navigasyon öğeleri içeren bir XML menüsünü işaret eder. NavigationUI otomatik olarak aktif öğeyi vurgular ve durumu NavController ile senkronize eder.

iOS'ta Yan Menü

iOS'ta yerleşik bir "Drawer" bileşeni yoktur — Apple, iPhone için yan menü önermez (HIG, 2026). Ancak iPad için birincil ve ikincil panelli UISplitViewController kullanılır. iPhone için yan menü, üçüncü taraf kütüphaneler (SideMenu, SwiftUI-side-menu) veya içerik ofsetli özel çözümler aracılığıyla uygulanır. SwiftUI'de, ofset animasyonlu ZStack aracılığıyla bir yan menü oluşturulur.

import SwiftUI

struct DrawerView<Content: View, Menu: View>: View {
    let menuWidth: CGFloat = 280

    @Binding var isOpen: Bool
    @ViewBuilder let content: Content
    @ViewBuilder let menu: Menu

    var body: some View {
        ZStack(alignment: .leading) {
            content
                .offset(x: isOpen ? menuWidth : 0)
                .animation(.easeInOut, value: isOpen)

            if isOpen {
                menu
                    .frame(width: menuWidth)
                    .transition(.move(edge: .leading))

                Color.black.opacity(0.3)
                    .ignoresSafeArea()
                    .onTapGesture { isOpen = false }
            }
        }
    }
}

// Kullanım
struct ContentView: View {
    @State private var showDrawer = false

    var body: some View {
        DrawerView(isOpen: $showDrawer) {
            NavigationStack {
                HomeView()
                    .toolbar {
                        ToolbarItem(placement: .navigationBarLeading) {
                            Button(action: { showDrawer.toggle() }) {
                                Image(systemName: "line.horizontal.3")
                            }
                        }
                    }
            }
        } menu: {
            DrawerMenuView()
        }
    }
}

Üretim iOS projeleri için genellikle SideMenu kütüphanesi kullanılır (GitHub, 8k+ yıldız). Jest desteği, arka plan bulanıklığı, özel genişlik ve animasyonlarla hazır bir UIViewController sağlar. SideMenu, sol ve sağ menüleri, birden çok seviyeyi ve UINavigationController aracılığıyla UIKit entegrasyonunu destekler. Bir alternatif, iPad'de UISplitViewController'dır (sistem, özel animasyonlar olmadan).

Drawer Özelleştirme: başlık, simgeler, bölümler

Drawer kapsamlı özelleştirmeye izin verir. Android'de NavigationView, headerLayout'u destekler — menü öğelerinin üzerine yerleştirilen özel bir düzen. Avatar, kullanıcı adı, e-posta ve kapak resmi içerebilir. Menü öğeleri, alt başlıklar, ayırıcılar ve anahtarlarla <menu> aracılığıyla gruplandırılır. iOS'ta SideMenu özelleştirmesi, arka plan rengi, bulanıklık, genişlik ve köşe yarıçapı ayarını içerir.

// NavigationView için özel başlık
val headerView = binding.navView.inflateHeaderView(R.layout.nav_header)
headerView.findViewById<ImageView>(R.id.iv_avatar)
    .setImageResource(R.drawable.avatar)
headerView.findViewById<TextView>(R.id.tv_name)
    .text = "John Doe"

// Menü öğelerini yapılandırma
val menuItem = binding.navView.menu.findItem(R.id.nav_notifications)
menuItem.isChecked = true

// Rozet ekleme
val badge = binding.navView.getOrCreateBadge(R.id.nav_notifications)
badge.number = 15
badge.isVisible = true

Material Design aşağıdaki Drawer yapısını önerir: başlık (isim, avatar), ana navigasyon öğeleri (5–8), ayırıcı, ikincil öğeler (Ayarlar, Yardım), altbilgi (Uygulama Hakkında, sürüm). Material 3'te NavigationView ayrıca itemShape ve itemBackground aracılığıyla özel aktif öğe vurgulamayı da destekler.

Drawer Ne Zaman Kullanılır: UX Önerileri

Drawer, 6+ bölüm, ayar ve yardım sayfası olan uygulamalar için etkilidir. Bölümlere hızlı erişimin kritik olduğu uygulamalar için uygun değildir — bu durumlarda Bottom Navigation daha iyidir. Material Design, Drawer'ı Bottom Navigation ile birleştirmeyi önerir: ana navigasyon — Bottom (3–5 sekme), ek — Drawer (ayarlar, yardım, uygulama hakkında).

Drawer uygularken yaygın hatalar: aşırı yüklenmiş menü (gruplama olmadan 15+ öğe), önemli bölümleri kıvrımın altında gizleme, simge eksikliği (simgesiz metin %30 daha yavaş taranır), gecikmeli animasyon (≤ 200 ms olmalıdır). En iyi uygulamalar: kullanıcı adıyla başlık, her öğe için simgeler, gruplar arasında ayırıcılar, aktif bölüm vurgulama, açmak için kaydırma hareketi desteği.

• 6+ bölüm — Drawer haklı, daha az — Bottom Navigation kullanın
• Simgeler — her öğe için zorunlu, görsel aramayı hızlandırır
• Gruplama — ana ve ikincil öğeler arasında ayırıcılar
• Başlık — kişiselleştirme için avatar, isim ve e-posta (sosyal uygulamalar)
• Kaydırma hareketi — açmak için zorunlu, hamburger düğmesiyle kopyalanır