Default Fragments Reference
Liferay provides many out-of-the-box fragments, so you can start building your solution immediately. To view available fragments, begin editing a content page or page template. While editing, open the Fragments and Widgets tab (
) in the editing sidebar menu.
Fragments are organized into the following sets:
Available configuration options vary by fragment and fragment sub-element. See Configuring Fragments for more information.
Layout Elements
For Liferay 7.3+
Layout elements define drop zones for designing page and template layouts. By default, Liferay includes two layout elements: Container and Grid.
| Fragment | Description |
|---|---|
| Container (previously Panel) | Adds a configurable drop zone. |
| Grid (previously Row) | Adds multiple drop zone modules. These modules can be configured and arranged vertically or horizontally. |
Basic Components
These are simple design elements that add basic functionality to a page. Examples include buttons, headings, and tabs. With these components, you can build your page piece by piece. DXP includes the following basic components:
| Fragment | Description |
|---|---|
| Button | Adds a link element that can be a Link or an Action type. You can apply five button styles: Primary, Secondary, Link, Outline Primary, and Outline Secondary. |
| Card | Adds image, rich text, and link elements arranged as a display card. |
| Date | Adds a field that you can map to custom date fields. |
| Drop-down 7.4+ | Adds a simple text element and drop zone. You can drag-and-drop other fragments and widgets into the drop zone to create an advanced drop-down menu. |
| External Video 7.4+ | Embeds an external video in a page or template. Supported video sources include YouTube, Facebook, Twitch, Vimeo, and videos stored in Documents and Media. |
| HTML | Adds an editable HTML element. Double-clicking the element opens a modal window where you can edit its content using HTML syntax. |
| Heading | Adds a simple text element that can be configured to use H1-H6 heading levels. |
| Image | Adds a configurable image element. When configuring, determine whether to use the image’s original size, or adjust it to fit its context. |
| Paragraph | Adds a rich text element. When editing, highlight the fragment’s text to access additional formatting options. |
| Separator | Adds a horizontal line between page elements. You can configure its spacing and color. |
| Slider | Adds multiple images with rich text overlay that are grouped into slides. Users can manually cycle through each slide. |
| Social | Adds image elements with Facebook, Twitter, and LinkedIn icons, which you can link to pages on each platform. |
| Spacer | Adds a horizontal blank space between fragments on a page. You can configure its height. |
| Tabs | Adds multiple tabs with simple text elements and individual drop zones for adding widgets and other fragments. |
| Video URL (previously Video Fragment) | Embeds a video from YouTube or Documents and Media in a page or template. You can set the video to autoplay, loop, mute, or hide controls. You can also hide video controls from end users. |
When using a web content structure with a Text field, setting its Field Type to Multiple Lines enables multiline input in the web content editor. However, line breaks (\n) are not rendered automatically. As a result, when you map the Text field from an article using that structure to a Paragraph fragment, it appears as a single line. To preserve formatting and maintain line breaks, use a Rich Text field.
Form Components
Use form components fragments to build forms in content pages. These fragments only support custom objects. To enable and access them, you must have at least one published object. See Using Form Fragments for more information.
| Fragment | Description |
|---|---|
| CAPTCHA | Adds CAPTCHA verification to a form container to prevent automated submissions. Once added, the form requires human verification for submission. |
| Categories | Adds a field to categorize entries using available vocabularies. |
| Checkbox | Adds a checkbox that you can map to boolean fields. |
| Date | Adds a date picker that you can map to custom date fields. |
| Date and Time | Adds a combined date and time picker that you can map to custom date-time fields. |
| Liferay DXP 2025.Q4+ Drag and Drop Upload | Adds a drag-and-drop file upload field for attachment fields. |
| File Upload | Adds a file upload button that you can map to attachment fields. The mapped attachment field determines upload behavior. By default, this fragment displays supported file extensions. |
| Form Button | (Previously Submit Button) Adds a custom button element to the form. This fragment is not mapped to a field and is typically used for navigation or custom actions. |
| Form Container | Adds a container for building forms in content pages. You must map the container to a custom object. The container automatically generates form fragments for each object field and only allows form fragments inside it. |
| Form Relationship | Adds a field that maps to relationship fields, allowing users to create relationships between entries. |
| Friendly URL | Adds a field for defining a friendly URL value for the entry. |
| Liferay DXP 2025.Q4+ Inline Text | Adds editable text directly within the form layout. This fragment is not mapped to a field and is used for instructions or contextual content. |
| Localization Select | Adds a language selector for localized fields, allowing users to switch the input language. |
| Multiselect List | Adds a field that you can map to multiselect picklists. |
| Liferay 2026.Q1+ Multiselector Checkbox | (Previously Multiselect List) Adds a vertical list of checkboxes that you can map to multiselect picklist fields. This fragment is ideal for short lists where all options remain visible. |
| Liferay 2026.Q1+ Multiselector Dropdown | Adds a searchable drop-down menu for selecting multiple options from multiselect picklist fields. Selected items appear as removable tags. This fragment is the default for multiselect fields and is recommended for large datasets. |
| Numeric | Adds a numeric input that you can map to numeric fields (integer, long integer, decimal, and precision decimal). You can define placeholder values and help text. |
| Rich Text | Adds a rich text editor that you can map to rich text fields. |
| Select | Adds a drop-down menu that you can map to picklist or relationship fields. If the mapped field contains more than 10 options, users can search within the menu. |
| Stepper | Adds navigation steps for multi-step forms. This fragment controls form flow and is not mapped to a field. |
| Submit Button | Adds a button for submitting the form entry. Every form container must include a submit button. |
| Tags | Adds a field to tag entries using tags from the current site or the global site. |
| Text | Adds a single-line text input that you can map to text fields. |
| Textarea | Adds a multi-line text input that you can map to long text fields. |
| Liferay DXP 2025.Q4+ URL Video Previewer | Adds a field that displays a preview of a video from a provided URL. |
Content Display
For Liferay 7.3+
Use content display fragments to display site content individually or as part of a collection. You can also add page elements for rating or flagging page content. DXP includes the following content display fragments:
| Fragment | Description |
|---|---|
| Collection Display | Displays manually and dynamically defined collections, as well as collections defined by a collection provider. You can configure whether the collection appears in a grid, or with a list template (i.e., bordered, bulleted, inline, numbered, and unstyled). See Displaying Collections for more information. |
| Content Display | Displays a single content item from documents and media, web content, blogs, or categories. Available configuration options depend on the selected content type. |
| Applied Filters (Available 7.4+) | Adds an element for displaying and managing filters applied to a collection display. |
| Content Flags | Adds an element for flagging a content item. |
| Collection Filter (Available 7.4+) | Adds an element for filtering a collection display using a vocabulary or category. |
| Content Ratings | Adds an element for rating a content item. |
!!! note
Collection Filter fragments used in Collection Display fragments only work if mapped to object collection providers or blueprint collection providers.
Account
Liferay DXP 7.4 U72+/GA72+
Use the account selector to switch easily between your accounts when browsing products and creating orders. See Using the Account Selector Fragment Set for more information.
Cart
Liferay DXP 7.4 U69+/GA69+
Use the mini cart fragment to obtain a detailed overview of your cart. You can use it to adjust the product quantity, remove items, start the checkout process, or easily search for and add products to your cart. See Using the Mini Cart Fragment for more information.
Featured Content
The Featured Content fragment set is deprecated as of Liferay DXP 2024.Q4/Portal GA129 and is scheduled for removal in a future release.
Featured content fragments are complex page elements composed of multiple components. To preview a fragment’s layout, switch to Card View (
) in the Fragments and Widgets panel. Liferay includes the following featured content fragments.
For Liferay DXP/Portal 7.3, you can preview layouts by hovering over each fragment’s Information icon (
).
Banners
Use banner fragments to add text and link elements to a content page for creating CTA (Call to Action) banners. DXP includes the following layouts.
Features
Use the features fragment to add text, images, and link elements to a content page for promoting key features. Liferay provides the following layout.
Highlights
Use the highlights fragment to add image, text, and link elements to a content page for highlighting. Liferay provides the following layouts.
Footers
Liferay 7.3+
Use footer fragments to add a custom footer to master page templates. Each footer includes a navigation menu, sign-in link, image element, and copyright text. Liferay provides the following layouts for footer fragments:
Navigation Bars
Liferay 7.3+
Use navigation bar fragments to add a custom header to master page templates. Each navigation bar includes a navigation menu, sign-in link, and image element for your logo. Liferay provides the following layouts for navigation bar fragments:
Menu Display
Liferay 7.4+
Using the menu display fragment, you can add menus to your content pages. Once deployed, you can select from any predefined navigation menu. To learn more about how to configure the menu display fragment for your site navigation, see Configuring the Menu Display Widget in Configuring Menu Displays.
You can also create a custom menu display fragment with specific markup and desired behavior by using the navigation menu selector configuration.