Drawer — wat is het, DrawerLayout en zijmenu in apps

Wat is Drawer?

Drawer (Navigation Drawer) — een navigatie-element in de vorm van een paneel dat van de linkerrand van het scherm schuift door een veegbeweging of klik op het 'hamburger'-pictogram (drie horizontale lijnen). Drawer bevat navigatielinks, een titel en optionele elementen: gebruikersavatar, meldingstellingen, scheidingstekens. Het paneel kan de inhoud bedekken (Modal) of verschuiven (Standard).

Material Design 3 (2026) definieert Navigation Drawer als een component voor apps met 6+ navigatiepunten. In tegenstelling tot Bottom Navigation neemt Drawer geen vaste plek op het scherm in en wordt alleen getoond op verzoek van de gebruiker. Dit maakt ruimte vrij voor inhoud, maar vereist een extra actie om te openen. Google beveelt Drawer aan voor apps met een diepe hiërarchie van secties.

Onderzoek van UX Planet (2025) toonde aan: Drawer is geschikt voor apps met 5–15 secties, maar de navigatietijd is 40% hoger dan bij Bottom Navigation. Gebruikers missen menu-items onder de vouw van het scherm (scroll). Daarom moeten belangrijke secties bovenaan de Drawer staan en minder belangrijke (Over de app, Instellingen) onderaan, gescheiden door een scheidingsteken.

Typen Drawer: Modal en Standard

Modal Drawer — schuift over de inhoud heen, maakt de achtergrond donkerder. Gebruikt op mobiele apparaten waar het scherm beperkt is in breedte. Na het selecteren van een item sluit Drawer automatisch. Standard Drawer (Permanent) — een vast paneel, permanent zichtbaar, dat de inhoud verschuift. Gebruikt op tablets en desktop met een schermbreedte vanaf 900 dp. Material 3 definieert ook Rail Drawer — een compacte versie voor tablets die alleen pictogrammen toont.

DrawerLayout in Android

DrawerLayout — de standaard ViewGroup in Android die een schuifbaar zijmenu implementeert. DrawerLayout bevat twee onderliggende elementen: de eerste — de hoofdinhoud (FrameLayout met NavHostFragment), de tweede — NavigationView met het menu. DrawerLayout verwerkt veegbewegingen en programmatisch openen/sluiten via ActionBarDrawerToggle.

// Activiteit met DrawerLayout en 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 koppelen aan 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"
//   ...>
//   <!-- Hoofdinhoud -->
//   <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 — de Material Design-component voor de inhoud van de Drawer. Het ondersteunt een titel (headerLayout), menu-items (menu), subtitels, selectievakjes en vlaggen. Het attribuut app:menu verwijst naar een XML-menu met navigatiepunten. NavigationUI markeert automatisch het actieve item en synchroniseert de status met NavController.

Side Menu in iOS

iOS heeft geen ingebouwde 'Drawer'-component — Apple raadt een zijmenu af voor iPhone (HIG, 2026). Voor iPad wordt echter UISplitViewController gebruikt met primary en secondary panelen. Voor iPhone wordt het zijmenu geïmplementeerd via bibliotheken van derden (SideMenu, SwiftUI-side-menu) of aangepaste oplossingen met inhoudsoffset. In SwiftUI wordt het zijmenu gemaakt via ZStack met offset-animatie.

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

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

Voor productieprojecten op iOS wordt vaak de bibliotheek SideMenu gebruikt (GitHub, 8k+ sterren). Het biedt een kant-en-klare UIViewController met ondersteuning voor gebaren, achtergrondvervaging, aangepaste breedte en animaties. SideMenu ondersteunt linker- en rechtermenu's, meerdere niveaus en integratie met UIKit via UINavigationController. Alternatief — UISplitViewController op iPad (systeemeigen, zonder aangepaste animaties).

Drawer aanpassen: titel, pictogrammen, secties

Drawer biedt uitgebreide aanpassingsmogelijkheden. In Android ondersteunt NavigationView headerLayout — een aangepaste layout boven de menu-items. Hierin worden avatar, gebruikersnaam, e-mail en omslag geplaatst. Menu-items worden gegroepeerd via <menu> met subtitels, scheidingstekens en vlaggen. Op iOS omvat het aanpassen van SideMenu het instellen van de achtergrondkleur, vervaging, breedte en afronding van hoeken.

// Aangepaste header voor 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"

// Menu-items configureren
val menuItem = binding.navView.menu.findItem(R.id.nav_notifications)
menuItem.isChecked = true

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

Material Design beveelt de volgende Drawer-structuur aan: titel (naam, avatar), hoofdnavigatie-items (5–8), scheidingsteken, secundaire items (Instellingen, Help), voettekst (Over de app, versie). In Material 3 ondersteunt NavigationView ook het aanpassen van de markering van het actieve item via itemShape en itemBackground.

Wanneer Drawer gebruiken: UX-aanbevelingen

Drawer is effectief voor apps met 6+ secties, instellingen en hulppagina's. Het is niet geschikt voor apps waar snelle toegang tot secties cruciaal is — in zulke gevallen is Bottom Navigation beter. Material Design beveelt aan om Drawer te combineren met Bottom Navigation: hoofdnavigatie — Bottom (3–5 tabbladen), aanvullend — Drawer (instellingen, help, over de app).

Belangrijkste fouten bij het implementeren van Drawer: overbelast menu (15+ items zonder groepering), belangrijke secties verbergen onder de vouw, ontbrekende pictogrammen (tekst zonder pictogrammen wordt 30% langzamer gescand), animatie met vertragingen (moet ≤ 200 ms zijn). Beste praktijken: titel met gebruikersnaam, pictogrammen bij elk item, scheidingstekens tussen groepen, markering van de actieve sectie, ondersteuning voor veegbeweging om te openen.

• 6+ secties — Drawer is gerechtvaardigd, minder — gebruik Bottom Navigation
• Pictogrammen — verplicht voor elk item, versnelt visueel zoeken
• Groepering — scheidingstekens tussen hoofd- en secundaire items
• Titel — avatar, naam en e-mail voor personalisatie (sociale apps)
• Veegbeweging — verplicht om te openen, gedupliceerd door 'hamburger'-knop