eds-footer

Explore the Interactive Component

Use the playground below to experiment with the component. Click the button to view the full Storybook deployment for additional examples and configurations.

See It in Use with Code

Check out this practical implementation of component.

In HTML

In React and Vue

Overview

EdsFooter is the EBRAINS-wide footer component.

Renders a 4-column layout matching the eds-docs landing footer: [ Brand (EU flag + funding text + copyright) | Resources | Community | Legal ]

Defaults are designed so a consumer that writes <eds-footer></eds-footer> with no props gets the full canonical EBRAINS footer rendered — same brand block, same link columns, same dark theme as the eds-docs landing page. The previous minimal-strip footer is replaced; consumers that need different link content pass the columns prop (array or JSON-stringified array for HTML attribute use).

Configurability without breakage:

All previous props remain (social, variant, fundedBy, rightsReserved, enableScrollTop, enableCookiesSettings, cookiesPreferences, backToTopAriaLabel). Their meanings are preserved.
New columns prop is optional — omit it for the defaults.
The enableCookiesSettings toggle now decides whether any column link with action: 'cookies' is rendered (default false; pass true to surface the Cookie Preferences entry in the Legal column).

Properties

Property	Attribute	Description	Type	Default
`backToTopAriaLabel`	`back-to-top-aria-label`	ARIA label for the “Back to top” floating button.	`string`	`'Back to Top'`
`columns`	`columns`	Custom link columns. Accepts an array (Vue/React/JS bindings) OR a JSON-stringified array (HTML attribute use). When omitted, the canonical EBRAINS-wide columns above are used. Shape: see EdsFooterColumn / EdsFooterLink at the top of this file.	`EdsFooterColumn[] \| string`	`undefined`
`cookiesPreferences`	`cookies-preferences`	Label used for any link with `action: 'cookies'` — overrides the column’s `label`.	`string`	`'Cookie Preferences'`
`enableCookiesSettings`	`enable-cookies-settings`	When false, any column link with `action: 'cookies'` is hidden. Default false so adding the footer to a page without a Matomo notice / cookie banner doesn’t surface a non-functional link. Set true once you’ve also mounted `<eds-matomo-notice>` on the page.	`boolean`	`false`
`enableScrollTop`	`enable-scroll-top`	Float a “Back to top” button at the top-right of the footer.	`boolean`	`false`
`fundedBy`	`funded-by`	“EBRAINS is funded by…” line shown next to the EU flag in the brand column.	`string`	`'EBRAINS is funded by the Horizon Europe Framework Programme.'`
`rightsReserved`	`rights-reserved`	“© {year} EBRAINS. All rights reserved.” line shown below the funding text.	`string`	`${new Date().getFullYear()} EBRAINS. All rights reserved.`
`social`	`social`	Show the eds-social-networks section above the main grid.	`boolean`	`false`
`variant`	`variant`	Theme variant. Defaults to `inverse` (dark) because the canonical EBRAINS footer design uses a dark backdrop with light text. Pass `variant="default"` for the light-on-light treatment if an app’s page palette demands it.	`"default" \| "inverse"`	`'inverse'`

Events

Event	Description	Type
`cookies`		`CustomEvent<any>`

Dependencies

Used by

eds-fullscreen-menu

Depends on

Graph

graph TD;
  eds-footer --> eds-social-networks
  eds-footer --> eds-button
  eds-social-networks --> eds-link
  eds-link --> eds-icon-wrapper
  eds-button --> eds-icon-wrapper
  eds-fullscreen-menu --> eds-footer
  style eds-footer fill:#f9f,stroke:#333,stroke-width:4px

Built with StencilJS