Footer

The Footer component renders a full-width footer area, typically used at the bottom of the page. It supports a logo, a list of links, and an optional text note.

Preview

Fields

  • logo (optional) - A switchable field allowing internal or external image selection:

    • If image is selected:

      • image (required) - Chooser for selecting an image from Magnolia DAM.

      • altText (optional) - Alt text for accessibility.

    • If externalImage is selected:

      • externalImage (required) - Full URL to the external image.

      • externalImageAlt (optional) - Alt text for accessibility.

  • text (optional) - A simple text field, used for the note or message shown at the bottom (e.g., "Some rights reserved").

  • links (required) - A list of at least one link item. Each item includes:

    • linkChooser (defaultValue: internalLink) - Switchable between internal and external:

      • If internalLink is selected:

        • internalLink (required) - Page link chooser.

        • text (required) - Label for the link.

      • If externalLink is selected:

        • externalLink (required) - Full URL.

        • text (required) - Label for the link.

Behavior

  • Displays a full-width footer.

  • If a logo is provided, it appears on the left.

  • Links are rendered in a vertical list, each with its label.

  • If the text field is filled, it appears at the bottom of the footer as a note.

  • Styling and layout are handled in the front-end implementation.

Creating the component

To create this component in your project, run:

npm run mgnl -- create-component Footer -p footer
This command adds a local copy of the component to your project. You can fully customize it afterward.

Available in

Feedback

DX Core

×

Location

This widget lets you know where you are on the docs site.

You are currently perusing through the Magnolia CLI docs.

Main doc sections

DX Core Headless PaaS Legacy Cloud Incubator modules