Sayfa.Blocks.Header (Sayfa v0.5.0)

Copy Markdown View Source

Site header block.

Renders a sticky header with glassmorphism backdrop-blur, the site title (or logo image), and optional navigation links with a mobile hamburger menu.

Assigns

  • :site — site config map (used for title, logo, logo_dark)
  • :nav — list of {label, url} tuples for navigation (optional)

Logo support

Set logo: and optionally logo_dark: in your site config:

config :sayfa, :site,
  logo: "/images/logo.svg",
  logo_dark: "/images/logo-dark.svg"

When logo is set, an <img> is rendered instead of the plain text title. When both logo and logo_dark are set, the light logo is hidden in dark mode and the dark logo is shown (dark:hidden / hidden dark:block).

Examples

<%= @block.(:header, nav: [{"Home", "/"}, {"About", "/about/"}]) %>