NavigationBarBarra de navegación

El componente Navigation Bar permite alternar entre varias páginas principales en dispositivos móviles.

Uso

Importa los componentes cuando los necesites:

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

Importa los tipos TypeScript cuando los necesites:

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

Uso: (Nota: el style="position: relative" en el ejemplo es solo para demostración; elimina este estilo en uso real.)

Elemento 1

Elemento 2

Elemento 3

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

Notas importantes:

Este componente usa position: fixed por defecto y añade automáticamente padding-bottom 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 se indica el atributo scroll-target. En este caso, se añade padding-bottom al elemento scroll-target.
Cuando el componente está dentro de <mdui-layout></mdui-layout>. En este caso, no se añade padding-bottom.

Ejemplos

Visibilidad de la etiqueta de texto

La etiqueta de texto en la barra de navegación se muestra siempre cuando hay 3 o menos elementos de navegación; cuando hay más de 3 elementos, solo se muestra el texto del elemento seleccionado.

Elemento 1

Elemento 2

Elemento 3

Elemento 1

Elemento 2

Elemento 3

Elemento 4

<mdui-navigation-bar value="item-1" style="position: relative">
  <mdui-navigation-bar-item icon="place" value="item-1">Elemento 1</mdui-navigation-bar-item>
  <mdui-navigation-bar-item icon="commute" value="item-2">Elemento 2</mdui-navigation-bar-item>
  <mdui-navigation-bar-item icon="people" value="item-3">Elemento 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">Elemento 1</mdui-navigation-bar-item>
  <mdui-navigation-bar-item icon="commute" value="item-2">Elemento 2</mdui-navigation-bar-item>
  <mdui-navigation-bar-item icon="directions_railway" value="item-3">Elemento 3</mdui-navigation-bar-item>
  <mdui-navigation-bar-item icon="people" value="item-4">Elemento 4</mdui-navigation-bar-item>
</mdui-navigation-bar>

Fuente

Puedes ajustar la visibilidad de la etiqueta de texto estableciendo el atributo label-visibility en el componente <mdui-navigation-bar>. Los valores posibles son:

selected: Solo muestra el texto del elemento seleccionado
labeled: Muestra siempre el texto
unlabeled: Nunca muestra el texto

Elemento 1

Elemento 2

Elemento 3

selected

labeled

sin etiqueta

<mdui-navigation-bar value="item-1" label-visibility="selected" style="position: relative" class="example-label">
  <mdui-navigation-bar-item icon="place" value="item-1">Elemento 1</mdui-navigation-bar-item>
  <mdui-navigation-bar-item icon="commute" value="item-2">Elemento 2</mdui-navigation-bar-item>
  <mdui-navigation-bar-item icon="people" value="item-3">Elemento 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">sin etiqueta</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>

Fuente

Dentro de un contenedor especificado

Por defecto, la barra de navegación se muestra en la parte inferior de la página, tomando la ventana como referencia.

Si quieres colocar la barra de navegación dentro de un contenedor específico, define el atributo scroll-target en el componente <mdui-navigation-bar>. El valor debe ser el selector CSS o elemento DOM del contenedor con contenido desplazable. En este caso, la barra de navegación se posicionará tomando como referencia el elemento padre (debes añadir manualmente los estilos position: relative; overflow: hidden al elemento padre).

Elemento 1

Elemento 2

Elemento 3

Contenido de la 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">Elemento 1</mdui-navigation-bar-item>
    <mdui-navigation-bar-item icon="commute" value="item-2">Elemento 2</mdui-navigation-bar-item>
    <mdui-navigation-bar-item icon="people" value="item-3">Elemento 3</mdui-navigation-bar-item>
  </mdui-navigation-bar>

  <div class="example-scroll-target" style="height: 160px;overflow: auto;">
    <div style="height: 1000px">Contenido de la página</div>
  </div>
</div>

Fuente

Ocultar al desplazar

Con el atributo scroll-behavior="hide" en <mdui-navigation-bar>, la barra de navegación se oculta al desplazarte hacia abajo y vuelve a mostrarse al desplazarte hacia arriba.

El atributo scroll-threshold define cuántos píxeles desplazar antes de comenzar a ocultar la barra de navegación.

Elemento 1

