El nuevo mdui 2 basado en Material Design 3 y Web Components ya está disponible. Consulta la documentación de mdui 2 ahora.

Bottom Nav

La barra de navegación inferior se fija en la parte inferior de la página y puede tener de 3 a 5 opciones. Normalmente solo se usa en móviles. Cada página solo puede tener una barra de navegación inferior.

Modo de uso

Solo hace falta escribir el HTML para que funcione.

Lectura relacionada

Pautas de diseño de Material Design: componentes - Barra de navegación inferior

Estilo

Estilo básico

El siguiente ejemplo muestra tanto iconos como texto, normalmente cuando solo hay 3 elementos de navegación.

Los elementos de navegación con la clase .mdui-bottom-nav-active estarán activados por defecto.

Ejemplo

<div class="mdui-bottom-nav">
  <a href="javascript:;" class="mdui-ripple mdui-bottom-nav-active">
    <i class="mdui-icon material-icons">history</i>
    <label>Recents</label>
  </a>
  <a href="javascript:;" class="mdui-ripple">
    <i class="mdui-icon material-icons">favorite</i>
    <label>Favorites</label>
  </a>
  <a href="javascript:;" class="mdui-ripple">
    <i class="mdui-icon material-icons">location_on</i>
    <label>Nearby</label>
  </a>
</div>

Solo mostrar iconos

Ejemplo

<div class="mdui-bottom-nav">
  <a href="javascript:;" class="mdui-ripple mdui-bottom-nav-active">
    <i class="mdui-icon material-icons">history</i>
  </a>
  <a href="javascript:;" class="mdui-ripple">
    <i class="mdui-icon material-icons">favorite</i>
  </a>
  <a href="javascript:;" class="mdui-ripple">
    <i class="mdui-icon material-icons">location_on</i>
  </a>
</div>

Solo mostrar texto

Ejemplo

<div class="mdui-bottom-nav">
  <a href="javascript:;" class="mdui-ripple mdui-bottom-nav-active">Recents</a>
  <a href="javascript:;" class="mdui-ripple">Favorites</a>
  <a href="javascript:;" class="mdui-ripple">Nearby</a>
</div>

Mostrar texto solo en el estado activo

En el elemento <div class="mdui-bottom-nav"></div> se puede agregar la clase .mdui-bottom-nav-text-auto para conseguir este efecto.

Normalmente se usa cuando hay de 4 a 5 elementos de navegación. De forma predeterminada solo muestra iconos y, cuando se activa un elemento de navegación, muestra texto.

Ejemplo

<div class="mdui-bottom-nav mdui-bottom-nav-text-auto">
  <a href="javascript:;" class="mdui-ripple mdui-bottom-nav-active">
    <i class="mdui-icon material-icons">live_tv</i>
    <label>Movies</label>
  </a>
  <a href="javascript:;" class="mdui-ripple">
    <i class="mdui-icon material-icons">music_note</i>
    <label>Music</label>
  </a>
  <a href="javascript:;" class="mdui-ripple">
    <i class="mdui-icon material-icons">book</i>
    <label>Books</label>
  </a>
  <a href="javascript:;" class="mdui-ripple">
    <i class="mdui-icon material-icons">library_books</i>
    <label>Newsstand</label>
  </a>
</div>

Color de fondo

En el elemento <div class="mdui-bottom-nav"></div> se puede agregar la clase .mdui-color-[color] para asignar un color de fondo a la barra de navegación inferior.

Ejemplo

<div class="mdui-bottom-nav mdui-bottom-nav-text-auto mdui-color-brown">
  <a href="javascript:void(0);" class="mdui-ripple mdui-ripple-white mdui-bottom-nav-active">
    <i class="mdui-icon material-icons">live_tv</i>
    <label>Movies</label>
  </a>
  <a href="javascript:void(0);" class="mdui-ripple mdui-ripple-white">
    <i class="mdui-icon material-icons">music_note</i>
    <label>Music</label>
  </a>
  <a href="javascript:void(0);" class="mdui-ripple mdui-ripple-white">
    <i class="mdui-icon material-icons">book</i>
    <label>Books</label>
  </a>
  <a href="javascript:void(0);" class="mdui-ripple mdui-ripple-white">
    <i class="mdui-icon material-icons">library_books</i>
    <label>Newsstand</label>
  </a>
</div>

Fijar en la parte inferior de la página

Agregar la clase .mdui-bottom-nav-fixed al elemento body para fijar la barra de navegación inferior en la parte inferior de la página y que no se desplace con la barra de desplazamiento.

Esta clase debe añadirse al elemento body, no al elemento .mdui-bottom-nav, porque además de fijar la barra de navegación inferior, también añade padding-bottom al body para que la barra no cubra el contenido de la página.

Ocultar automáticamente

Agrega la clase .mdui-bottom-nav-scroll-hide para ocultar la barra de navegación inferior al desplazarse hacia abajo por la página y mostrarla al desplazarse hacia arriba.

Nota:

Si la barra de navegación inferior no está fija en la parte inferior de la página, esta función no tendrá efecto.
Si el elemento se genera dinámicamente, debes llamar a mdui.mutation() para inicializarlo.

<body class="mdui-bottom-nav-fixed">
  <div class="mdui-bottom-nav mdui-bottom-nav-scroll-hide">
    ......
  </div>
</body>

Ejecutar

Evento

Nombre del evento	Objetivo	Descripción	Parámetros
`change.mdui.bottomNav`	`<div class="mdui-bottom-nav"></div>`	Al cambiar el elemento de navegación se disparará este evento.	`event._detail.index`: el índice del elemento de navegación activado.

Lista de clases CSS

Nombre de clase	Descripción
`.mdui-bottom-nav`	Definir el componente de barra de navegación inferior.
`.mdui-bottom-nav-active`	Hacer que un elemento de navegación esté activo.
`.mdui-bottom-nav-text-auto`	Hacer que la barra de navegación solo muestre texto cuando está activa.
`.mdui-bottom-nav-fixed`	Hacer que la barra de navegación quede fija en la parte inferior de la página (debe añadirse al elemento `body`).
`.mdui-bottom-nav-scroll-hide`	Ocultar la barra de navegación inferior al desplazarse hacia abajo por la página y mostrarla al desplazarse hacia arriba.

Navigation Drawer

Tarjetas