Drawer — o que é, DrawerLayout e menu lateral em aplicativos

O que é um Drawer?

Drawer (Navigation Drawer) é um elemento de navegação em forma de painel que desliza pela borda esquerda da tela através de um gesto de deslizar ou toque no ícone de hambúrguer (três linhas horizontais). O Drawer contém links de navegação, um cabeçalho e elementos opcionais: avatar do usuário, contadores de notificações, divisores. O painel pode sobrepor o conteúdo (Modal) ou deslocá-lo (Standard).

O Material Design 3 (2026) define o Navigation Drawer como um componente para aplicativos com 6+ itens de navegação. Ao contrário do Bottom Navigation, o Drawer não ocupa espaço permanente na tela e é exibido apenas mediante solicitação do usuário. Isso libera espaço para o conteúdo, mas requer uma ação adicional para abrir. O Google recomenda o Drawer para aplicativos com hierarquia profunda de seções.

Uma pesquisa da UX Planet (2025) mostrou: o Drawer é adequado para aplicativos com 5–15 seções, mas o tempo de navegação é 40% maior do que com Bottom Navigation. Os usuários perdem itens do menu localizados abaixo da dobra da tela (scroll). Portanto, seções importantes devem estar na parte superior do Drawer, e as menos importantes (Sobre, Configurações) na parte inferior, separadas por um divisor.

Tipos de Drawer: Modal e Standard

Modal Drawer desliza sobre o conteúdo, escurecendo o fundo. Usado em dispositivos móveis onde a largura da tela é limitada. Após selecionar um item, o Drawer fecha automaticamente. Standard Drawer (Permanent) é um painel fixo sempre visível, que desloca o conteúdo. Usado em tablets e desktop com largura de tela a partir de 900 dp. O Material 3 também define Rail Drawer — uma versão compacta para tablets que mostra apenas ícones.

DrawerLayout no Android

DrawerLayout é o ViewGroup padrão no Android que implementa um menu lateral deslizante. DrawerLayout contém dois elementos filhos: o primeiro — conteúdo principal (FrameLayout com NavHostFragment), o segundo — NavigationView com o menu. DrawerLayout lida com gestos de deslizar e abertura/fechamento programático através de ActionBarDrawerToggle.

// Atividade com DrawerLayout e 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)

        // Vinculação do Drawer com 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"
//   ...>
//   <!-- Conteúdo principal -->
//   <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 é um componente do Material Design para o conteúdo do Drawer. Ele suporta cabeçalho (headerLayout), itens de menu (menu), subtítulos, caixas de seleção e interruptores. O atributo app:menu aponta para um menu XML com itens de navegação. O NavigationUI realça automaticamente o item ativo e sincroniza o estado com o NavController.

Menu Lateral no iOS

O iOS não possui um componente "Drawer" incorporado — a Apple não recomenda um menu lateral para iPhone (HIG, 2026). No entanto, para iPad, é usado o UISplitViewController com painéis primário e secundário. Para iPhone, o menu lateral é implementado através de bibliotecas de terceiros (SideMenu, SwiftUI-side-menu) ou soluções personalizadas com deslocamento de conteúdo. No SwiftUI, um menu lateral é criado através de ZStack com animação de deslocamento.

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

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

Para projetos iOS de produção, a biblioteca SideMenu é frequentemente usada (GitHub, 8k+ estrelas). Ela fornece um UIViewController pronto com suporte a gestos, desfoque de fundo, largura personalizada e animações. O SideMenu suporta menu esquerdo e direito, múltiplos níveis e integração com UIKit através de UINavigationController. Uma alternativa é o UISplitViewController no iPad (sistema, sem animações personalizadas).

Personalização do Drawer: cabeçalho, ícones, seções

Drawer permite ampla personalização. No Android, o NavigationView suporta headerLayout — um layout personalizado colocado acima dos itens do menu. Pode conter avatar, nome de usuário, email e imagem de capa. Os itens do menu são agrupados através de <menu> com subtítulos, divisores e interruptores. No iOS, a personalização do SideMenu inclui configuração de cor de fundo, desfoque, largura e raio dos cantos.

// Cabeçalho personalizado para 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"

// Configuração de itens do menu
val menuItem = binding.navView.menu.findItem(R.id.nav_notifications)
menuItem.isChecked = true

// Adicionar um selo
val badge = binding.navView.getOrCreateBadge(R.id.nav_notifications)
badge.number = 15
badge.isVisible = true

O Material Design recomenda a seguinte estrutura de Drawer: cabeçalho (nome, avatar), itens principais de navegação (5–8), divisor, itens secundários (Configurações, Ajuda), rodapé (Sobre, versão). No Material 3, o NavigationView também suporta realce personalizado do item ativo através de itemShape e itemBackground.

Quando usar o Drawer: recomendações de UX

Drawer é eficaz para aplicativos com 6+ seções, configurações e páginas de ajuda. Não é adequado para aplicativos onde o acesso rápido às seções é crítico — nesses casos, o Bottom Navigation é melhor. O Material Design recomenda combinar o Drawer com o Bottom Navigation: navegação principal — Bottom (3–5 guias), adicional — Drawer (configurações, ajuda, sobre).

Erros comuns ao implementar o Drawer: menu sobrecarregado (15+ itens sem agrupamento), ocultar seções importantes abaixo da dobra, falta de ícones (texto sem ícones é escaneado 30% mais devagar), animação com atrasos (deve ser ≤ 200 ms). Melhores práticas: cabeçalho com nome de usuário, ícones para cada item, divisores entre grupos, realce da seção ativa, suporte a gesto de deslizar para abrir.

• 6+ seções — Drawer é justificado, menos — use Bottom Navigation
• Ícones — obrigatórios para cada item, aceleram a busca visual
• Agrupamento — divisores entre itens principais e secundários
• Cabeçalho — avatar, nome e email para personalização (apps sociais)
• Gesto de deslizar — obrigatório para abrir, duplicado pelo botão de hambúrguer