# Footer

> Page footer with full design freedom via data-lx-footer tags, or legacy props-driven layouts.

Canonical URL: https://fa7e86e3d553:3005/islands/navigation/footer

> Fully customizable page footer. Two modes: **Hydration mode** (data-lx-footer tags — any design) or **Legacy mode** (5 layout variants via props).

## Preview

**Category**: Navigation

---

## Hydration Mode (Recommended)

Generate any HTML/CSS for your footer. Place `data-lx-footer` tags on interactive elements. The island handles newsletter submission (captured automatically — no endpoint to configure) and dynamic year.

### Tags

| Tag | Required | Purpose |
|-----|----------|---------|
| `data-lx-footer="root"` | Yes | Root footer element |
| `data-lx-footer="newsletter-form"` | No | Form element — submits automatically to the first-party capture backend |
| `data-lx-footer="newsletter-input"` | No | Email input (paired with form) |
| `data-lx-footer="newsletter-success"` | No | Success message — shown after submit |
| `data-lx-footer="year"` | No | Element gets `textContent = currentYear` |

### Behavior Props

| Prop | Type | Default | Description |
|------|------|---------|-------------|
| successMessage | string | "You're in!" | Text shown after successful subscribe |

### Full Example (Hydration Mode)

```html
<lx-island name="Footer">
  <script type="application/json">
{
  "links": [
    {
      "label": "example-label",
      "url": "example-url"
    }
  ]
}
  </script>
</lx-island>
```

### Newsletter Flow

1. User enters email → submits form
2. Island posts `{ email }` to the first-party form-capture backend (`form_key: "newsletter"`) — visible in the storefront dashboard under **Forms**
3. On success: form hides, success message appears
4. On failure: form stays visible so the user can retry

---

## Legacy Mode (Props-Driven)

If no `data-lx-footer` tags found, the component renders from props with 5 layout variants.

### Props (Legacy)

| Prop | Type | Required | Default | Description |
|------|------|----------|---------|-------------|
| links | array | Yes | - | `[{label, url}]` |
| columns | array | No | - | `[{heading?, links}]` |
| logo | object | No | - | `{src, alt?}` |
| copyright | string | No | - | Copyright text |
| tagline | string | No | - | Brand tagline |
| socialLinks | array | No | - | `[{platform, url}]` |
| style | object | No | {} | Style overrides |
| newsletter | object | No | - | `{heading?, placeholder?, buttonText?}` |
| borderStyle | enum | No | "solid" | "none" \| "solid" \| "dashed" |
| tileLayout | boolean | No | false | Grid tiles for social links |

### Style.layout Options

- `"simple"` — flat links row
- `"columns"` — multi-column grouped links
- `"centered"` — centered logo + nav
- `"editorialGrid"` — two-column editorial feel
- `"newsletterSplit"` — links left, email capture right

### Legacy Example

```html
<lx-island name="Footer">
  <script type="application/json">
{
  "links": [
    {
      "label": "example-label",
      "url": "example-url"
    }
  ]
}
  </script>
</lx-island>
```

---

## Validation

Hydration mode (publish validator):
- `data-lx-footer="root"` must be present → error if missing
- If `data-lx-footer="newsletter-form"` is present but `data-lx-footer="newsletter-input"` is missing → warning (newsletter won't submit)

## Related Islands

- [Navbar](/islands/navigation/navbar) — Top navigation (also supports hydration mode)
- [SiteHeader](/islands/navigation/site-header) — Combined announcement + navbar