NavigationDrawerNavigation Drawer

El componente Navigation Drawer se usa para ofrecer navegación lateral y permitir acceder rápidamente a distintas páginas o contenidos.

Normalmente, dentro del Navigation Drawer se usa el componente <mdui-list> para añadir elementos de navegación.

Uso

Importa el componente cuando lo necesites:

import 'mdui/components/navigation-drawer.js';

Importa el tipo TypeScript cuando lo necesites:

import type { NavigationDrawer } from 'mdui/components/navigation-drawer.js';

Uso:

Cerrar Navigation Drawer

Abrir Navigation Drawer

<mdui-navigation-drawer close-on-overlay-click class="example-drawer">
  <mdui-button>Cerrar Navigation Drawer</mdui-button>
</mdui-navigation-drawer>

<mdui-button>Abrir Navigation Drawer</mdui-button>

<script>
  const navigationDrawer = document.querySelector(".example-drawer");
  const openButton = navigationDrawer.nextElementSibling;
  const closeButton = navigationDrawer.querySelector("mdui-button");

  openButton.addEventListener("click", () => navigationDrawer.open = true);
  closeButton.addEventListener("click", () => navigationDrawer.open = false);
</script>

Notas importantes:

Este componente usa position: fixed por defecto.

Cuando modal es false y el ancho de la ventana es mayor o igual que --mdui-breakpoint-md, se añade automáticamente padding-left o padding-right al body para evitar que el contenido de la página quede oculto por el componente.

Sin embargo, en los dos casos siguientes, se usará position: absolute por defecto:

Cuando el atributo contained es true.
Cuando el componente está dentro de <mdui-layout></mdui-layout>. En este caso, no se añade padding-left ni padding-right.

Ejemplos

Dentro de un contenedor especificado

Por defecto, el Navigation Drawer se muestra en la parte izquierda o derecha de la página, tomando la ventana como referencia. Si quieres colocar el Navigation Drawer dentro de un contenedor específico, puedes añadir el atributo contained. En este caso, el Navigation Drawer se posicionará tomando como referencia el elemento padre (debes añadir manualmente los estilos position: relative; overflow: hidden; al elemento padre).

Cerrar Navigation Drawer

Abrir Navigation Drawer

<div class="example-contained" style="position: relative; overflow: hidden">
  <mdui-navigation-drawer contained>
    <mdui-button class="close">Cerrar Navigation Drawer</mdui-button>
  </mdui-navigation-drawer>

  <div style="height: 160px;">
    <mdui-button class="open">Abrir Navigation Drawer</mdui-button>
  </div>
</div>

<script>
  const example = document.querySelector(".example-contained");
  const navigationDrawer = example.querySelector("mdui-navigation-drawer");
  const openButton = example.querySelector(".open");
  const closeButton = example.querySelector(".close");

  openButton.addEventListener("click", () => navigationDrawer.open = true);
  closeButton.addEventListener("click", () => navigationDrawer.open = false);
</script>

Fuente

El atributo modal muestra una capa de superposición al abrir el Navigation Drawer. Ten en cuenta que cuando el ancho de la ventana o del elemento padre es menor que --mdui-breakpoint-md, se ignorará este parámetro y siempre se mostrará la capa de superposición.

Con el atributo close-on-esc, el Navigation Drawer se puede cerrar al pulsar la tecla ESC.

Con el atributo close-on-overlay-click, el Navigation Drawer se puede cerrar al hacer clic en la capa de superposición.

<div class="example-modal" style="position: relative; overflow: hidden">
  <mdui-navigation-drawer modal close-on-esc close-on-overlay-click contained>
    <mdui-button class="close">Cerrar Navigation Drawer</mdui-button>
  </mdui-navigation-drawer>

  <div style="height: 160px;">
    <mdui-button class="open">Abrir Navigation Drawer</mdui-button>
  </div>
</div>

