# Image menus

Beautiful image based menus are simple to create in Story. Easily convert any top-level menus that have no nested items into an image-based drop-down: 

![](/files/gG0CN4HANIGK0bnK1NsL)

### How to

Begin first by building your main header navigation with the Shopify Navigation editor. Next, choose a top-level menu that does not have any nested menu items. 

Example:

![Our Story does not contain any nested menu items like Shop](/files/5FnnATZ5GyvU0IfaI9R2)

Next, in the Theme Editor under Heading, choose add block. Add as many image blocks as disired for your menu. We will add three image blocks:

![](/files/piCusaKSr1JTIEBqw0lO)

Configure each image block by mapping the item number to the navigation menu position. In our example, "Our Story" is Item 2. 

![](/files/1oKHji0YqyVW3l3bGFZd)

After choosing the Link position in main menu, choose an image and configure the size using the Image scaling ratio slider and fine tune the image with the Wide image toggle and Position settings:

![Image scaling ratio adjusts the size of the images from wide to tall](/files/9zcSpd2EALu63rTJ807i)

Complete the call-to-action settings by adding a header, text (optional) and link. Configure the link color by choosing an option from the Text color drop-down. 

Complete all settings for each image block. 

### Sorting and hiding

Use drag-and-drop to rearrange the image blocks:

![](/files/5suMBmKNFh3RpHt1HcLd)

The eye icon can be used to toggle image blocks.

### Mobile

The mobile drawer will display each image block menu items in a stacked format:

![](/files/k0rF3Lf2X7bxvOvQUc4X)


---

# Agent Instructions: Querying This Documentation

If you need additional information that is not directly available in this page, you can query the documentation dynamically by asking a question.

Perform an HTTP GET request on the current page URL with the `ask` query parameter:

```
GET https://story.groupthought.com/story-v2/header/image-menus.md?ask=<question>
```

The question should be specific, self-contained, and written in natural language.
The response will contain a direct answer to the question and relevant excerpts and sources from the documentation.

Use this mechanism when the answer is not explicitly present in the current page, you need clarification or additional context, or you want to retrieve related documentation sections.