Drawer — was ist das, DrawerLayout und Seitenmenü in Apps

Was ist ein Drawer?

Drawer (Navigation Drawer) ist ein Navigationselement in Form eines Panels, das durch eine Wischgeste oder Tippen auf das Hamburger-Symbol (drei horizontale Linien) vom linken Bildschirmrand herausgleitet. Der Drawer enthält Navigationslinks, eine Kopfzeile und optionale Elemente: Benutzeravatar, Benachrichtigungs-Badges, Trennlinien. Das Panel kann den Inhalt überlagern (Modal) oder verschieben (Standard).

Material Design 3 (2026) definiert den Navigation Drawer als Komponente für Apps mit 6+ Navigationselementen. Im Gegensatz zur Bottom Navigation belegt der Drawer keinen dauerhaften Bildschirmplatz und wird nur auf Anfrage des Benutzers angezeigt. Dies schafft Platz für Inhalte, erfordert jedoch eine zusätzliche Aktion zum Öffnen. Google empfiehlt den Drawer für Apps mit tiefer Abschnittshierarchie.

Eine UX Planet-Studie (2025) zeigte: Der Drawer eignet sich für Apps mit 5–15 Abschnitten, aber die Navigationszeit ist 40% höher als bei Bottom Navigation. Benutzer übersehen Menüpunkte unterhalb des Bildschirmfaltes (Scrollen). Daher sollten wichtige Abschnitte oben im Drawer und weniger wichtige (Über die App, Einstellungen) unten, durch eine Trennlinie getrennt, platziert werden.

Drawer-Typen: Modal und Standard

Modal Drawer gleitet über den Inhalt und verdunkelt den Hintergrund. Wird auf Mobilgeräten mit begrenzter Bildschirmbreite verwendet. Nach Auswahl eines Elements schließt der Drawer automatisch. Standard Drawer (Permanent) ist ein festes, ständig sichtbares Panel, das den Inhalt verschiebt. Wird auf Tablets und Desktops mit einer Bildschirmbreite ab 900 dp verwendet. Material 3 definiert auch Rail Drawer — eine kompakte Version für Tablets, die nur Symbole anzeigt.

DrawerLayout in Android

DrawerLayout ist die Standard-ViewGroup in Android, die ein ausziehbares Seitenmenü implementiert. DrawerLayout enthält zwei untergeordnete Elemente: das erste — Hauptinhalt (FrameLayout mit NavHostFragment), das zweite — NavigationView mit dem Menü. DrawerLayout verarbeitet Wischgesten und programmatisches Öffnen/Schließen über ActionBarDrawerToggle.

// Aktivität mit DrawerLayout und 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)

        // Verknüpfen des Drawers mit 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"
//   ...>
//   <!-- Hauptinhalt -->
//   <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 ist eine Material Design-Komponente für den Drawer-Inhalt. Sie unterstützt Kopfzeile (headerLayout), Menüpunkte (menu), Unterüberschriften, Kontrollkästchen und Schalter. Das Attribut app:menu verweist auf ein XML-Menü mit Navigationselementen. NavigationUI hebt automatisch den aktiven Punkt hervor und synchronisiert den Zustand mit NavController.

Seitenmenü in iOS

iOS hat keine eingebaute „Drawer"-Komponente — Apple empfiehlt kein Seitenmenü für das iPhone (HIG, 2026). Für das iPad wird jedoch UISplitViewController mit primärem und sekundärem Panel verwendet. Für das iPhone wird das Seitenmenü über Drittanbieter-Bibliotheken (SideMenu, SwiftUI-side-menu) oder benutzerdefinierte Lösungen mit Inhaltsversatz implementiert. In SwiftUI wird ein Seitenmenü über ZStack mit Offset-Animation erstellt.

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

// Verwendung
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()
        }
    }
}

Für Produktions-iOS-Projekte wird oft die Bibliothek SideMenu verwendet (GitHub, 8k+ Sterne). Sie bietet einen fertigen UIViewController mit Gesteuerkennung, Hintergrundunschärfe, benutzerdefinierter Breite und Animationen. SideMenu unterstützt linke und rechte Menüs, mehrere Ebenen und die Integration mit UIKit über UINavigationController. Eine Alternative ist UISplitViewController auf dem iPad (systemeigen, ohne benutzerdefinierte Animationen).

Drawer-Anpassung: Kopfzeile, Symbole, Abschnitte

Drawer ermöglicht umfangreiche Anpassungen. In Android unterstützt NavigationView headerLayout — ein benutzerdefiniertes Layout über den Menüpunkten. Es kann Avatar, Benutzername, E-Mail und Titelbild enthalten. Menüpunkte werden über <menu> mit Unterüberschriften, Trennlinien und Schaltern gruppiert. Unter iOS umfasst die SideMenu-Anpassung die Einstellung von Hintergrundfarbe, Unschärfe, Breite und Eckenradius.

// Benutzerdefinierter Header für 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"

// Konfigurieren von Menüpunkten
val menuItem = binding.navView.menu.findItem(R.id.nav_notifications)
menuItem.isChecked = true

// Badge hinzufügen
val badge = binding.navView.getOrCreateBadge(R.id.nav_notifications)
badge.number = 15
badge.isVisible = true

Material Design empfiehlt die folgende Drawer-Struktur: Kopfzeile (Name, Avatar), Hauptnavigationselemente (5–8), Trennlinie, sekundäre Elemente (Einstellungen, Hilfe), Fußzeile (Über die App, Version). In Material 3 unterstützt NavigationView auch benutzerdefinierte Hervorhebung aktiver Elemente über itemShape und itemBackground.

Wann Drawer verwenden: UX-Empfehlungen

Drawer ist effektiv für Apps mit 6+ Abschnitten, Einstellungen und Hilfeseiten. Nicht geeignet für Apps, bei denen schneller Zugriff auf Abschnitte entscheidend ist — in solchen Fällen ist Bottom Navigation besser. Material Design empfiehlt, Drawer mit Bottom Navigation zu kombinieren: Hauptnavigation — Bottom (3–5 Tabs), zusätzliche — Drawer (Einstellungen, Hilfe, Über die App).

Häufige Fehler bei der Implementierung von Drawer: überladenes Menü (15+ Elemente ohne Gruppierung), Verstecken wichtiger Abschnitte unter dem Falz, fehlende Symbole (Text ohne Symbole wird 30% langsamer erfasst), Animation mit Verzögerungen (sollte ≤ 200 ms betragen). Best Practices: Kopfzeile mit Benutzername, Symbole für jedes Element, Trennlinien zwischen Gruppen, Hervorhebung des aktiven Abschnitts, Wischgeste zum Öffnen.

• 6+ Abschnitte — Drawer ist gerechtfertigt, weniger — Bottom Navigation verwenden
• Symbole — für jedes Element obligatorisch, beschleunigen die visuelle Suche
• Gruppierung — Trennlinien zwischen Haupt- und Nebenelementen
• Kopfzeile — Avatar, Name und E-Mail für Personalisierung (soziale Apps)
• Wischgeste — zum Öffnen obligatorisch, durch Hamburger-Button dupliziert