Building a Navbar

Adding Menu Elements

Link Types

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 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.

Did this answer your question?