Vev is great for single-page experiences but when you want to create a more robust site, you will need to utilize menus and navigation.
Building a Navbar
In Vev, you can create a navbar by using sections and elements available in the Add Menu. To get started, you need to understand how to build and structure your section and elements.
Basic Navbar Setup
For the traditional type of navigation, it's best to split the build into two sections. One to group the Navigation elements and another to start to your page or hero section.
For this setup:
Create two Sections
One for your Navbar Section (50-70px height)
A second for your Header Section below (900px height)
In the Navbar Section, you can add elements to start building
Use the Image element, to add and position your logo
Add the Standard Menu element (more on that below)
Transparent Navbar
To customize your Navbar to be transparent on top of your Header section, you can build a Navbar frame in one section.
For this setup:
Create one Section (900-1000px height)
Create a Frame (this will be our Navbar frame) or group your elements within the Header Section
In the Navbar Frame, add elements to start building
Use the Image element, to add and position your logo
Add the Standard Menu element (more on that below)
Style your Navbar frame background to be 0% fill or simply remove the background altogether, this will ensure the menu is transparent.
Adding Menu Elements
Vev comes preset with multiple options for menus to set up your navigation, let's explore the options.
Overview
Element
Description
Standard Menu
How most sites display their desktop menu with text links
Burger Menu
Best for tablet and mobile
Page Tile Menu
Best for presentations, when you need to see a preview of the page/slide
Fan Menu
Best for contextual menus
First, to find and add the menu elements
Navigate to the Add Menu and search for the specific element name or filter by 'Navigation'
Click and drag onto your canvas
Double click on the element to open up the parameter options
Menu parameters
All menu elements share the same parameters for any type of navigation or link you want to create.
Note: These parameters apply to all navigation elements, so make sure to read through!
Parameter
Options
Main menu
Add the main menu and other multiple menu variations
Add menu item
Add another item to your menu. Each menu has a Label and a Link
Label
Label for the menu item. Defaults to page title if linking to a page in your project.
Link Type
See details in the Link Type table
Standard Menu
The standard menu element makes it easy to add text links to the desktop and tablet versions of your site. Depending on the number of links, you may be able to use this menu on mobile but we advise adding a burger menu that will only be visible on mobile.
Link Types
A detailed list of link type options for each menu element.
Parameter | Options |
Link type - Page | Link to a different page within the same project |
Link type - Element | Link to an Element named in your Layers, on a page in your project |
Link type - External | Link to an external URL |
Link type - Email | Create a mailto: link opening the client's local mail application handler for emails |
Link type - Phone | Create a tel: link opening the client's local application handler for phone numbers |
Link type - Page > Go to Page | Select which page in the project you want to link to |
Link type - Page > Animation | Transition to the next page using an animation preset such as "Slide in" or "Fade out" |
Link type - Element > Widget select | Select the Element or Section named in your Layers panel, that you want the user to be taken to. |
Link type - External > External URL | The URL of the external page to send the user to. |
Link type - External > External URL > Open page in new tab | Toggle whether or not the link should open in a new tab or not |
Link type - External > External URL > Add rel=nofollow? | Indicates that the current document's original author or publisher does not endorse the referenced document or page. |
Link type - External > External URL > Add rel=sponsored? | Google prefers that you mark Mark links that are advertisements or paid placements (commonly called paid links) with the |
Link type - External > Email > Email Address | The email address of the recipient |
Link type - External > Email > Email Subject | The default subject for the email to be sent |
Link type - External > Phone > Phone Number | The phone number the link should open to |
Link type - External > File > Upload file | Select or drop a file for a file link |
Link type - External > File > Target | Select how the browser should open the linked file |
Link type - External > File > Download filename | Set the filename for the user when downloading the linked file. |