The Page Tile Menu allows you to create a visually appealing navigation bar or menu that links to different pages, components, external URLs, email addresses, phone numbers, or files.
Setting up a page tile menu
Adding a menu item
To add a new item (tile) to the menu:
Double-click on the Page Tile Menu component in the canvas to open its edit mode.
Click Add menu item.
In the Label field, enter the name you want displayed for that item (e.g., “About Us”, “Products”).
In the Link type dropdown, select the type of link this tile should use. See Section 3 (“Link types”) for details.
Configure the link type you selected (e.g., choose a page, enter a URL).
Repeat these steps for each menu item you need.
To edit an existing tile’s settings, click the Pen icon next to the item name.
Adding a submenu item
To nest one tile under another (create a submenu):
Double-click the Page Tile Menu component to enter edit mode.
Click and hold the equal icon (=) next to the menu item you want to move.
Drag it below the primary (parent) item you want it nested under.
Release it — the item becomes a submenu beneath the parent tile.
Rearranging menu items’ order
To change the order in which the tiles appear:
Double-click the Page Tile Menu component to enter edit mode.
Click and hold the equal icon (=) next to the tile you want to move.
Drag it upward or downward to the desired position in the list.
The order of this list determines how the navigation appears on your site.
Changing the tile's background image
The tile background images are automatically linked to the “cover photo” of the page when you select the Page link type for a tile. This means if you want to change the tile’s image:
Select the Page link type in the tile’s settings.
Then go to the page you linked in the Layers panel (left-side panel).
Click the Cogwheel icon next to that page in the page list.
In the Page information section, click Edit cover photo.
Choose Add image or select one from the free stock-images library.
After you update the cover photo, the tile background image reflects that change.
Link types
When you add a menu item, you must select one of the following link types. Each type has specific configuration options. Understanding each ensures proper navigation behaviour.
Link Type | Description | Configuration Options |
Page | Links to an internal page in your project. (help.vev.design) | Go to page: dropdown to select the pageAnimation: dropdown of transition animations |
Component | Links to a specific component (widget/section) in your project. (help.vev.design) | Widget select: dropdown to choose the component (the component must have a name in the Layers panel) |
External | Links to an external URL (outside your project). (help.vev.design) | External URL: field to enter the URLAdd rel="nofollow": toggle optionAdd rel="sponsored": toggle option |
Opens the user’s default email client with the given address. (help.vev.design) | Email: field for the recipient’s email addressSubject: field for the email subject | |
Phone | Initiates a phone call on supported devices. (help.vev.design) | Phone: field for the phone number |
File | Allows the user to download a pre-loaded file. (help.vev.design) | File to be downloaded: upload fieldTarget: choose behaviour (download, open in new tab, open in current tab)Download filename: field for the file’s name |
Tip: Pin the menu to the necessary pages at the top of the styles panel.