Componenten / Uitgebreid / Navigatie

Header en navigatie

Lockup links, menu en actie rechts. Mobiel een uitklapmenu met details/summary: werkt zonder JavaScript.

UitgebreidNavigatie5 instellingenheader

Voorbeeld

Instellingen

Laden…

<header class="gx-header gx-header--transparent gx-header--split">
  <div class="gx-header__in">
    <a class="gx-lockup gx-lockup--sm" href="https://studios.gxj.world" aria-label="GXJ Studios">
      <img class="gx-lockup__mark" src="/marks/studio-white.svg" alt="" width="40" height="40">
      <svg class="gx-lockup__wm" viewBox="45.3 0 91.1 21.4" role="img" aria-label="GXJ">
        <path fill="currentColor" d="M136.362 0V12.9893C136.334 15.5714 134.929 17.7381 132.293 19.2588C129.949 20.6103 126.784 21.3545 123.422 21.3545C120.06 21.3545 116.924 20.6102 114.593 19.2588C111.969 17.7381 110.571 15.5715 110.543 12.9893V10.2422H115.493V12.9092C115.493 14.9505 118.006 17.1484 123.453 17.1484C128.9 17.1484 131.382 14.9505 131.382 12.9092V12.8535L131.413 12.8223V4.1748H118.224V0H136.362ZM73.3379 6.55957H68.3887V4.17773H56.2617C54.6282 4.17773 53.2563 4.85986 52.2998 6.15234C51.4459 7.30634 50.9736 8.86548 50.9736 10.54C50.9737 14.9379 53.7153 16.9404 56.2617 16.9404H69.1631V13.1963H62.4346L62.4316 13.1992V9.02441H76.1338V13.1992H74.1104V21.1182H56.2002C48.7658 21.1028 45.3733 15.6532 45.3682 10.5986C45.3631 5.5185 48.7505 0.0337028 56.2002 0.00292969H73.3379V6.55957ZM93.7383 9.13965H93.8057L103.184 0H110.434L99.4834 10.2891L111.456 21.1162H103.899L103.858 21.0771L93.9844 11.7969H93.7979L83.8838 21.1162H76.3262L88.1787 10.3779L77.1084 0H84.3604L93.7383 9.13965Z"/>
      </svg>
      <span class="gx-lockup__name">Studios</span>
    </a>
    <nav class="gx-nav" aria-label="Hoofdmenu">
      <ul>
        <li>
          <a href="#" aria-current="page">Werk</a>
        </li>
        <li>
          <a href="#">Diensten</a>
        </li>
        <li>
          <a href="#">Over</a>
        </li>
        <li>
          <a href="#">Contact</a>
        </li>
      </ul>
    </nav>
    <a class="gx-btn gx-btn--primary gx-btn--sm gx-header__cta" href="#">Contact</a>
    <details class="gx-menu">
      <summary aria-label="Menu">
        <svg class="gx-icon" viewBox="0 0 24 24" aria-hidden="true" focusable="false">
          <path d="M4 7h16M4 12h16M4 17h16"/>
        </svg>
      </summary>
      <nav aria-label="Mobiel menu">
        <ul>
          <li>
            <a href="#">Werk</a>
          </li>
          <li>
            <a href="#">Diensten</a>
          </li>
          <li>
            <a href="#">Over</a>
          </li>
          <li>
            <a href="#">Contact</a>
          </li>
        </ul>
      </nav>
    </details>
  </div>
</header>

Instellingen

Alles wat je kunt variëren. Ook als query in de URL en als options in de MCP-tool get_component.

Sleutel	Instelling	Waarden	Standaard
`style`	Stijl	`transparent` `solid` `pill`	`transparent`
`layout`	Opbouw	`split` `centered`	`split`
`cta`	Actieknop	aan / uit	`true`
`logo`	Logo	`lockup` `tekst`	`lockup`
`brand`	Merk	`world` `ai` `studios` `events` `productions` `beats` `signatures` `partnerships` `design` `caniche`	`studios`

Richtlijnen

Toegankelijkheid

nav met aria-label; huidige pagina met aria-current=page.
Menuknop heeft een naam; Escape sluit (runtime).
Skiplink naar de inhoud als eerste element van de pagina.

Wel

Maximaal 5 menu-items.

Niet

Navigatie die alleen op hover opent.

Verwant

KruimelpadWaar ben ik: pad naar de huidige pagina.

PagineringDoor lijsten bladeren met vorige/volgende en paginanummers.

FooterAfsluiting met lockup, contact en links. Eenvoudig (één regel, zoals World) of in kolommen.

Hoek-chromeVaste labels in de vier hoeken (World/Portfolea): woordmerk + rol, menu, status met stip en een rollende teller.