Navegación

.nav agrupa enlaces a otras páginas o secciones. Va en un <nav> con aria-label, la lista en nav__list y cada enlace con nav__link. El enlace de la página actual lleva aria-current="page".

Básica

Un enlace deshabilitado va sin href y con aria-disabled="true".

Tema

HTML
React

<nav class="nav" aria-label="Secciones">
  <ul class="nav__list">
    <li><a class="nav__link" href="#" aria-current="page">Inicio</a></li>
    <li><a class="nav__link" href="#">Servicios</a></li>
    <li><a class="nav__link" href="#">Blog</a></li>
    <li><a class="nav__link" aria-disabled="true">Tienda</a></li>
  </ul>
</nav>

export default function NavegacionBasica() {
  return (
    <nav className="nav" aria-label="Secciones">
      <ul className="nav__list">
        <li><a className="nav__link" href="#" aria-current="page">Inicio</a></li>
        <li><a className="nav__link" href="#">Servicios</a></li>
        <li><a className="nav__link" href="#">Blog</a></li>
        <li><a className="nav__link" aria-disabled="true">Tienda</a></li>
      </ul>
    </nav>
  );
}

Píldoras

nav--pills rellena el enlace actual con primary. Sirve para categorías y filtros que cambian de página.

Tema

HTML
React

<nav class="nav nav--pills" aria-label="Categorías del blog">
  <ul class="nav__list">
    <li><a class="nav__link" href="#" aria-current="page">Todo</a></li>
    <li><a class="nav__link" href="#">Diseño</a></li>
    <li><a class="nav__link" href="#">Desarrollo</a></li>
    <li><a class="nav__link" href="#">Marketing</a></li>
  </ul>
</nav>

export default function NavegacionPildoras() {
  return (
    <nav className="nav nav--pills" aria-label="Categorías del blog">
      <ul className="nav__list">
        <li><a className="nav__link" href="#" aria-current="page">Todo</a></li>
        <li><a className="nav__link" href="#">Diseño</a></li>
        <li><a className="nav__link" href="#">Desarrollo</a></li>
        <li><a className="nav__link" href="#">Marketing</a></li>
      </ul>
    </nav>
  );
}

Subrayado

nav--underline muestra una línea bajo el enlace: crece en hover y queda completa en el enlace actual. Es el menú principal de Dreamsign en escritorio.

Tema

HTML
React

<nav class="nav nav--underline" aria-label="Navegación principal">
  <ul class="nav__list">
    <li><a class="nav__link" href="#" aria-current="page">Inicio</a></li>
    <li><a class="nav__link" href="#">Servicios</a></li>
    <li><a class="nav__link" href="#">Nosotros</a></li>
    <li><a class="nav__link" href="#">Blog</a></li>
  </ul>
</nav>

export default function NavegacionSubrayado() {
  return (
    <nav className="nav nav--underline" aria-label="Navegación principal">
      <ul className="nav__list">
        <li><a className="nav__link" href="#" aria-current="page">Inicio</a></li>
        <li><a className="nav__link" href="#">Servicios</a></li>
        <li><a className="nav__link" href="#">Nosotros</a></li>
        <li><a className="nav__link" href="#">Blog</a></li>
      </ul>
    </nav>
  );
}

Vertical

nav--vertical ordena los enlaces en columna (menús laterales). Se combina con las otras variantes. Los íconos van dentro del enlace, antes del texto.

Tema

HTML
React

<nav class="nav nav--vertical nav--pills" aria-label="Mi cuenta">
  <ul class="nav__list">
    <li>
      <a class="nav__link" href="#" aria-current="page">
        <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><path d="M3 10.5 12 3l9 7.5V20a1 1 0 0 1-1 1h-5v-6H9v6H4a1 1 0 0 1-1-1z" /></svg>
        Resumen
      </a>
    </li>
    <li>
      <a class="nav__link" href="#">
        <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><path d="M6 2h9l5 5v15H6zM14 2v6h6M9 13h8M9 17h8" /></svg>
        Facturas
      </a>
    </li>
    <li>
      <a class="nav__link" href="#">
        <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><circle cx="12" cy="8" r="4" /><path d="M4 21a8 8 0 0 1 16 0" /></svg>
        Perfil
      </a>
    </li>
  </ul>
</nav>

export default function NavegacionVertical() {
  return (
    <nav className="nav nav--vertical nav--pills" aria-label="Mi cuenta">
      <ul className="nav__list">
        <li>
          <a className="nav__link" href="#" aria-current="page">
            <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round" aria-hidden="true"><path d="M3 10.5 12 3l9 7.5V20a1 1 0 0 1-1 1h-5v-6H9v6H4a1 1 0 0 1-1-1z" /></svg>
            Resumen
          </a>
        </li>
        <li>
          <a className="nav__link" href="#">
            <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round" aria-hidden="true"><path d="M6 2h9l5 5v15H6zM14 2v6h6M9 13h8M9 17h8" /></svg>
            Facturas
          </a>
        </li>
        <li>
          <a className="nav__link" href="#">
            <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round" aria-hidden="true"><circle cx="12" cy="8" r="4" /><path d="M4 21a8 8 0 0 1 16 0" /></svg>
            Perfil
          </a>
        </li>
      </ul>
    </nav>
  );
}

Redes sociales

nav--social muestra cada enlace como un ícono en un círculo. Como no tiene texto visible, cada enlace lleva aria-label.

Tema

HTML
React

