@dropzone

Create areas where child elements can be added

The @dropzone directive creates an area within a template where child elements can be added. Dropzones are fundamental to building container components that allow users to compose layouts by dragging and dropping other components inside them.

Syntax

@dropzone("name")

With additional parameters:

@dropzone(name: "content", title: "Display Title", horizontal: true)

Parameters

Parameter	Required	Description
name	Yes	A unique identifier for the dropzone within the component
title	No	The label displayed in the editor interface
horizontal	No	When true, displays dropped items in a horizontal layout in the editor

Examples

Basic Dropzone

@dropzone("content")

Named Dropzone with Title

Provide a descriptive title for the editor interface:

@dropzone("content", title: "Container")

Horizontal Layout

Use horizontal layout for grid or flex containers:

@dropzone(name: "content", title: "Grid", horizontal: true)

Multiple Dropzones in One Component

Components can have multiple named dropzones for different content areas:

<div class="accordion-header">
    @dropzone("title", title: "Title")
</div>
<div class="accordion-content">
    @dropzone("content", title: "Content")
</div>

Navbar with Multiple Dropzones

A navigation component with separate areas for logo, menu items, and mobile content:

<nav class="navbar">
    <div class="logo-area">
        @dropzone("logo", title: "Logo")
    </div>
    <div class="desktop-items">
        @dropzone("desktop", title: "Desktop")
    </div>
</nav>

@portal("bodyStart")
    <div class="mobile-menu">
        @dropzone("mobileLogo", title: "Mobile Logo")
        @dropzone("mobileContent", title: "Mobile Content")
    </div>
@endportal

Modal with Trigger and Content

<span class="trigger">
    @dropzone("trigger", title: "Trigger")
</span>

@portal("bodyEnd")
    <div class="modal-panel">
        @dropzone("content", title: "Content")
    </div>
@endportal

Flex Container with Direction Option

@if(wantsHorizontalDropzone)
    @dropzone(name: "content", title: "Flex", horizontal: true)
@else
    @dropzone(name: "content", title: "Flex")
@endif

Dropzones Inside Loops

Dropzones can be placed inside @each loops to create dynamic, repeating content areas. This is useful for components like tab panels, accordion sections, or multi-column layouts where each iteration needs its own dropzone.

The dropzone name and title must be static text—you cannot use dynamic values like {{index}} or template variables inside the dropzone declaration. Elements automatically handles creating unique dropzones for each loop iteration.

Basic Loop Dropzone

Place a dropzone inside a loop with a static name:

@each(tab in tabs)
    <div class="tab-panel">
        @dropzone("panel", title: "Panel")
    </div>
@endeach

Accordion with Dynamic Panels

Create an accordion where each panel has its own content dropzone:

@each(section in sections)
    <div class="accordion-item">
        <button class="accordion-header">
            {{section.title}}
        </button>
        <div class="accordion-body">
            @dropzone("content", title: "Section Content")
        </div>
    </div>
@endeach

Resource Dropzones

In addition to component dropzones, you can allow users to drop resources (like images) directly into the editor using the rwResourceDropZone HTML attribute.

Syntax

<div rwResourceDropZone="propertyName">
    <!-- Fallback content -->
</div>

Image Gallery Example

Allow users to drop a folder of images directly into the component:

<div class="gallery" rwResourceDropZone="images">
    @if(!images.isFolder)
        <h3 class="placeholder">
            Drop a folder of images here!
        </h3>
    @else
        @each(image in images.resources)
            <img src="{{image.image}}" alt="{{image.caption}}" />
        @endeach
    @endif
</div>

This requires a corresponding resource control in the Properties file:

{
    "groups": [{
        "title": "Content",
        "properties": [{
            "title": "Images",
            "property": "images",
            "resource": {}
        }]
    }]
}

Best Practices

1. Use descriptive names - Choose names that clearly indicate the purpose of the dropzone (e.g., "header", "content", "sidebar").

2. Add meaningful titles - The title parameter helps users understand where to add content in the editor.

3. Use horizontal for layout components - Enable horizontal layout for flex/grid containers to match the visual layout in the editor.

4. Avoid duplicate visible dropzones - While multiple dropzones can share a name, only show one at a time to prevent confusion.

5. Combine with @portal for overlays - For modals and off-canvas menus, use @portal to position the dropzone content appropriately in the DOM.