Design System · Components

JumboPopdown__Projects

Header-mounted dropdown that surfaces active (and optionally proposed) projects. Conforms to Jumbotron-Popdown-Patterns.md. Hover or click to open. Esc closes. Arrow keys navigate.

Mode
Theme

Default — active + proposed

As wired into Header.astro. Hover the trigger or tab to it and press Enter.

Active only — showProposed: false

Hides the proposed subgroup. Use on pages where the open-call shouldn't compete for attention.

A11y checklist

  • Trigger is a real <button> with aria-haspopup="menu" and aria-expanded.
  • Panel has role="menu"; items have role="menuitem".
  • Esc closes and returns focus to the trigger.
  • Arrow up/down moves focus between items; Home/End jump to first/last.
  • Click outside closes.
  • Hover-open only on pointer:fine devices. Touch falls through to click.
  • Animations are respected by prefers-reduced-motion.
  • Mobile (max-width: 720px): becomes a bottom drawer.
Props + tokens
<JumboPopdown__Projects
  triggerLabelTxt="Projects"        /* nav-link text */
  projects={popdownProjects}        /* pre-loaded ProjectEntry[] */
  showProposed={true}               /* default true */
/>

/* Loader */
import { loadProjectsForPopdown } from '../../lib/load-projects';
const popdownProjects = await loadProjectsForPopdown({ showProposed: true, maxItems: 6 });

/* Tokens read */
--fx-card-bg, --fx-card-border, --fx-card-shadow-hover,
--color-text, --color-text-muted, --color-primary, --color-surface, --color-border,
--color-status-active, --color-status-proposed, --color-status-archived,
--font-display, --font-code