O novo mdui 2, baseado em Material Design 3 e Web Components, já foi lançado, veja a documentação do mdui 2.

Barra de navegação inferior

A barra de navegação inferior é fixa na parte inferior da página e pode ter de 3 a 5 opções. Geralmente é usada apenas em celulares. Cada página pode ter apenas uma barra de navegação inferior.

Como usar

Basta escrever o HTML para que ele funcione.

Leitura relacionada

Diretrizes de design do Material Design: Componentes - Barra de navegação inferior

Estilo

Estilo básico

O exemplo abaixo mostra ícone e texto simultaneamente, geralmente usado quando há apenas 3 itens de navegação.

Itens de navegação com a classe .mdui-bottom-nav-active estarão no estado ativo por padrão.

Exemplo

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

Mostrar apenas ícones

Exemplo

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

Mostrar apenas texto

Exemplo

<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 apenas no estado ativo

Adicione a classe .mdui-bottom-nav-text-auto ao elemento <div class="mdui-bottom-nav"></div> para obter este efeito.

Geralmente, use este método quando houver 4 ou 5 itens de navegação. Por padrão, apenas os ícones são mostrados, e o texto é exibido após ativar o item de navegação.

Exemplo

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

Cor de fundo

Adicione a classe .mdui-color-[color] ao elemento <div class="mdui-bottom-nav"></div> para atribuir uma cor de fundo à barra de navegação inferior.

Exemplo

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

Fixar na parte inferior da página

Adicione a classe .mdui-bottom-nav-fixed ao elemento body para fixar a barra de navegação inferior na parte inferior da página, sem rolar com a barra de rolagem.

Esta classe deve ser adicionada ao elemento body em vez do elemento .mdui-bottom-nav, pois além de fixar a barra de navegação inferior, ela também adiciona padding-bottom ao body para que a barra não cubra o conteúdo da página.

Esconder automaticamente

Adicione a classe .mdui-bottom-nav-scroll-hide para esconder a barra de navegação inferior ao rolar para baixo e mostrá-la ao rolar para cima.

Nota:

Se a barra de navegação inferior não estiver fixa na parte inferior da página, este recurso não funcionará.
Se os elementos forem gerados dinamicamente, você precisará chamar mdui.mutation() para inicialização.

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

Executar

Evento

Nome do evento	Alvo	Descrição	Parâmetros
`change.mdui.bottomNav`	`<div class="mdui-bottom-nav"></div>`	Este evento é disparado ao trocar os itens de navegação.	`event._detail.index`: O número do índice do item de navegação ativado.

Lista de classes CSS

Nome da classe	Descrição
`.mdui-bottom-nav`	Define o componente de barra de navegação inferior.
`.mdui-bottom-nav-active`	Coloca o item de navegação no estado ativo.
`.mdui-bottom-nav-text-auto`	Faz com que a barra de navegação mostre o texto apenas no estado ativo.
`.mdui-bottom-nav-fixed`	Fixa a barra de navegação na parte inferior da página (precisa ser adicionado ao elemento `body`).
`.mdui-bottom-nav-scroll-hide`	Esconde a barra de navegação inferior ao rolar para baixo e a mostra ao rolar para cima.

Gaveta de navegação

Card