Vev Help Center
Search…
Navbar & Menus
Add and customize menus and navigation to your canvas
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.
In this lesson:
  • Building a Navbar
  • Adding Menu Elements
  • Customizing and Styling
  • Understand the desktop and mobile approach
  • Sticky positioning
  • Adding a dropdown
  • Custom navigation using Animations and Interactions
  • Examples

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
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 sponsored value
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.
Last modified 2mo ago