NavigationBarBarra de navegação

A barra de navegação é usada em páginas móveis para facilitar a alternância entre várias páginas principais.

Como usar

Importe os componentes conforme necessário:

import 'mdui/components/navigation-bar.js';
import 'mdui/components/navigation-bar-item.js';

Importe os tipos TypeScript dos componentes conforme necessário:

import type { NavigationBar } from 'mdui/components/navigation-bar.js';
import type { NavigationBarItem } from 'mdui/components/navigation-bar-item.js';

Exemplo de uso: (o style="position: relative" no exemplo é apenas para fins de demonstração; remova este estilo ao usar.)

Item 1

Item 2

Item 3

<mdui-navigation-bar value="item-1" style="position: relative">
  <mdui-navigation-bar-item icon="place" value="item-1">Item 1</mdui-navigation-bar-item>
  <mdui-navigation-bar-item icon="commute" value="item-2">Item 2</mdui-navigation-bar-item>
  <mdui-navigation-bar-item icon="people" value="item-3">Item 3</mdui-navigation-bar-item>
</mdui-navigation-bar>

Observações:

Este componente usa position: fixed por padrão e adiciona automaticamente padding-bottom 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 scroll-target é especificado. Assim, padding-bottom será adicionado ao elemento scroll-target.
Quando o componente está dentro de <mdui-layout></mdui-layout>. Assim, nenhum padding-bottom será adicionado.

Exemplos

Visibilidade do rótulo de texto

O rótulo de texto na barra de navegação é exibido sempre quando o número de itens de navegação é menor ou igual a 3; quando o número de itens é maior que 3, apenas o texto do item selecionado é exibido.

Item 1

Item 2

Item 3

Item 1

Item 2

Item 3

Item 4

<mdui-navigation-bar value="item-1" style="position: relative">
  <mdui-navigation-bar-item icon="place" value="item-1">Item 1</mdui-navigation-bar-item>
  <mdui-navigation-bar-item icon="commute" value="item-2">Item 2</mdui-navigation-bar-item>
  <mdui-navigation-bar-item icon="people" value="item-3">Item 3</mdui-navigation-bar-item>
</mdui-navigation-bar>

<br/>

<mdui-navigation-bar value="item-1" style="position: relative">
  <mdui-navigation-bar-item icon="place" value="item-1">Item 1</mdui-navigation-bar-item>
  <mdui-navigation-bar-item icon="commute" value="item-2">Item 2</mdui-navigation-bar-item>
  <mdui-navigation-bar-item icon="directions_railway" value="item-3">Item 3</mdui-navigation-bar-item>
  <mdui-navigation-bar-item icon="people" value="item-4">Item 4</mdui-navigation-bar-item>
</mdui-navigation-bar>

Fonte

Você pode ajustar a visibilidade do rótulo de texto definindo o atributo label-visibility no componente <mdui-navigation-bar>. Os valores possíveis são:

selected: exibe apenas o texto do item selecionado
labeled: exibe sempre o texto
unlabeled: nunca exibe o texto

Item 1

Item 2

Item 3

selected

labeled

unlabeled

<mdui-navigation-bar value="item-1" label-visibility="selected" style="position: relative" class="example-label">
  <mdui-navigation-bar-item icon="place" value="item-1">Item 1</mdui-navigation-bar-item>
  <mdui-navigation-bar-item icon="commute" value="item-2">Item 2</mdui-navigation-bar-item>
  <mdui-navigation-bar-item icon="people" value="item-3">Item 3</mdui-navigation-bar-item>
</mdui-navigation-bar>

<mdui-segmented-button-group value="selected" selects="single" style="margin-top: 16px">
  <mdui-segmented-button value="selected">selected</mdui-segmented-button>
  <mdui-segmented-button value="labeled">labeled</mdui-segmented-button>
  <mdui-segmented-button value="unlabeled">unlabeled</mdui-segmented-button>
</mdui-segmented-button-group>

<script>
  const navigationBar = document.querySelector(".example-label");
  const segmentedButtonGroup = navigationBar.nextElementSibling;

  segmentedButtonGroup.addEventListener("change", (event) => {
    navigationBar.labelVisibility = event.target.value;
  });
</script>

Fonte

Dentro de um contêiner especificado

Por padrão, a barra de navegação é exibida na parte inferior da página, em relação à janela atual.

Se você deseja colocar a barra de navegação dentro de um contêiner especificado, defina o atributo scroll-target no componente <mdui-navigation-bar>. O valor deve ser o seletor CSS ou elemento DOM do contêiner de conteúdo rolável. Assim, a barra de navegação será exibida em relação ao elemento pai (você precisa adicionar os estilos position: relative; overflow: hidden ao elemento pai).

Item 1

Item 2

Item 3

Conteúdo da página

