Drawer — यह क्या है, DrawerLayout और ऐप्स में साइड मेनू

Drawer क्या है?

Drawer (Navigation Drawer) एक नेविगेशन तत्व है जो पैनल के रूप में होता है जो स्वाइप जेस्चर या हैमबर्गर आइकन (तीन क्षैतिज रेखाएँ) पर टैप करके स्क्रीन के बाएँ किनारे से बाहर स्लाइड करता है। Drawer में नेविगेशन लिंक, हेडर और वैकल्पिक तत्व होते हैं: उपयोगकर्ता अवतार, सूचना बैज, विभाजक। पैनल कंटेंट को कवर कर सकता है (Modal) या शिफ्ट कर सकता है (Standard)।

Material Design 3 (2026) Navigation Drawer को 6+ नेविगेशन आइटम वाले ऐप्स के लिए एक घटक के रूप में परिभाषित करता है। Bottom Navigation के विपरीत, Drawer स्क्रीन पर स्थायी स्थान नहीं लेता है और केवल उपयोगकर्ता के अनुरोध पर दिखाया जाता है। यह कंटेंट के लिए स्थान खाली करता है लेकिन खोलने के लिए अतिरिक्त कार्रवाई की आवश्यकता होती है। Google गहरे सेक्शन पदानुक्रम वाले ऐप्स के लिए Drawer की सिफ़ारिश करता है।

UX Planet अनुसंधान (2025) ने दिखाया: Drawer 5–15 सेक्शन वाले ऐप्स के लिए उपयुक्त है, लेकिन नेविगेशन समय Bottom Navigation की तुलना में 40% अधिक है। उपयोगकर्ता स्क्रीन फ़ोल्ड (स्क्रॉल) के नीचे स्थित मेनू आइटम को खो देते हैं। इसलिए महत्वपूर्ण सेक्शन Drawer के शीर्ष पर होने चाहिए, और कम महत्वपूर्ण (ऐप के बारे में, सेटिंग्स) — नीचे, एक विभाजक द्वारा अलग किए गए।

Drawer के प्रकार: Modal और Standard

Modal Drawer कंटेंट के ऊपर स्लाइड करता है, पृष्ठभूमि को मंद करता है। मोबाइल उपकरणों के लिए उपयोग किया जाता है जहाँ स्क्रीन की चौड़ाई सीमित होती है। आइटम चुनने के बाद, Drawer स्वचालित रूप से बंद हो जाता है। Standard Drawer (Permanent) एक स्थिर पैनल है जो हमेशा दृश्यमान रहता है, कंटेंट को शिफ्ट करता है। 900 dp से स्क्रीन चौड़ाई वाले टैबलेट और डेस्कटॉप पर उपयोग किया जाता है। Material 3 Rail Drawer भी परिभाषित करता है — टैबलेट के लिए एक कॉम्पैक्ट संस्करण जो केवल आइकन दिखाता है।

Android में DrawerLayout

DrawerLayout Android में मानक ViewGroup है जो स्लाइडिंग साइड मेनू लागू करता है। DrawerLayout में दो चाइल्ड तत्व होते हैं: पहला — मुख्य कंटेंट (NavHostFragment के साथ FrameLayout), दूसरा — मेनू के साथ NavigationView। DrawerLayout ActionBarDrawerToggle के माध्यम से स्वाइप जेस्चर और प्रोग्रामेटिक ओपन/क्लोज़ को संभालता है।

// DrawerLayout और NavigationView के साथ गतिविधि
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 से जोड़ना
        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"
//   ...>
//   <!-- मुख्य सामग्री -->
//   <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 कंटेंट के लिए Material Design घटक है। यह हेडर (headerLayout), मेनू आइटम (menu), उपशीर्षक, चेकबॉक्स और स्विच का समर्थन करता है। app:menu विशेषता नेविगेशन आइटम के साथ XML मेनू को इंगित करती है। NavigationUI स्वचालित रूप से सक्रिय आइटम को हाइलाइट करता है और NavController के साथ स्थिति को सिंक्रनाइज़ करता है।

iOS में साइड मेनू

iOS में कोई अंतर्निहित "Drawer" घटक नहीं है — Apple iPhone के लिए साइड मेनू की अनुशंसा नहीं करता है (HIG, 2026)। हालाँकि, iPad के लिए, प्राथमिक और द्वितीयक पैनल के साथ UISplitViewController का उपयोग किया जाता है। iPhone के लिए, साइड मेनू तीसरे पक्ष की लाइब्रेरी (SideMenu, SwiftUI-side-menu) या कंटेंट ऑफ़सेट के साथ कस्टम समाधानों के माध्यम से कार्यान्वित किया जाता है। SwiftUI में, ऑफ़सेट एनिमेशन के साथ ZStack के माध्यम से साइड मेनू बनाया जाता है।

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 }
            }
        }
    }
}

