EmilyUI

Navigation

Headers, bars, and footers. Plain HTML, no JavaScript — dropdown and drawer menus are tracked separately as needs-js.

Previews are rendered live by the same emily.css this site ships, generated from its emily.config.json with emily-css v2.2.1. Copy the HTML, keep the semantics, and your own tokens restyle it. Where the copy reads as guidance ("A clear headline about…"), it is placeholder text from the component library — replace it with your own.

Header with utility top bar

Opening hours and phone number above the main navigation — the standard pattern for service businesses that take calls.

header-with-utility-top-bar.html
<div class="bg-neutral-10 py-2">
  <div class="width-container cluster-between text-sm">
    <span class="text-neutral-80">Mon–Fri 8am–6pm · Sat 9am–1pm</span>
    <a class="text-neutral-90 font-semibold" href="tel:+441914980210">0191 498 0210</a>
  </div>
</div>
<header class="py-4 border-b border-neutral-20">
  <div class="width-container cluster-between">
    <a class="text-xl font-bold text-neutral-90 no-underline" href="/">Fenwick Heating</a>
    <nav aria-label="Main">
      <ul class="inline-list">
        <li><a class="text-neutral-80" href="/services">Services</a></li>
        <li><a class="text-neutral-80" href="/reviews">Reviews</a></li>
        <li><a class="text-neutral-80" href="/about">About</a></li>
        <li><a class="btn btn-primary btn-sm" href="/quote">Get a quote</a></li>
      </ul>
    </nav>
  </div>
</header>

Put a skip link before the header so it is the first focusable element on the page.

Sticky header

Stays pinned while the page scrolls. Suits one-page sites with anchor navigation.

sticky-header.html
<header class="sticky top-0 z-40 bg-light border-b border-neutral-20 py-4">
  <div class="width-container cluster-between">
    <a class="text-xl font-bold text-neutral-90 no-underline" href="/">Northline Roofing</a>
    <nav aria-label="Main">
      <ul class="inline-list">
        <li><a class="text-neutral-80" href="#services">Services</a></li>
        <li><a class="text-neutral-80" href="#reviews">Reviews</a></li>
        <li><a class="btn btn-primary btn-sm" href="#contact">Book a survey</a></li>
      </ul>
    </nav>
  </div>
</header>

Give in-page targets scroll-margin-top so headings are not hidden beneath the pinned header.

Emergency contact bar

emergency-contact-bar.html
<div class="bg-neutral-90 py-2" role="region" aria-label="Emergency contact">
  <div class="width-container cluster-between text-sm">
    <span class="text-light font-semibold">24/7 emergency line</span>
    <a class="text-light font-bold underline" href="tel:+441914980210">0191 498 0210</a>
  </div>
</div>

Mobile bottom CTA bar

Call and quote actions pinned to the bottom of the viewport on phones. Hidden at desktop widths — the preview starts at mobile.

mobile-bottom-cta-bar.html
<div class="fixed bottom-0 inset-x-0 z-40 bg-light border-t border-neutral-20 p-3 md:hidden">
  <div class="cluster" style="justify-content: center; gap: 0.5rem">
    <a class="btn btn-primary" href="tel:+441914980210">Call now</a>
    <a class="btn btn-secondary" href="#contact">Get a quote</a>
  </div>
</div>

Give the page bottom padding so content is never hidden behind the fixed bar.

These examples come from the component manifest; the full set is on the catalogue. They use semantic HTML and token-driven focus styles; no manual assistive-technology testing is claimed — run your own audit before shipping. Source: emily-components on GitHub.