Drawer — vad är det, DrawerLayout och sidomeny i appar

Vad är Drawer?

Drawer (Navigation Drawer) — ett navigeringselement i form av en panel som glider ut från vänster kant på skärmen genom en svepgest eller klick på hamburgerikonen (tre horisontella linjer). Drawer innehåller navigeringslänkar, en titel och valfria element: användaravatar, notisräknare, avskiljare. Panelen kan täcka innehållet (Modal) eller flytta det (Standard).

Material Design 3 (2026) definierar Navigation Drawer som en komponent för appar med 6+ navigeringspunkter. Till skillnad från Bottom Navigation tar Drawer ingen fast plats på skärmen och visas endast på användarens begäran. Detta frigör utrymme för innehåll men kräver en extra åtgärd för att öppna. Google rekommenderar Drawer för appar med djup hierarki av sektioner.

Forskning av UX Planet (2025) visade: Drawer passar appar med 5–15 sektioner, men navigationstiden är 40% högre än med Bottom Navigation. Användare missar menyalternativ under skärmens vik (scroll). Därför bör viktiga sektioner vara i den övre delen av Drawer och mindre viktiga (Om appen, Inställningar) — i den nedre delen, åtskilda av en avskiljare.

Typer av Drawer: Modal och Standard

Modal Drawer — glider över innehållet, mörkar bakgrunden. Används på mobila enheter där skärmen är begränsad i bredd. Efter val av ett alternativ stängs Drawer automatiskt. Standard Drawer (Permanent) — en fast panel, ständigt synlig, som flyttar innehållet. Används på surfplattor och datorer med skärmbredd från 900 dp. Material 3 definierar också Rail Drawer — en kompakt version för surfplattor som endast visar ikoner.

DrawerLayout i Android

DrawerLayout — den standard ViewGroup i Android som implementerar en glidande sidomeny. DrawerLayout innehåller två underordnade element: första — huvudinnehållet (FrameLayout med NavHostFragment), andra — NavigationView med meny. DrawerLayout hanterar svepgester och programmatisk öppning/stängning via ActionBarDrawerToggle.

// Aktivitet med DrawerLayout och 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)

        // Koppla Drawer till 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"
//   ...>
//   <!-- Huvudinnehåll -->
//   <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 — Material Design-komponenten för Drawer-innehåll. Den stöder rubrik (headerLayout), menyalternativ (menu), underrubriker, kryssrutor och flaggor. Attributet app:menu pekar på en XML-meny med navigeringspunkter. NavigationUI markerar automatiskt det aktiva alternativet och synkroniserar tillståndet med NavController.

Side Menu i iOS

iOS har ingen inbyggd "Drawer"-komponent — Apple rekommenderar inte sidomeny för iPhone (HIG, 2026). För iPad används dock UISplitViewController med primary och secondary paneler. För iPhone implementeras sidomenyn via tredjepartsbibliotek (SideMenu, SwiftUI-side-menu) eller anpassade lösningar med innehållsförskjutning. I SwiftUI skapas sidomenyn via ZStack med förskjutningsanimation.

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

// Användning
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 produktionsprojekt på iOS används ofta biblioteket SideMenu (GitHub, 8k+ stjärnor). Det erbjuder en färdig UIViewController med stöd för gester, bakgrundsoskärpa, anpassad bredd och animationer. SideMenu stöder vänster och höger meny, flera nivåer och integration med UIKit via UINavigationController. Alternativ — UISplitViewController på iPad (systemnivå, utan anpassade animationer).

Anpassa Drawer: titel, ikoner, sektioner

Drawer tillåter omfattande anpassning. I Android stöder NavigationView headerLayout — en anpassad layout placerad ovanför menyalternativen. Där placeras avatar, användarnamn, e-post och omslag. Menyalternativen grupperas via <menu> med underrubriker, avskiljare och flaggor. På iOS inkluderar anpassning av SideMenu inställning av bakgrundsfärg, oskärpa, bredd och hörnrundning.

// Anpassad 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"

// Konfigurera menyalternativ
val menuItem = binding.navView.menu.findItem(R.id.nav_notifications)
menuItem.isChecked = true

// Lägga till märke
val badge = binding.navView.getOrCreateBadge(R.id.nav_notifications)
badge.number = 15
badge.isVisible = true

Material Design rekommenderar följande Drawer-struktur: titel (namn, avatar), huvudsakliga navigeringsalternativ (5–8), avskiljare, sekundära alternativ (Inställningar, Hjälp), sidfot (Om appen, version). I Material 3 stöder NavigationView också anpassad markering av det aktiva alternativet via itemShape och itemBackground.

När ska Drawer användas: UX-rekommendationer

Drawer är effektivt för appar med 6+ sektioner, inställningar och hjälpsidor. Det passar inte för appar där snabb åtkomst till sektioner är kritisk — i sådana fall är Bottom Navigation bättre. Material Design rekommenderar att kombinera Drawer med Bottom Navigation: huvudnavigering — Bottom (3–5 flikar), kompletterande — Drawer (inställningar, hjälp, om appen).

Huvudsakliga misstag vid implementering av Drawer: överbelastad meny (15+ alternativ utan gruppering), döljande av viktiga sektioner under vik, brist på ikoner (text utan ikoner skannas 30% långsammare), animation med fördröjningar (bör vara ≤ 200 ms). Bästa praxis: titel med användarnamn, ikoner vid varje alternativ, avskiljare mellan grupper, markering av aktiv sektion, stöd för svepgest för att öppna.

• 6+ sektioner — Drawer är motiverad, färre — använd Bottom Navigation
• Ikoner — obligatoriska för varje alternativ, snabbar upp visuell sökning
• Gruppering — avskiljare mellan huvud- och sekundäralternativ
• Titel — avatar, namn och e-post för personalisering (sociala appar)
• Svepgest — obligatorisk för att öppna, duplicerad med hamburgerknappen