IGVajra
Cerrar sesión

Componentes / Anchor Menu

Anchor Menu

estable

Menú de navegación por anclas dentro de una misma página, con controles de scroll horizontal.

Controls

HTML

<section class="anchor-menu">
  <div class="anchor-menu__container container" style="--anchor-menu-prev-icon: url(/icons/ico-arrow-control-left.svg); --anchor-menu-next-icon: url(/icons/ico-arrow-control-right.svg);">
    <div class="anchor-menu__controls">
      <button type="button" class="anchor-menu__prev" aria-label="Ir al elemento anterior" disabled></button>
      <button type="button" class="anchor-menu__next" aria-label="Ir al siguiente elemento"></button>
    </div>
    <ul class="anchor-menu__list">
      <li class="anchor-menu__item"><a href="#" class="anchor-menu__link"><span class="anchor-menu__title">Item 1</span></a></li>
      <li class="anchor-menu__item"><a href="#" class="anchor-menu__link"><span class="anchor-menu__title">Item 2</span></a></li>
      <li class="anchor-menu__item"><a href="#" class="anchor-menu__link"><span class="anchor-menu__title">Item 3</span></a></li>
      <li class="anchor-menu__item"><a href="#" class="anchor-menu__link"><span class="anchor-menu__title">Item 4</span></a></li>
      <li class="anchor-menu__item"><a href="#" class="anchor-menu__link"><span class="anchor-menu__title">Item 5</span></a></li>
      <li class="anchor-menu__item"><a href="#" class="anchor-menu__link"><span class="anchor-menu__title">Item 6</span></a></li>
    </ul>
  </div>
</section>