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.

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 Breadcrumb components:

import AgBreadcrumbs from 'agnostic-astro/Breadcrumbs.astro';
import AgBreadcrumb from 'agnostic-astro/Breadcrumb.astro';

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

<AgBreadcrumbs>
  <AgBreadcrumb>
    <li class="breadcrumb-item"><a href="#">{link1}</a></li>
    <li class="breadcrumb-item"><a href="#">{link2}</a></li>
    <li class="breadcrumb-item active" aria-current="page">{link3}</li>
  </AgBreadcrumb>
</AgBreadcrumbs>
<div class="mbe24" />
<AgBreadcrumbs>
  <AgBreadcrumb isBullet>
    <li class="breadcrumb-item"><a href="#">{link1}</a></li>
    <li class="breadcrumb-item"><a href="#">{link2}</a></li>
    <li class="breadcrumb-item active" aria-current="page">{link3}</li>
  </AgBreadcrumb>
</AgBreadcrumbs>