<nav class="nav nav--social" aria-label="Contacto">
  <ul class="nav__list">
    <li>
      <a class="nav__link" href="#" aria-label="Correo">
        <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><rect x="3" y="5" width="18" height="14" rx="2" /><path d="m3 7 9 6 9-6" /></svg>
      </a>
    </li>
    <li>
      <a class="nav__link" href="#" aria-label="Sitio web">
        <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><circle cx="12" cy="12" r="9" /><path d="M3 12h18M12 3a14 14 0 0 1 0 18M12 3a14 14 0 0 0 0 18" /></svg>
      </a>
    </li>
    <li>
      <a class="nav__link" href="#" aria-label="RSS">
        <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><path d="M5 11a8 8 0 0 1 8 8M5 4a15 15 0 0 1 15 15" /><circle cx="6" cy="18" r="1" /></svg>
      </a>
    </li>
  </ul>
</nav>

export default function NavegacionSocial() {
  return (
    <nav className="nav nav--social" aria-label="Contacto">
      <ul className="nav__list">
        <li>
          <a className="nav__link" href="#" aria-label="Correo">
            <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round" aria-hidden="true"><rect x="3" y="5" width="18" height="14" rx="2" /><path d="m3 7 9 6 9-6" /></svg>
          </a>
        </li>
        <li>
          <a className="nav__link" href="#" aria-label="Sitio web">
            <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round" aria-hidden="true"><circle cx="12" cy="12" r="9" /><path d="M3 12h18M12 3a14 14 0 0 1 0 18M12 3a14 14 0 0 0 0 18" /></svg>
          </a>
        </li>
        <li>
          <a className="nav__link" href="#" aria-label="RSS">
            <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round" aria-hidden="true"><path d="M5 11a8 8 0 0 1 8 8M5 4a15 15 0 0 1 15 15" /><circle cx="6" cy="18" r="1" /></svg>
          </a>
        </li>
      </ul>
    </nav>
  );
}

Sobre fondos de color

Cambia las variables en el CSS de tu sitio, por ejemplo, en una cabecera con el degradado de marca:

.header .nav {
  --ds-nav-link-color: #fff;
  --ds-nav-link-hover-color: #fff;
  --ds-nav-link-active-color: #fff;
  --ds-nav-focus-color: #fff;
}

Accesibilidad

Usa <nav> con un aria-label distinto para cada navegación de la página («Navegación principal», «Pie de página»…).
Marca el enlace actual con aria-current="page". is-active solo cambia el estilo: los lectores de pantalla no lo anuncian.
Los íconos que acompañan texto llevan aria-hidden="true"; si el enlace solo tiene ícono, ponle aria-label.
Para cambiar contenido dentro de la misma página usa Tabs. El menú lateral en móvil llega con ds-uikit.js.

Clases

Clase	Uso
`nav`	Base, en el elemento `<nav>`.
`nav__list`	Lista de enlaces (`<ul>`).
`nav__link`	Enlace. Actual: `aria-current="page"` o `is-active`. Deshabilitado: `aria-disabled="true"` o `is-disabled`.
`nav--vertical`	Enlaces en columna.
`nav--pills`	El enlace actual se rellena con primary.
`nav--underline`	Línea bajo el enlace.
`nav--social`	Íconos en círculo.

Variables

Para centrar los enlaces, usa --ds-nav-justify: center.

Variable	Valor por defecto	Uso
`--ds-nav-direction`	`row`	Dirección de la lista (row o column).
`--ds-nav-justify`	`flex-start`	Alineación de los enlaces.
`--ds-nav-gap`	`var(--ds-space-1)`	Separación entre enlaces.
`--ds-nav-link-padding-y`	`var(--ds-space-2)`	Espacio vertical interno del enlace.
`--ds-nav-link-padding-x`	`var(--ds-space-3)`	Espacio horizontal interno del enlace.
`--ds-nav-link-gap`	`var(--ds-space-2)`	Separación entre ícono y texto.
`--ds-nav-link-font-size`	`var(--ds-font-size-base)`
`--ds-nav-link-font-weight`	`var(--ds-font-weight-regular)`
`--ds-nav-link-active-font-weight`	`var(--ds-font-weight-semibold)`	Peso del enlace actual.
`--ds-nav-link-color`	`var(--ds-color-text)`	Color del enlace.
`--ds-nav-link-bg`	`transparent`	Fondo del enlace (acepta degradados).
`--ds-nav-link-border-width`	`0`	Grosor del borde del enlace.
`--ds-nav-link-border-color`	`transparent`	Color del borde del enlace.
`--ds-nav-link-radius`	`var(--ds-radius-md)`	Radio de las esquinas del enlace.
`--ds-nav-link-hover-color`	`var(--ds-color-primary)`	Color en hover.
`--ds-nav-link-hover-bg`	`var(--ds-nav-link-bg)`	Fondo en hover.
`--ds-nav-link-active-color`	`var(--ds-color-primary)`	Color del enlace actual.
`--ds-nav-link-active-bg`	`var(--ds-nav-link-bg)`	Fondo del enlace actual.
`--ds-nav-icon-size`	`1.25em`	Tamaño de los íconos.
`--ds-nav-indicator-height`	`3px`	Grosor de la línea bajo el enlace (nav--underline).
`--ds-nav-indicator-color`	`currentColor`	Color de la línea bajo el enlace (nav--underline).
`--ds-nav-focus-color`	`var(--ds-color-primary)`	Color del contorno de foco.
`--ds-nav-disabled-opacity`	`0.5`	Opacidad de un enlace deshabilitado.