Tabs

The Tabs component organizes content into tabbed sections. Each tab can display a description that supports basic formatting and an image.

Preview

Fields

  • tabs (required) - A multifield for adding one or more tab items. Each item includes:

    • title (required) - Label for the tab.

    • description (optional) - Rich text content shown in the tab’s content area.

    • imageChooser (optional) - A switchable field for selecting an image source:

      • If image is selected:

        • image (required) - Internal 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.

Behavior

  • At least one tab item is required.

  • The first tab is displayed by default.

  • Content rendering logic:

    • If only description is provided - it fills the full width of the tab content area.

    • If only image is provided - the image is centered and rendered at full width.

    • If both image and description are present:

      • Image is displayed on the left (50% width).

      • Description is displayed on the right (50% width).

  • Clicking on a tab updates the content shown below.

Creating the component

To create this component in your project, run:

npm run mgnl -- create-component Tabs -p tabs
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