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 the agnostic-astro npm package (note this installs depedency agnostic-css as well):

npm i agnostic-astro

and then import common.min.css from your “base layout” (you should only need to do this in once place as this is global CSS). This brings in the required CSS custom properties, reset, and properties:

import 'agnostic-css/public/css-dist/common.min.css';

Then you can import Astro Header component:

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>