> For the complete documentation index, see [llms.txt](https://docs.globo.io/llms.txt). Markdown versions of documentation pages are available by appending `.md` to page URLs; this page is available as [Markdown](https://docs.globo.io/mega-menu/manage-menu-items/manage-submenu-items/apply-masonry-layout.md).

# Apply masonry layout

## 🧱 How to Apply a Masonry Layout in Globo Mega Menu

Enhance your website's navigation by arranging submenu items in a dynamic, grid-like masonry layout. This design allows for a visually appealing and organized display of menu items.

### 🔹 Step 1: Create a Top-Level Menu Item with a Mega Menu

1. Open the **Globo Mega Menu** app in your Shopify admin panel.
2. Navigate to your existing menu or create a new one.
3. Add a new **top-level menu item** that will serve as the parent for your masonry layout.
4. Assign a **blank mega menu** to this top-level item to provide a foundation for the masonry arrangement.

<figure><img src="https://4255330929-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FbEuTzKnxaFKXxIId0jCW%2Fuploads%2FxhDVUOk69bR0TXvgpAtQ%2Fimage.png?alt=media&amp;token=0dd0c11d-d060-4b8b-ae13-f18b157a9975" alt=""><figcaption></figcaption></figure>

### 🔹 Step 2: Add 'Group of Items' Blocks

1. Within the mega menu editor, insert multiple **'Group of Items'** blocks.
2. The number of groups you add will correspond to the number of columns in your masonry layout. For instance, adding four groups will create a four-column layout.

<figure><img src="https://4255330929-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FbEuTzKnxaFKXxIId0jCW%2Fuploads%2FwH3Dc0sK5GTQvRGtT4wm%2F2025-05-12_11-27-35.png?alt=media&amp;token=5c61bcd5-cb4b-48d7-81ca-77b8398ab368" alt=""><figcaption></figcaption></figure>

### 🔹 Step 3: Adjust the Width of Each Group

1. Customize the width of each **'Group of Items'** block to ensure they align properly and create a balanced masonry effect.
2. Proper width adjustment is crucial for achieving the desired visual structure.

<figure><img src="https://4255330929-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FbEuTzKnxaFKXxIId0jCW%2Fuploads%2FlPB9iK2QTS22XmcvVqSF%2F2025-05-12_11-29-40.png?alt=media&amp;token=d19b7f1a-19fc-47c8-b3c3-16fefefbff00" alt=""><figcaption></figcaption></figure>

### 🔹 Step 4: Add Content to Each Group

1. Click the **Add block** within each **'Group of Items'** block to add content.
2. Set the width of each content block to **12** to maintain consistent sizing and prevent the blocks from appearing too small.

<figure><img src="https://4255330929-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FbEuTzKnxaFKXxIId0jCW%2Fuploads%2FlEHcf1s6UjyUfBoBIdBI%2Fimage.png?alt=media&amp;token=7ae56686-a2e0-4c92-a412-febdcfab1b04" alt=""><figcaption></figcaption></figure>

### ✅ Final Result

By following these steps, your submenu will display items in a masonry layout, enhancing the visual appeal and organization of your website's navigation.

**💬 Need help?**

Email us at **📧 <contact@globo.io>** - we’re happy to assist!!