<script>
  const example = document.querySelector(".example-modal");
  const navigationDrawer = example.querySelector("mdui-navigation-drawer");
  const openButton = example.querySelector(".open");
  const closeButton = example.querySelector(".close");

  openButton.addEventListener("click", () => navigationDrawer.open = true);
  closeButton.addEventListener("click", () => navigationDrawer.open = false);
</script>

Fuente

En el lado derecho

Con el atributo placement="right", el Navigation Drawer se muestra en el lado derecho de la página.

Cerrar Navigation Drawer

Abrir Navigation Drawer

<div class="example-placement" style="position: relative; overflow: hidden">
  <mdui-navigation-drawer placement="right" modal close-on-esc close-on-overlay-click contained>
    <mdui-button class="close">Cerrar Navigation Drawer</mdui-button>
  </mdui-navigation-drawer>

  <div style="height: 160px;">
    <mdui-button class="open">Abrir Navigation Drawer</mdui-button>
  </div>
</div>

<script>
  const example = document.querySelector(".example-placement");
  const navigationDrawer = example.querySelector("mdui-navigation-drawer");
  const openButton = example.querySelector(".open");
  const closeButton = example.querySelector(".close");

  openButton.addEventListener("click", () => navigationDrawer.open = true);
  closeButton.addEventListener("click", () => navigationDrawer.open = false);
</script>

Fuente

API

Propiedades

Atributo	Propiedad	Tipo	Predeterminado
`open`	`open`	`boolean`	`false`
Indica si el Navigation Drawer está abierto.
`modal`	`modal`	`boolean`	`false`
Indica si se muestra una superposición cuando el Navigation Drawer está abierto. En dispositivos de pantalla estrecha (ancho de pantalla menor que `--mdui-breakpoint-md`), la superposición siempre se muestra, ignorando este parámetro.
`close-on-esc`	`closeOnEsc`	`boolean`	`false`
Indica si el Navigation Drawer se cierra al presionar ESC cuando hay una superposición.
`close-on-overlay-click`	`closeOnOverlayClick`	`boolean`	`false`
Indica si se cierra el Navigation Drawer al hacer clic en la superposición.
`placement`	`placement`	`'left' \| 'right'`	`'left'`
Posición del Navigation Drawer. Los valores posibles son: `left`: Izquierda `right`: Derecha
`contained`	`contained`	`boolean`	`false`
De forma predeterminada, el Navigation Drawer se muestra relativo al elemento `body`. Cuando esta propiedad se define como `true`, el Navigation Drawer se mostrará relativo a su elemento padre. Nota: Al definir esta propiedad, se debe establecer manualmente el estilo en el elemento padre: `position: relative; overflow: hidden;`.
`order`	`order`	`number`	-
Orden de layout de este componente dentro de `<mdui-layout>`, de menor a mayor. El valor predeterminado es `0`.

Eventos

Nombre
`open`
Se dispara antes de que se abra el Navigation Drawer. Se puede evitar que se abra llamando a `event.preventDefault()`.
`opened`
Se dispara después de que la animación de apertura del Navigation Drawer se completa.
`close`
Se dispara antes de que se cierre el Navigation Drawer. Se puede evitar que se cierre llamando a `event.preventDefault()`.
`closed`
Se dispara después de que la animación de cierre del Navigation Drawer se completa.
`overlay-click`
Se dispara al hacer clic en la superposición.

Slots

Nombre
(predeterminado)
Contenido del Navigation Drawer.

CSS Parts

Nombre
`overlay`
Superposición.
`panel`
Contenedor del Navigation Drawer.

CSS Custom Properties

Nombre
`--shape-corner`
Tamaño de la esquina redondeada del componente. Se puede especificar un valor de píxel concreto; pero se recomienda hacer referencia a design tokens.
`--z-index`
Valor CSS `z-index` del componente.

Capítulo anterior

NavigationBar Barra de navegación

Capítulo siguiente

NavigationRail Navigation Rail