better-headers

Better Headers

Chrome for page navigation, not HTTP. Choose one type per subject and implement it. Identity (color, type, anti-slop): frontend-design. Tokens and states: better-web-interface. Footer: better-footers. The repo's DS wins.

Default forbidden without a brief: full-bleed bar, logo on the left, 5 links, CTA on the right, generic hamburger on mobile. That's a template.

Non-negotiable rules

<header> + <nav aria-label="Principal">. Skip link to the content. aria-current="page" on the active item.
Visible focus, keyboard, Esc closes the menu. Drawer/overlay: label on the button, focus trapped while open, restore on close — not just a silent display: none .
4–7 links. CTA with a real verb. Logo with text or alt. No mega-menu on a 3-section landing page.
Sticky/fixed: compensate the height in the flow (padding/scroll-padding-top) so it doesn't cover the H1.
Blur/glass only if the brief/DS asks for it — not indigo + pill + glass from the frontend-design.
prefers-reduced-motionblacklist: no theatrical hide-on-scroll.

Name the chosen type (one line) and justify it. Don't stack three architectures on the same page.

Types (one per page)

1. Central pill

Centered capsule; links inside the pill (border-radius filled, internal padding).
Logo and CTA outside the pill or the whole block as one island.
When: marketing, product with few anchors. Not: 10 items stretching the capsule.

2. Floating island

max-width, viewport margin, large radius, light shadow/border; detached from the top.
Solid DS background, not necessarily blur.
When: site with a full hero; the header can't compete with the window edge.

3. Split + pill

Wordmark on the left, anchor pill in the center, CTA on the right (desktop).
Mobile: compact pill + menu control, not the classic bar in disguise.
When: strong brand on the left and short nav.

4. Overlay on the hero

Transparent over media; after scroll it becomes solid or a pill.
Contrast: scrim, inverted text or a dark/light variant of the logo — never gray over a photo.
When: photography/product in the first viewport (frontend-design).

5. Editorial typographic

No bar or pill: wordmark + links in a line, magazine tracking/weight.
Hover = underline/type color, not a filled button.
When: studio, editorial, culture. Not: dense authenticated app.

6. Asymmetric / offset

Nav block at one extreme (12 grid, span 5–7); the other side empty or just the CTA.
Forbidden justify-between automatic that becomes the default.
When: portfolio, launch, page with a strong visual axis.

7. Flanked

Logo in the center; links on the left and right (or a CTA on one flank).
Balance the item count; mobile: center + menu, don't crush it.
When: brand as the axis; few destinations.

8. Vertical rail (desktop)

Narrow column of links (left or right); content beside it.
Mobile: one of the top types (1–4), not a squeezed rail.
When: portfolio, magazine, short docs. Not: SaaS with 12 routes.

9. Mobile dock + desktop pill

Mobile: island at the bottom (safe-area); desktop: type 1–4.
Don't copy an app tab-bar (5 icons + labels) unless the product is app-like.
When: one-page landing on the phone; short anchors.

10. Utility + main

Thin strip (language, account, phone) only if those items actually exist.
Main chrome visually distinct (pill, island, or editorial) — not two identical bars.
When: e-commerce, support, real i18n (i18n-frontend).

11. Icons + wordmark

Cluster of icons from one family instead of half a dozen labels; aria-label on each one.
Wordmark as anchor; icons = actions (search, account, bag), not the page anchors.
When: tight chrome. Not: hiding the information IA.

12. Reveal / compact

Disappears on scroll down, returns on up; or compacts into a pill.
Reserved height or scroll-padding; no jump. Reduced motion = static.
Pairs with 1–4; it's not a layout on its own.

Mobile

Project breakpoint. Desktop without hamburger if the items fit.
Menu: overlay or sheet with dismiss; focus and aria-expanded.
Type 9: dock doesn't hide the hero CTA or the keyboard (forms).

Anti-patterns

Logo | links | full-bleed CTA “to get started fast”
Hamburger + off-canvas on wide desktop
Twelve links, empty mega-menu, generic “Get started” CTA
Sticky covering the title; z-index war with modal
Pill + glass + indigo gradient as the only “modern”
Mixing rail + dock + pill in the same view

Integration with other skills

Identity: frontend-design
Footer: better-footers
Tokens, hover, dark: better-web-interface
Apple local nav: apple-inspired-websites (don't mix without a brief)
Scroll/pin: cinematographic-websites

Completion criteria

Type named and justified by the brief
Semantics and keyboard ok; aria-current; skip link
Mobile resolved (one pattern, not the hidden default)
Contrast on the overlay; content not covered by the sticky
Aligned with the DS / frontend-design