NavigationDrawerGaveta de navegação

A gaveta de navegação é usada para fornecer navegação na lateral da página, permitindo que os usuários acessem rapidamente diferentes páginas ou conteúdos.

Normalmente, você pode usar o componente <mdui-list> dentro da gaveta de navegação para adicionar itens de navegação.

Como usar

Importe o componente conforme necessário:

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

Importe o tipo TypeScript do componente conforme necessário:

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

Exemplo de uso:

Fechar gaveta de navegação

Abrir gaveta de navegação

<mdui-navigation-drawer close-on-overlay-click class="example-drawer">
  <mdui-button>Fechar gaveta de navegação</mdui-button>
</mdui-navigation-drawer>

<mdui-button>Abrir gaveta de navegação</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>

Observações:

Este componente usa position: fixed por padrão.

Quando modal é false e a largura da viewport é maior ou igual a --mdui-breakpoint-md, ele adiciona automaticamente padding-left ou padding-right ao body para evitar que o conteúdo da página seja ocultado pelo componente.

No entanto, nos dois casos a seguir, ele usará position: absolute por padrão:

Quando o atributo contained é true.
Quando o componente está dentro de <mdui-layout></mdui-layout>. Assim, nenhum padding-left ou padding-right será adicionado.

Exemplos

Dentro de um contêiner especificado

Por padrão, a gaveta de navegação é exibida no lado esquerdo ou direito da página, em relação à janela atual. Se você deseja colocar a gaveta de navegação dentro de um contêiner especificado, adicione o atributo contained. Assim, a gaveta será exibida em relação ao elemento pai (você precisa adicionar os estilos position: relative; overflow: hidden; ao elemento pai).

Fechar gaveta de navegação

Abrir gaveta de navegação

<div class="example-contained" style="position: relative; overflow: hidden">
  <mdui-navigation-drawer contained>
    <mdui-button class="close">Fechar gaveta de navegação</mdui-button>
  </mdui-navigation-drawer>

  <div style="height: 160px;">
    <mdui-button class="open">Abrir gaveta de navegação</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>

Fonte

Use o atributo modal para exibir uma sobreposição ao abrir a gaveta de navegação. Observe que quando a largura da janela ou do elemento pai for menor que --mdui-breakpoint-md, este parâmetro é ignorado e a sobreposição sempre será exibida.

Use o atributo close-on-esc para fechar a gaveta de navegação ao pressionar a tecla ESC.

Use o atributo close-on-overlay-click para fechar a gaveta de navegação ao clicar na sobreposição.

<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">Fechar gaveta de navegação</mdui-button>
  </mdui-navigation-drawer>

  <div style="height: 160px;">
    <mdui-button class="open">Abrir gaveta de navegação</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>

Fonte

No lado direito

Defina o atributo placement como right para exibir a gaveta de navegação no lado direito da página.

Fechar gaveta de navegação

Abrir gaveta de navegação

<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">Fechar gaveta de navegação</mdui-button>
  </mdui-navigation-drawer>

  <div style="height: 160px;">
    <mdui-button class="open">Abrir gaveta de navegação</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>

Fonte

API

Propriedades

Atributo	Propriedade	Tipo	Padrão
`open`	`open`	`boolean`	`false`
Define se a gaveta de navegação está aberta.
`modal`	`modal`	`boolean`	`false`
Define se uma camada de sobreposição deve ser exibida quando a gaveta de navegação está aberta. Em dispositivos com tela estreita (largura da tela menor que `--mdui-breakpoint-md`), a camada de sobreposição é sempre exibida, ignorando este parâmetro.
`close-on-esc`	`closeOnEsc`	`boolean`	`false`
Define se, quando há uma camada de sobreposição, pressionar a tecla ESC deve fechar a gaveta de navegação.
`close-on-overlay-click`	`closeOnOverlayClick`	`boolean`	`false`
Define se clicar na camada de sobreposição deve fechar a gaveta de navegação.
`placement`	`placement`	`'left' \| 'right'`	`'left'`
Posição da gaveta de navegação. Os valores possíveis são: `left`: Esquerda. `right`: Direita.
`contained`	`contained`	`boolean`	`false`
Por padrão, a gaveta de navegação é exibida em relação ao elemento `body`. Quando esta propriedade é definida como `true`, a gaveta de navegação será exibida em relação ao seu elemento pai. Nota: Ao definir esta propriedade, deve-se definir manualmente o estilo `position: relative; overflow: hidden;` no elemento pai.
`order`	`order`	`number`	-
A ordem de layout deste componente dentro do `<mdui-layout>`, em ordem crescente. O valor padrão é `0`.

Eventos

Nome
`open`
Disparado antes de a gaveta de navegação abrir. Pode impedir a abertura chamando `event.preventDefault()`.
`opened`
Disparado após a conclusão da animação de abertura da gaveta de navegação.
`close`
Disparado antes de a gaveta de navegação fechar. Pode impedir o fechamento chamando `event.preventDefault()`.
`closed`
Disparado após a conclusão da animação de fechamento da gaveta de navegação.
`overlay-click`
Disparado ao clicar na camada de sobreposição.

Slots

Nome
(padrão)
Conteúdo dentro da gaveta de navegação.

CSS Parts

Nome
`overlay`
Camada de sobreposição.
`panel`
Contêiner da gaveta de navegação.

Propriedades CSS personalizadas

Nome
`--shape-corner`
Tamanho da borda arredondada do componente. Pode ser um valor em pixels, mas é recomendado usar os design tokens.
`--z-index`
Valor CSS `z-index` do componente.

Capítulo anterior

NavigationBar Barra de navegação

Próximo capítulo

NavigationRail Trilho de navegação