Installation

Drop one script tag into any HTML page. No npm, no build step required on the consuming side.

<script src="https://avanderw.co.za/ui-components.js" defer></script>

The file is deployed alongside this site and served via Fastly CDN (~19 kB gzip). Both components are registered and ready as soon as the script loads.

<site-header>

A responsive site header with breadcrumb navigation, icon links, and a light/dark theme toggle. Theme preference is persisted in localStorage.

Live demo

Attributes

AttributeDefaultDescription
home"/"URL for the home icon link.
rssemptyRSS feed URL. Omit or leave empty to hide the icon.
links"[]"JSON array of breadcrumb nav links: [{"href":"/page","text":"Label","tooltip":"Optional"}].

Usage

<site-header></site-header>
<site-header
  home="/"
  rss="/rss.xml"
  links='[{"href":"/docs","text":"Docs"},{"href":"/api","text":"API"}]'
></site-header>

<site-footer>

Contact footer with a hardcoded phone and email, plus a link to this documentation page. No attributes required.

Live demo

Whether you have a project idea, want to discuss tech, or just say hello - I'd love to hear from you. I'm always open to interesting conversations and new opportunities.

Usage

<site-footer></site-footer>

Preventing layout shift

Because the components load via JavaScript, there is a brief window where the elements are undefined. Add this CSS to reserve space and prevent content jumping:

<style>
  site-header:not(:defined),
  site-footer:not(:defined) {
    display: block;
    min-height: 56px;
  }
</style>

Theme

The <site-header> toggle writes data-theme="dark" to document.documentElement and persists to localStorage. The <site-footer> observes that attribute via a MutationObserver and updates its own shadow DOM automatically — no extra wiring needed.

Keeping components up to date

Components are rebuilt and redeployed every time the main site is published. Sub-projects pick up changes automatically after the browser cache expires (GitHub Pages sets a 10-minute TTL). To force an immediate refresh, append a version query string:

<script src="https://avanderw.co.za/ui-components.js?v=2" defer></script>