Elemento 2

Elemento 3

Contenido de la 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">Elemento 1</mdui-navigation-bar-item>
    <mdui-navigation-bar-item icon="commute" value="item-2">Elemento 2</mdui-navigation-bar-item>
    <mdui-navigation-bar-item icon="people" value="item-3">Elemento 3</mdui-navigation-bar-item>
  </mdui-navigation-bar>

  <div class="example-scroll-behavior" style="height: 160px;overflow: auto;">
    <div style="height: 1000px">Contenido de la página</div>
  </div>
</div>

Fuente

Icono

En el componente <mdui-navigation-bar-item>, el atributo icon se usa para establecer el icono del elemento de navegación en estado inactivo, y el atributo active-icon para establecer el icono en estado activo. También puedes usar los slots icon y active-icon para establecer los elementos del icono en estado inactivo y activo.

Elemento 1

Elemento 2

<mdui-navigation-bar value="item-1" style="position: relative">
  <mdui-navigation-bar-item
    icon="place--outlined"
    active-icon="place"
    value="item-1"
  >Elemento 1</mdui-navigation-bar-item>
  <mdui-navigation-bar-item value="item-2">
    Elemento 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>

Fuente

Enlace

Con el atributo href en el componente <mdui-navigation-bar-item>, el elemento de navegación actúa como enlace. También puedes usar download, target y rel.

Elemento 1

Elemento 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">Elemento 1</mdui-navigation-bar-item>
  <mdui-navigation-bar-item icon="commute" value="item-2">Elemento 2</mdui-navigation-bar-item>
</mdui-navigation-bar>

Fuente

Badge

En el componente <mdui-navigation-bar-item>, puedes añadir un Badge mediante el slot badge.

Elemento 1 99+

Elemento 2

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

Fuente

Atributo	Propiedad	Tipo	Predeterminado
`icon`	`icon`	`string`	-
Nombre del icono de Material Icons para el estado inactivo. También se puede establecer mediante `slot="icon"`.
`active-icon`	`activeIcon`	`string`	-
Nombre del icono de Material Icons para el estado activo. También se puede establecer mediante `slot="active-icon"`.
`value`	`value`	`string`	-
Valor del elemento de navegación.
`href`	`href`	`string`	-
URL de destino del enlace. Si se define esta propiedad, el componente se representará como un elemento `<a>` y podrá usar las propiedades de enlace.
`download`	`download`	`string`	-
Nombre del archivo para el enlace de descarga. Nota: Esta propiedad solo tiene efecto si se ha definido la propiedad `href`.
`target`	`target`	`'_blank' \| '_parent' \| '_self' \| '_top'`	-
Especifica dónde abrir el enlace. Los valores posibles son: `_blank`: Abrir el enlace en una nueva ventana `_parent`: Abrir el enlace en el marco principal `_self`: Predeterminado. Abrir el enlace en el marco actual `_top`: Abrir el enlace en la ventana completa Nota: Esta propiedad solo tiene efecto si se ha definido la propiedad `href`.
`rel`	`rel`	`'alternate' \| 'author' \| 'bookmark' \| 'external' \| 'help' \| 'license' \| 'me' \| 'next' \| 'nofollow' \| 'noreferrer' \| 'opener' \| 'prev' \| 'search' \| 'tag'`	-
Relación entre el documento actual y el documento enlazado. Los valores posibles son: `alternate`: Versión alternativa del documento actual `author`: Autor del documento o artículo actual `bookmark`: Enlace permanente a la sección contenedora más cercana `external`: El documento referenciado no está en el mismo sitio que el documento actual `help`: Enlace a la documentación de ayuda relacionada `license`: El contenido principal del documento actual está cubierto por la licencia de derechos de autor del documento referenciado `me`: El documento actual representa al propietario del contenido enlazado `next`: El documento actual es parte de una serie y el documento referenciado es el siguiente de la serie `nofollow`: El autor o editor del documento actual no respalda el documento referenciado `noreferrer`: No incluye el encabezado `Referer`. Similar al efecto de `noopener` `opener`: Si el hipervínculo crea un contexto de navegación de nivel superior (es decir, el valor del atributo `target` es `_blank`), crea un contexto de navegación auxiliar `prev`: El documento actual es parte de una serie y el documento referenciado es el anterior de la serie `search`: Proporciona un enlace a un recurso que se puede utilizar para buscar el archivo actual y sus páginas relacionadas `tag`: Proporciona una etiqueta adecuada para el documento actual (identificada por la dirección dada) Nota: Disponible solo cuando se especifica el atributo `href`.
`autofocus`	`autofocus`	`boolean`	`false`
Indica si el componente debe recibir el foco automáticamente cuando la página termine de cargar.
`tabindex`	`tabIndex`	`number`	-
Orden del elemento al navegar con la tecla Tab.

