Create Custom Layout Components

Layouts are supported in the Build Your Own (LWR) template using Lightning web components instead of Aura components. You can also create your own custom layouts in the same way as for Aura sites, but with some minor changes in syntax.

If your custom theme layout component exposes design properties for Experience Builder, remember to declare those properties in the targetConfig of the lightningCommunity__Default target in the js-meta.xml file.

Tip

Regions

Slots are the new way to define parts of a web component’s template that can be configured declaratively. The presence of slots on your component tells Experience Builder that it’s a region.

Named slots (<slot name="header">) are analogous to component attributes in Aura layouts. If the slot doesn��t have a name, it’s considered to be the default slot, which is analogous to {!v.body} in Aura.

To learn more about how LWC uses slots, see Pass Markup into Slots in the Lightning Web Components Dev Guide.

Page Layout

Page layout components use the lightningCommunity__Page_Layout target in js-meta.xml.

See an example of a two-row page layout with an exposed hero banner region in customLayoutsAndBranding/force-app/main/default/lwc/customPageLayout in the code sample files.

Tip

The JSDoc annotation containing @slot followed by the name of the region is required for the platform to know which slots (or regions in Experience Builder) are exposed for your page layout component. Add this annotation right before the class declaration for the component. For example:

1/**
2* @slot contentHeaderRegion
3* @slot contentRegion
4* @slot contentFooterRegion
5*/
6export default class YourComponentName extends Lightning Element {

To ensure that the page renders correctly, don’t add inline comments or other statements between the annotation and the class declaration.

Theme Layout

Theme layout components use the lightningCommunity__Theme_Layout target in js-meta.xml.

In Aura theme layout components, you include {!v.body} to denote where your content is rendered. Similarly, for an LWC theme layout component, you must include a default slot—essentially, a slot with no name: <slot></slot>—to indicate the region for your main content.

See an example of a three-column theme layout in customLayoutsAndBranding/force-app/main/default/lwc/customThemeLayout in the code sample files. For a functional example of how to build a proper navigation component, see Set Up a Navigation Menu Using Apex

Tip

The JSDoc annotation containing @slot followed by the name of the region is required for the platform to know which slots (or regions in Experience Builder) are exposed for your theme layout component. Add this annotation right before the class declaration for the component. For example:

1/**
2* @slot themeHeaderRegion
3* @slot themeFooterRegion
4*/
5export default class YourComponentName extends Lightning Element {

To ensure that the page renders correctly, don’t add inline comments or other statements between the annotation and the class declaration.

F6 Navigation

F6 navigation is available for theme layout components only. The framework treats any DOM elements with the data-f6-region attribute as an F6-navigable region.

To enable F6 navigation for regions in your theme layout, add the data-f6-region attribute to the major regions.

1<template>
2    <header data-f6-region style={headerStyle}>
3        <slot name="header"></slot>
4    </header>
5    <section data-f6-region style={sectionStyle}>
6        <slot></slot>
7    </section>
8    <footer data-f6-region style={footerStyle}>
9        <slot name="footer"></slot>
10    </footer>
11</template>

LWR Sites for Experience Cloud

Create Custom Layout Components

Regions

Page Layout

Theme Layout

F6 Navigation

See Also