The agnostic-astro package utilizes XElement under-the-hood in order to provide build-time Astro components. These build-time components will help your project get closer to realizing a mostly no client-side runtime…if you do it right, this should mean an all-green 100% Lighthouse performance score! Leverage the benefits of Islands architecture by sending mostly server built agnostic-astro components. Then, sprinkle client-hydrated ones only as needed.

The header used on this site is actually these components (Header, HeaderNav, HeaderNavItem). Here's an example of how you use these agnostic-astro components:

Ensure you've installed and setup the AgnosticUI Astro integration which will import the required common.min.css onto your page:

npm i astro-agnosticui

Then add the integration to your astro.config.mjs (you may need to run Astro with experimental integrations flag astro dev --experimental-integrations):

import { defineConfig } from 'astro/config';
import agnosticAstro from 'astro-agnosticui';;
export default defineConfig({
  integrations: [agnosticAstro()]
});

Then you can import Astro Header component (agnostic-astro ships with the astro-agnosticui integration):

import AgHeader from 'agnostic-astro/Header.astro';
import AgHeaderNav from 'agnostic-astro/HeaderNav.astro';
import AgHeaderNavItem from 'agnostic-astro/HeaderNavItem.astro';

Here's the agnostic-astro Header component in use:

<AgHeader>
  <!-- Faked Header Logo. All this HTML is arbitrary and you can add what you like. -->
  <a aria-current="page"
    href="#home"
    class="header-logo flex">
    <span class="screenreader-only">Logo and link to home page</span>
    <svg class="some-svg-logo" viewBox="0 0 125 30" xmlns="http://www.w3.org/2000/svg">
      <desc>Header logo graphic</desc>
      ...rest omitted for brevity
    </svg>
  </a>
  <AgHeaderNav>
    <AgHeaderNavItem>
      <span class="screenreader-only">View our products</span>
      <!-- Please use a better href then I have here in this pedantic example ;=) -->
      <a href="#products">Our Products</a>
    </AgHeaderNavItem>
    <AgHeaderNavItem>
      <span class="screenreader-only">View our work</span>
      <!-- Please use a better href then I have here in this pedantic example ;=) -->
      <a href="#work">Our Work</a>
    </AgHeaderNavItem>
    ...and so on
  </AgHeaderNav>
</AgHeader>