Drawer — qué es, DrawerLayout y menú lateral en aplicaciones

¿Qué es un Drawer?

Drawer (Navigation Drawer) es un elemento de navegación en forma de panel que se desliza desde el borde izquierdo de la pantalla mediante un gesto de deslizamiento o al tocar el icono de hamburguesa (tres líneas horizontales). El Drawer contiene enlaces de navegación, un encabezado y elementos opcionales: avatar de usuario, contadores de notificaciones, divisores. El panel puede superponer el contenido (Modal) o desplazarlo (Standard).

Material Design 3 (2026) define Navigation Drawer como un componente para aplicaciones con 6+ elementos de navegación. A diferencia de Bottom Navigation, el Drawer no ocupa espacio permanente en la pantalla y se muestra solo cuando el usuario lo solicita. Esto libera espacio para el contenido, pero requiere una acción adicional para abrirlo. Google recomienda Drawer para aplicaciones con jerarquía profunda de secciones.

Una investigación de UX Planet (2025) mostró: Drawer es adecuado para aplicaciones con 5–15 secciones, pero el tiempo de navegación es 40% mayor que con Bottom Navigation. Los usuarios pasan por alto los elementos del menú que están debajo del pliegue de la pantalla (scroll). Por lo tanto, las secciones importantes deben estar en la parte superior del Drawer, y las menos importantes (Acerca de, Configuración) en la parte inferior, separadas por un divisor.

Tipos de Drawer: Modal y Standard

Modal Drawer se desliza sobre el contenido, oscureciendo el fondo. Se usa en dispositivos móviles donde el ancho de pantalla es limitado. Después de seleccionar un elemento, el Drawer se cierra automáticamente. Standard Drawer (Permanent) es un panel fijo siempre visible que desplaza el contenido. Se usa en tabletas y escritorio con ancho de pantalla desde 900 dp. Material 3 también define Rail Drawer — una versión compacta para tabletas que muestra solo iconos.

DrawerLayout en Android

DrawerLayout es el ViewGroup estándar en Android que implementa un menú lateral deslizante. DrawerLayout contiene dos elementos secundarios: el primero — contenido principal (FrameLayout con NavHostFragment), el segundo — NavigationView con el menú. DrawerLayout maneja gestos de deslizamiento y apertura/cierre programático mediante ActionBarDrawerToggle.

// Actividad con DrawerLayout y 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)

        // Vinculación de Drawer con 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"
//   ...>
//   <!-- Contenido 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 es un componente de Material Design para el contenido del Drawer. Soporta encabezado (headerLayout), elementos de menú (menu), subtítulos, casillas de verificación e interruptores. El atributo app:menu apunta a un menú XML con elementos de navegación. NavigationUI resalta automáticamente el elemento activo y sincroniza el estado con NavController.

Side Menu en iOS

iOS no tiene un componente "Drawer" incorporado — Apple no recomienda un menú lateral para iPhone (HIG, 2026). Sin embargo, para iPad se usa UISplitViewController con paneles primario y secundario. Para iPhone, el menú lateral se implementa mediante bibliotecas de terceros (SideMenu, SwiftUI-side-menu) o soluciones personalizadas con desplazamiento de contenido. En SwiftUI, un menú lateral se crea mediante ZStack con animación de desplazamiento.

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 proyectos iOS en producción, se usa a menudo la biblioteca SideMenu (GitHub, 8k+ estrellas). Proporciona un UIViewController listo con soporte de gestos, desenfoque de fondo, ancho personalizado y animaciones. SideMenu admite menú izquierdo y derecho, múltiples niveles e integración con UIKit mediante UINavigationController. Una alternativa es UISplitViewController en iPad (sistema, sin animaciones personalizadas).

Personalización del Drawer: encabezado, iconos, secciones

Drawer permite una amplia personalización. En Android, NavigationView admite headerLayout — un diseño personalizado colocado sobre los elementos del menú. Puede contener avatar, nombre de usuario, correo electrónico e imagen de portada. Los elementos del menú se agrupan mediante <menu> con subtítulos, divisores e interruptores. En iOS, la personalización de SideMenu incluye configuración de color de fondo, desenfoque, ancho y radio de esquinas.

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

// Configuración de elementos del menú
val menuItem = binding.navView.menu.findItem(R.id.nav_notifications)
menuItem.isChecked = true

// Agregar una insignia
val badge = binding.navView.getOrCreateBadge(R.id.nav_notifications)
badge.number = 15
badge.isVisible = true

Material Design recomienda la siguiente estructura de Drawer: encabezado (nombre, avatar), elementos principales de navegación (5–8), divisor, elementos secundarios (Configuración, Ayuda), pie de página (Acerca de, versión). En Material 3, NavigationView también admite resaltado personalizado del elemento activo mediante itemShape e itemBackground.

Cuándo usar Drawer: recomendaciones UX

Drawer es efectivo para aplicaciones con 6+ secciones, configuraciones y páginas de ayuda. No es adecuado para aplicaciones donde el acceso rápido a las secciones es crítico — en tales casos es mejor Bottom Navigation. Material Design recomienda combinar Drawer con Bottom Navigation: navegación principal — Bottom (3–5 pestañas), adicional — Drawer (configuración, ayuda, acerca de).

Errores comunes al implementar Drawer: menú sobrecargado (15+ elementos sin agrupación), ocultar secciones importantes debajo del pliegue, falta de iconos (texto sin iconos se escanea 30% más lento), animación con retrasos (debe ser ≤ 200 ms). Mejores prácticas: encabezado con nombre de usuario, iconos para cada elemento, divisores entre grupos, resaltado de sección activa, soporte de gesto de deslizamiento para abrir.

• 6+ secciones — Drawer está justificado, menos — use Bottom Navigation
• Iconos — obligatorios para cada elemento, aceleran la búsqueda visual
• Agrupación — divisores entre elementos principales y secundarios
• Encabezado — avatar, nombre y correo para personalización (apps sociales)
• Gesto de deslizamiento — obligatorio para abrir, duplicado por el botón de hamburguesa