Render responsive navigation as a honeycomb
This reusable DCE accepts ordinary links containing images and
turns them into a semantic list. Both the link href
and image src may be relative to this demo file or full
URLs. CSS gives every link the logo-centered hexagon appearance of
the legacy demo, then changes between 5–4, 4–3, 3–2, and 2–1
staggered rows as the component narrows.
A cem-hex-image-link occupies 95% of its responsive
.hex cell. Change every cell and link together with
the size parameter on cem-hex-grid.
It sets the whole honeycomb's maximum width and defaults to
72rem. Percentages are relative to the available grid
area; CSS lengths such as 35rem are also accepted and
capped at 100%. Because the cells scale as a group, their staggered
honeycomb edges stay together.
Background alternation is disabled by default, giving every cell
the same gradient. Add alternate="true" to
cem-hex-grid to cycle the three backgrounds. The
white image plate is only a loading/error fallback; it disappears
as soon as the image loads successfully. Keyboard focus uses an
inset, hex-shaped zebra ring driven by cem-theme
tokens, avoiding a rectangular outline cropped by the hexagon.
A wrapper DCE can theme a nested grid without reaching into its
private structure. Set the inherited
--cem-hex-background-* and
--cem-hex-label-* custom properties in the wrapper's
style, then project the grid through the wrapper. Per-cell hover
colors use --cem-hex-hover-background-*. A button-like
presentation can keep the label raised with
--cem-hex-label-shift: 0% and supply normal and hover
filters through --cem-hex-link-filter and
--cem-hex-link-hover-filter.
Use layout="row" for a single horizontal strip. Its
--cem-hex-row-cell-width defaults to 6rem;
narrow cards scroll inside the row instead of staggering the cells.
Put aria-current="page" on the payload link for this
page: it keeps a visible ✓ label and its own colors through
--cem-hex-current-background-* and
--cem-hex-current-label-*. Tab moves focus without moving the current-page marker;
Enter follows the focused link. These are navigation links, not
selectable buttons or tabs.
The layout adapts the responsive list sizing and alternate-row
indentation from
Web Tiki's hexagon grid.
Modern aspect-ratio and clip-path replace
the original rotated masking elements.
See also
Render payload records with cem:for-each