<div style="position: relative;overflow: hidden">
  <mdui-navigation-bar scroll-target=".example-scroll-target" value="item-1">
    <mdui-navigation-bar-item icon="place" value="item-1">Item 1</mdui-navigation-bar-item>
    <mdui-navigation-bar-item icon="commute" value="item-2">Item 2</mdui-navigation-bar-item>
    <mdui-navigation-bar-item icon="people" value="item-3">Item 3</mdui-navigation-bar-item>
  </mdui-navigation-bar>

  <div class="example-scroll-target" style="height: 160px;overflow: auto;">
    <div style="height: 1000px">Conteúdo da página</div>
  </div>
</div>

Fonte

Ocultar ao rolar

Definindo o atributo scroll-behavior como hide no componente <mdui-navigation-bar>, você pode ocultar a barra de navegação ao rolar a página para baixo e exibi-la ao rolar para cima.

Use o atributo scroll-threshold para definir quantos pixels rolar antes de começar a ocultar a barra de navegação.

Item 1

Item 2

Item 3

Conteúdo da página

<div style="position: relative;overflow: hidden">
  <mdui-navigation-bar
    scroll-behavior="hide"
    scroll-threshold="30"
    scroll-target=".example-scroll-behavior"
    value="item-1"
  >
    <mdui-navigation-bar-item icon="place" value="item-1">Item 1</mdui-navigation-bar-item>
    <mdui-navigation-bar-item icon="commute" value="item-2">Item 2</mdui-navigation-bar-item>
    <mdui-navigation-bar-item icon="people" value="item-3">Item 3</mdui-navigation-bar-item>
  </mdui-navigation-bar>

  <div class="example-scroll-behavior" style="height: 160px;overflow: auto;">
    <div style="height: 1000px">Conteúdo da página</div>
  </div>
</div>

Fonte

Ícone

No componente <mdui-navigation-bar-item>, o atributo icon é usado para definir o ícone do item de navegação no estado inativo, e o atributo active-icon para definir o ícone no estado ativo. Você também pode definir os elementos de ícone para os estados inativo e ativo pelos slots icon e active-icon.

Item 1

Item 2

<mdui-navigation-bar value="item-1" style="position: relative">
  <mdui-navigation-bar-item
    icon="place--outlined"
    active-icon="place"
    value="item-1"
  >Item 1</mdui-navigation-bar-item>
  <mdui-navigation-bar-item value="item-2">
    Item 2
    <mdui-icon slot="icon" name="people--outlined"></mdui-icon>
    <mdui-icon slot="active-icon" name="people"></mdui-icon>
  </mdui-navigation-bar-item>
</mdui-navigation-bar>

Fonte

Link

Defina o atributo href no componente <mdui-navigation-bar-item> para transformar o item de navegação em um link. Assim, você também pode usar os atributos relacionados a links: download, target, rel.

Item 1

Item 2

<mdui-navigation-bar value="item-1" style="position: relative">
  <mdui-navigation-bar-item icon="place" href="https://www.mdui.org" target="_blank" value="item-1">Item 1</mdui-navigation-bar-item>
  <mdui-navigation-bar-item icon="commute" value="item-2">Item 2</mdui-navigation-bar-item>
</mdui-navigation-bar>

Fonte

Badge

No componente <mdui-navigation-bar-item>, você pode adicionar um badge pelo slot badge.

Item 1 99+

Item 2

<mdui-navigation-bar value="item-1" style="position: relative">
  <mdui-navigation-bar-item icon="place" value="item-1">
    Item 1
    <mdui-badge slot="badge">99+</mdui-badge>
  </mdui-navigation-bar-item>
  <mdui-navigation-bar-item icon="commute" value="item-2">Item 2</mdui-navigation-bar-item>
</mdui-navigation-bar>

Fonte

Atributo	Propriedade	Tipo	Padrão
`icon`	`icon`	`string`	-
Nome do ícone Material Icons para o estado inativo. Também pode ser definido via `slot="icon"`.
`active-icon`	`activeIcon`	`string`	-
Nome do ícone Material Icons para o estado ativo. Também pode ser definido via `slot="active-icon"`.
`value`	`value`	`string`	-
O valor do item de navegação.
`href`	`href`	`string`	-
A URL de destino do link. Ao definir esta propriedade, o componente será renderizado internamente como um elemento `<a>` e poderá usar atributos de link.
`download`	`download`	`string`	-
O nome do arquivo para download. Nota: Esta propriedade só é válida quando o atributo `href` está definido.
`target`	`target`	`'_blank' \| '_parent' \| '_self' \| '_top'`	-
Define como o link será aberto. Os valores possíveis são: `_blank`: Abre o link em uma nova janela `_parent`: Abre o link no frame pai `_self`: Padrão. Abre o link no frame atual `_top`: Abre o link na janela inteira Nota: Esta propriedade só é válida quando o atributo `href` está definido.
`rel`	`rel`	`'alternate' \| 'author' \| 'bookmark' \| 'external' \| 'help' \| 'license' \| 'me' \| 'next' \| 'nofollow' \| 'noreferrer' \| 'opener' \| 'prev' \| 'search' \| 'tag'`	-
A relação entre o documento atual e o documento vinculado. Os valores possíveis são: `alternate`: Versão alternativa do documento atual `author`: Autor do documento atual ou artigo `bookmark`: Link permanente para a seção ancestral mais próxima `external`: O documento referenciado não está no mesmo site do documento atual `help`: Link para documentação de ajuda relacionada `license`: O conteúdo principal do documento atual está coberto pela licença de direitos autorais do arquivo referenciado `me`: O documento atual representa o proprietário do conteúdo vinculado `next`: O documento atual faz parte de uma série, e o documento referenciado é o próximo da série `nofollow`: O autor ou editor do documento atual não endossa o arquivo referenciado `noreferrer`: Não inclui o cabeçalho `Referer`. Tem efeito semelhante ao `noopener` `opener`: Se o hiperlink criar um contexto de navegação de nível superior (ou seja, o valor do atributo `target` for `_blank`), cria um contexto de navegação auxiliar `prev`: O documento atual faz parte de uma série, e o documento referenciado é o anterior da série `search`: Fornece um link para um recurso que pode ser usado para pesquisar o arquivo atual e suas páginas relacionadas `tag`: Fornece uma tag (identificada pelo endereço fornecido) aplicável ao documento atual Nota: Disponível apenas quando o atributo `href` é especificado.
`autofocus`	`autofocus`	`boolean`	`false`
Define se o elemento deve receber foco automaticamente após o carregamento da página.
`tabindex`	`tabIndex`	`number`	-
A ordem do elemento ao navegar com a tecla Tab.