Nombre	Parámetros	Valor de retorno
`click`		`void`
Simula un clic del ratón en el elemento.
`focus`	`options: FocusOptions` (Opcional)	`void`
Establece el foco en el elemento actual. Puede pasarse un objeto como parámetro con las siguientes propiedades: `preventScroll`: Por defecto, cuando el elemento recibe el foco, la página se desplaza hasta mostrarlo. Si no quiere que la página se desplace, defina esta propiedad como `true`.
`blur`		`void`
Quita el foco del elemento actual.

Nombre
`focus`
Se dispara cuando recibe el foco.
`blur`
Se dispara cuando pierde el foco.

Nombre
(predeterminado)
Texto del elemento de navegación.
`icon`
Icono.
`active-icon`
Elemento de icono en estado activo.
`badge`
Badge.

Nombre
`container`
Contenedor del elemento de navegación.
`indicator`
Indicador.
`badge`
Badge.
`icon`
Icono.
`active-icon`
Icono en estado activo.
`label`
Texto del elemento de navegación.

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

Atributo	Propiedad	Tipo	Predeterminado
`hide`	`hide`	`boolean`	`false`
Indica si está oculto.
`label-visibility`	`labelVisibility`	`'auto' \| 'selected' \| 'labeled' \| 'unlabeled'`	`'auto'`
Visibilidad del texto. Los valores posibles son: `auto`: Cuando hay 3 opciones o menos, el texto se muestra siempre; cuando hay más de 3, solo se muestra el texto de la opción seleccionada `selected`: Mostrar texto solo en el estado seleccionado `labeled`: Mostrar texto siempre `unlabeled`: No mostrar texto nunca
`value`	`value`	`string`	-
Valor del `<mdui-navigation-bar-item>` actualmente seleccionado.
`scroll-behavior`	`scrollBehavior`	`'hide' \| 'shrink' \| 'elevate'`	-
Comportamiento al hacer scroll. Los valores posibles son: `hide`: Ocultar al hacer scroll
`scroll-target`	`scrollTarget`	`string \| HTMLElement \| JQ<HTMLElement>`	-
Elemento en el que se escuchan los eventos de scroll. El valor puede ser un selector CSS, un elemento DOM o un objeto JQ. Por defecto, escucha los eventos de scroll de `window`.
`scroll-threshold`	`scrollThreshold`	`number`	-
Distancia de desplazamiento necesaria para activar el comportamiento, en `px`.
`order`	`order`	`number`	-
Orden de layout de este componente dentro de `<mdui-layout>`, de menor a mayor. El valor predeterminado es `0`.

Nombre
`change`
Se dispara cuando cambia el valor.
`show`
Se dispara cuando comienza a mostrarse. Se puede evitar que se muestre llamando a `event.preventDefault()`.
`shown`
Se dispara cuando la animación de mostrar se completa.
`hide`
Se dispara cuando comienza a ocultarse. Se puede evitar que se oculte llamando a `event.preventDefault()`.
`hidden`
Se dispara cuando la animación de ocultar se completa.

Nombre
(predeterminado)
Componentes `<mdui-navigation-bar-item>`.

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

Menu Menú

Capítulo siguiente

NavigationDrawer Navigation Drawer

NavigationBarBarra de navegación

Uso

Ejemplos

Visibilidad de la etiqueta de texto

Dentro de un contenedor especificado

Ocultar al desplazar

Icono

Enlace

Badge

`mdui-navigation-bar-item` API

Propiedades

Métodos

Eventos

Slots

CSS Parts

CSS Custom Properties

`mdui-navigation-bar` API

Propiedades

Eventos

Slots

CSS Custom Properties