Vanilla Breeze

glossary-wc

Searchable, categorized glossary for ubiquitous language and project taxonomy — progressively enhances a dl definition list.

Overview

A web component that progressively enhances a <dl> definition list into a searchable, categorized glossary with alphabet navigation and cross-linking. Without JavaScript, the definition list renders normally. With JavaScript, terms are grouped by category, searchable, and navigable via an A–Z jump bar.

Attributes

AttributeTypeDefaultDescription
titlestring—Glossary heading
srcstring (URL)—JSON data URL
searchableboolean—Enables search input that filters terms
compactboolean—Reduced spacing

Term Attributes

Each term is wrapped in a <div> inside the <dl> with these data attributes:

AttributeOnDescription
data-category<div>Category label for grouping (e.g., "Domain", "Technical")
data-term-id<div>Unique ID, auto-set as HTML id for fragment anchors

Enhanced Features

  • Search — when searchable is set, a search input filters terms by name and definition text
  • Categories — terms grouped under collapsible category headers
  • Alphabet jump bar — A–Z navigation for quick scrolling
  • Cross-linking — use standard <a href="#term-id"> inside definitions to link between terms
  • Term count — badge showing total and filtered counts

Data Mode

Events

EventDetailWhen
glossary-wc:ready{ termCount, categories }After setup
glossary-wc:search{ query, matchCount }On search input

Accessibility

  • The <dl> provides native definition list semantics before and after upgrade
  • Search input has aria-label and role="search"
  • Category groups are collapsible with aria-expanded
  • Term IDs enable fragment anchor navigation

Related
↑