Saltar al contenido principal
Gob.cl

Header

Revisa y prueba el componente en código

Observa los componentes y sus propiedades para adaptarlos a tus necesidades específicas.

Ver en Storybook

Cabecera y navegación superior. Usa el bloque BEM .cl-header del Kit Digital.

Estructura

<header class="cl-header">
  <a class="cl-skip-link" href="#cl-main-content">Saltar al contenido principal</a>
  <div class="cl-header__bar">
    <a class="cl-logo cl-logo--header-vertical-sm cl-header__brand" href="#" aria-label="Ir al inicio">
      <span class="cl-brand-stripe" aria-hidden="true">
        <span class="cl-brand-stripe__bar cl-brand-stripe__bar--brand"></span>
        <span class="cl-brand-stripe__bar cl-brand-stripe__bar--accent"></span>
      </span>
      <span class="cl-logo__text">
        <span class="cl-logo__name">Demoweb</span><span class="cl-logo__domain">.Gob.cl</span>
      </span>
    </a>
    <div class="cl-header__actions">
      <button class="cl-clave-unica-button" type="button">ClaveÚnica</button>
    </div>
  </div>
</header>

<nav class="cl-nav cl-header__nav" aria-label="Principal">
  <ul class="cl-nav__list">
    <li><a class="cl-nav-item" href="#">N1 - Opción menú</a></li>
    <li><a class="cl-nav-item" href="#">N1 - Opción menú</a></li>
    <li><a class="cl-nav-item" href="#">N1 - Opción menú</a></li>
  </ul>
</nav>

<a class="cl-logo cl-logo--header-horizontal" href="#" aria-label="Ir al inicio">
  <img class="cl-logo__image" src="/logos/logo-horizontal.svg" alt="" aria-hidden="true" />
  <span class="cl-logo__text">
    <span class="cl-logo__name">Demoweb</span><span class="cl-logo__domain">.Gob.cl</span>
  </span>
</a>

<a class="cl-logo cl-logo--header-vertical-sm" href="#" aria-label="Ir al inicio">
  <span class="cl-logo__text">
    <span class="cl-logo__name">Demoweb</span><span class="cl-logo__domain">.Gob.cl</span>
  </span>
</a>