NavLink

Uso

import { NavLink } from '@/components/atoms/NavLink';

<NavLink href="/docs" size="default" active>
  Docs
</NavLink>

Props

Gotchas

• a11y

  children must be a string label; active sets aria-current=page — keep one active link per nav section.

• react

  Requires href + children. For SPA routers, wrap or pass the framework Link via className/href patterns your app uses.

Anatomía CSS

<div class="nav-link">
  <span class="nav-link__caret"></span>
  <span class="nav-link__text"></span>
</div>

Tokens resueltos

Valores finales tras seguir la cadena de tokens. Derivados del source: si un token cambia, esta tabla cambia sola.

Animaciones

CSS mínimo funcional

Autocontenido: sin imports ni tokens. Para previews y prototipos — en producción se consume el CSS del DS (@atom-uikit/css/components.css</code>, <code>@atom-uikit/tokens/tokens.css).

/* -------------------------------------------------------------------------
   Nav Link

   Internal navigation link. Child of Navbar.
   Neutral text, full contrast on hover/active. Underline on active.

   Sizes:    sm, default, lg
   States:   default, hover, active, disabled
   ------------------------------------------------------------------------- */

.nav-link {
  display: inline-flex;
  align-items: center;
  padding: 0;
  background: none;
  border: none;
  font-family: 'inter tight', -apple-system, blinkmacsystemfont, 'segoe ui', roboto, helvetica, arial, sans-serif, ui-sans-serif, system-ui, sans-serif;
  font-weight: 500;
  line-height: 1;
  color: #525252;
  cursor: pointer;
  user-select: none;
  -webkit-tap-highlight-color: transparent;
  text-decoration: none;
  /* ATOM --animation-ease (0.2s ease) para color; tracking de su nav-menu__label */
  letter-spacing: -0.02em;
  transition: color 200ms ease;
  position: relative;
}

.nav-link:hover:not(.nav-link--disabled):not(.nav-link--active) {
  color: #0a0a0a;
}

.nav-link:focus-visible {
  outline: 2px solid #0a0a0a;
  outline-offset: 1.5px;
  border-radius: 0.125em;
}

@media (prefers-reduced-motion: reduce) {
  .nav-link {
    transition-duration: 0ms;
  }
  .nav-link__caret {
    transition-duration: 0ms;
  }
}

/* ---- Sizes ---- */

.nav-link--sm      { font-size: 10.24px; }
.nav-link--default { font-size: 12.8px; }
.nav-link--lg      { font-size: 16px; }

/* ---- Active ---- */

.nav-link--active {
  color: #0a0a0a;
  cursor: default;
}

.nav-link--active .nav-link__text::before {
  transform-origin: left;
  transform: scaleX(1) rotate(0.001deg);
}

/* ---- Disabled ---- */

.nav-link--disabled {
  color: #525252;
  cursor: not-allowed;
  pointer-events: none;
}

/* ---- Parts ---- */

.nav-link__text {
  display: inline;
  position: relative;
}

/* ---- Dropdown variant ----
   Trigger de menu dentro de un navbar: caret que rota al abrir y el mismo
   subrayado del estado activo mientras el menu esta abierto. El estado lo
   lleva aria-expanded (accesibilidad = fuente de verdad del estilo). El panel
   es el componente dropdown-menu; aqui solo vive el trigger. */

.nav-link--dropdown {
  gap: 0.375em;
}

.nav-link__caret {
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  width: 1em;
  height: 1em;
  transition: rotate 300ms cubic-bezier(0.22, 1, 0.36, 1);
}

.nav-link__caret svg {
  width: 100%;
  height: 100%;
}

.nav-link--dropdown[aria-expanded='true'] {
  color: #0a0a0a;
}

.nav-link--dropdown[aria-expanded='true'] .nav-link__caret {
  rotate: 180deg;
}

.nav-link--dropdown[aria-expanded='true'] .nav-link__text::before {
  transform-origin: left;
  transform: scaleX(1) rotate(0.001deg);
}

/* ---- Underline ---- */

/* Contrato citado de ATOM [data-underline-link]: offset -0.0625em, alto
   0.0625em, transform 0.6s con la cubica firma, origen right->left. */
.nav-link__text::before {
  content: "";
  position: absolute;
  bottom: -0.0625em;
  left: 0;
  width: 100%;
  height: 0.0625em;
  background-color: #0a0a0a;
  transition: transform 600ms cubic-bezier(0.625, 0.05, 0, 1);
  transform-origin: right;
  transform: scaleX(0) rotate(0.001deg);
}

/* ---- Underline alt (ATOM [data-underline-link="alt"]) ----
   Para links que YA estan subrayados (footers, listas): al hover la linea sale
   por la derecha y una segunda reentra por la izquierda con 0.3s de delay. */

.nav-link--underline-alt .nav-link__text::before {
  transform-origin: left;
  transform: scaleX(1) rotate(0.001deg);
  transition-delay: 300ms;
}

.nav-link--underline-alt .nav-link__text::after {
  content: "";
  position: absolute;
  bottom: -0.0625em;
  left: 0;
  width: 100%;
  height: 0.0625em;
  background-color: #0a0a0a;
  transition: transform 600ms cubic-bezier(0.625, 0.05, 0, 1);
  transform-origin: right;
  transform: scaleX(0) rotate(0.001deg);
}

@media (hover: hover) and (pointer: fine) {
  .nav-link--underline-alt:hover:not(.nav-link--disabled) .nav-link__text::before {
    transform-origin: right;
    transform: scaleX(0) rotate(0.001deg);
    transition-delay: 0s;
  }
  .nav-link--underline-alt:hover:not(.nav-link--disabled) .nav-link__text::after {
    transform-origin: left;
    transform: scaleX(1) rotate(0.001deg);
    transition-delay: 300ms;
  }
}

@media (hover: hover) and (pointer: fine) {
  .nav-link:hover:not(.nav-link--disabled):not(.nav-link--active) .nav-link__text::before,
  [data-hover]:hover .nav-link:not(.nav-link--disabled):not(.nav-link--active) .nav-link__text::before {
    transform-origin: left;
    transform: scaleX(1) rotate(0.001deg);
  }
}