// उपयोग
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()
        }
    }
}

प्रोडक्शन iOS प्रोजेक्ट्स के लिए, SideMenu लाइब्रेरी का अक्सर उपयोग किया जाता है (GitHub, 8k+ स्टार)। यह जेस्चर सपोर्ट, बैकग्राउंड ब्लर, कस्टम चौड़ाई और एनिमेशन के साथ तैयार UIViewController प्रदान करता है। SideMenu बाएँ और दाएँ मेनू, एकाधिक स्तर और UINavigationController के माध्यम से UIKit एकीकरण का समर्थन करता है। विकल्प iPad पर UISplitViewController (सिस्टम, बिना कस्टम एनिमेशन के) है।

Drawer कस्टमाइज़ेशन: हेडर, आइकन, सेक्शन

Drawer व्यापक कस्टमाइज़ेशन की अनुमति देता है। Android में, NavigationView headerLayout का समर्थन करता है — मेनू आइटम के ऊपर रखा गया कस्टम लेआउट। इसमें अवतार, उपयोगकर्ता नाम, ईमेल और कवर छवि हो सकती है। मेनू आइटम उपशीर्षक, विभाजक और स्विच के साथ <menu> के माध्यम से समूहित किए जाते हैं। iOS पर, SideMenu कस्टमाइज़ेशन में पृष्ठभूमि रंग, ब्लर, चौड़ाई और कोने की त्रिज्या सेट करना शामिल है।

// NavigationView के लिए कस्टम हेडर
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"

// मेनू आइटम कॉन्फ़िगर करना
val menuItem = binding.navView.menu.findItem(R.id.nav_notifications)
menuItem.isChecked = true

// बैज जोड़ना
val badge = binding.navView.getOrCreateBadge(R.id.nav_notifications)
badge.number = 15
badge.isVisible = true

Material Design निम्नलिखित Drawer संरचना की सिफ़ारिश करता है: हेडर (नाम, अवतार), मुख्य नेविगेशन आइटम (5–8), विभाजक, द्वितीयक आइटम (सेटिंग्स, सहायता), फ़ुटर (ऐप के बारे में, संस्करण)। Material 3 में, NavigationView itemShape और itemBackground के माध्यम से कस्टम सक्रिय आइटम हाइलाइटिंग का भी समर्थन करता है।

Drawer कब उपयोग करें: UX सिफ़ारिशें

Drawer 6+ सेक्शन, सेटिंग्स और सहायता पृष्ठों वाले ऐप्स के लिए प्रभावी है। उन ऐप्स के लिए उपयुक्त नहीं है जहाँ सेक्शन तक त्वरित पहुँच महत्वपूर्ण है — ऐसे मामलों में Bottom Navigation बेहतर है। Material Design Drawer को Bottom Navigation के साथ संयोजित करने की सिफ़ारिश करता है: मुख्य नेविगेशन — Bottom (3–5 टैब), अतिरिक्त — Drawer (सेटिंग्स, सहायता, ऐप के बारे में)।

Drawer लागू करते समय सामान्य गलतियाँ: ओवरलोडेड मेनू (बिना समूहीकरण के 15+ आइटम), फ़ोल्ड के नीचे महत्वपूर्ण सेक्शन छिपाना, आइकन की कमी (आइकन के बिना टेक्स्ट 30% धीमी गति से स्कैन होता है), विलंब के साथ एनिमेशन (≤ 200 ms होना चाहिए)। सर्वोत्तम अभ्यास: उपयोगकर्ता नाम के साथ हेडर, प्रत्येक आइटम के लिए आइकन, समूहों के बीच विभाजक, सक्रिय सेक्शन हाइलाइटिंग, खोलने के लिए स्वाइप जेस्चर समर्थन।

• 6+ सेक्शन — Drawer उचित है, कम — Bottom Navigation का उपयोग करें
• आइकन — प्रत्येक आइटम के लिए अनिवार्य, दृश्य खोज को गति देते हैं
• समूहीकरण — मुख्य और द्वितीयक आइटम के बीच विभाजक
• हेडर — वैयक्तिकरण के लिए अवतार, नाम और ईमेल (सोशल ऐप्स)
• स्वाइप जेस्चर — खोलने के लिए अनिवार्य, हैमबर्गर बटन द्वारा दोहराया गया