Nome	Parâmetros	Retorno
`click`		`void`
Simula um clique do mouse no elemento.
`focus`	`options: FocusOptions` (Opcional)	`void`
Define o foco no elemento atual. Você pode passar um objeto como argumento, com as seguintes propriedades: `preventScroll`: Por padrão, após o elemento receber o foco, a página é rolada para que ele fique visível. Se você não quiser que a página role, defina esta propriedade como `true`.
`blur`		`void`
Remove o foco do elemento atual.

Nome
`focus`
Disparado ao receber foco.
`blur`
Disparado ao perder o foco.

Nome
(padrão)
Texto do item de navegação.
`icon`
Ícone.
`active-icon`
Elemento de ícone no estado ativo.
`badge`
Badge.

Nome
`container`
Contêiner do item de navegação.
`indicator`
Indicador.
`badge`
Badge.
`icon`
Ícone.
`active-icon`
Ícone no estado ativo.
`label`
Texto do item de navegação.

Nome
`--shape-corner-indicator`
Tamanho da borda arredondada do indicador. Pode ser um valor em pixels, mas é recomendado usar os design tokens.

Atributo	Propriedade	Tipo	Padrão
`hide`	`hide`	`boolean`	`false`
Define se o componente está oculto.
`label-visibility`	`labelVisibility`	`'auto' \| 'selected' \| 'labeled' \| 'unlabeled'`	`'auto'`
Estado de visibilidade do texto. Os valores possíveis são: `auto`: Quando o número de itens é menor ou igual a 3, o texto é sempre exibido; quando é maior que 3, apenas o texto do item selecionado é exibido. `selected`: Exibe o texto apenas no estado selecionado. `labeled`: Sempre exibe o texto. `unlabeled`: Nunca exibe o texto.
`value`	`value`	`string`	-
O valor do `<mdui-navigation-bar-item>` atualmente selecionado.
`scroll-behavior`	`scrollBehavior`	`'hide' \| 'shrink' \| 'elevate'`	-
Comportamento de rolagem. O valor possível é: `hide`: Ocultar ao rolar.
`scroll-target`	`scrollTarget`	`string \| HTMLElement \| JQ<HTMLElement>`	-
O elemento no qual o evento de rolagem será monitorado. O valor pode ser um seletor CSS, um elemento DOM ou um objeto JQ. Por padrão, monitora o evento de rolagem da `window`.
`scroll-threshold`	`scrollThreshold`	`number`	-
A distância de rolagem, em `px`, necessária para acionar o comportamento.
`order`	`order`	`number`	-
A ordem de layout deste componente dentro do `<mdui-layout>`, em ordem crescente. O valor padrão é `0`.

Nome
`change`
Disparado quando o valor muda.
`show`
Disparado quando o componente começa a ser exibido. Pode impedir a exibição chamando `event.preventDefault()`.
`shown`
Disparado quando a animação de exibição é concluída.
`hide`
Disparado quando o componente começa a ser ocultado. Pode impedir a ocultação chamando `event.preventDefault()`.
`hidden`
Disparado quando a animação de ocultação é concluída.

Nome
(padrão)
Componentes `<mdui-navigation-bar-item>`.

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

Menu Menu

Próximo capítulo

NavigationDrawer Gaveta de navegação

NavigationBarBarra de navegação

Como usar

Exemplos

Visibilidade do rótulo de texto

Dentro de um contêiner especificado

Ocultar ao rolar

Ícone

Link

Badge

`mdui-navigation-bar-item` API

Propriedades

Métodos

Eventos

Slots

CSS Parts

Propriedades CSS personalizadas

`mdui-navigation-bar` API

Propriedades

Eventos

Slots

Propriedades CSS personalizadas