Navigation Component

Navigation is an element component. Like all components in Landing Lion, you can add navigation to any page or page template by simply dragging it from the Right Pane and dropping it on the Canvas.

The navigation logo and navigation items are primarily used as links to guide a visitor around your website and other pages you've made in Landing Lion.

Editing Navigation

A Navigation Component is comprised of two things: "navigation logo" and "navigation items." In your page, navigation items are ordered left to right.

In the example below, there is a navigation logo placeholder and there are two navigation items: "Home" and "About."

Double-click the text to edit the navigation items.

Edit a selected navigation component in the Right Pane of the Page Editor:

1. Navigation Theme

A newly added navigation shares its theme with other added navigations. Uncheck "Use Shared Theme" to make its theme unique.

2. Navigation items

Add a navigation item by clicking the grey "+" (in the top right corner). Change the position of an item by dragging-and-dropping with its grey "||" handle on the left. To remove an existing item, click the red "x" to the right of it.

Each new navigation component starts with one item: "Home". Each item has the option to make something happen when its clicked. Click on the navigation item to change it's "On click" action.

3. Navigation Styles

Edit a navigation's color, size, and alignment. Click the left square to change its color. The available colors are determined by your page theme's color palette. You can choose one of the three sizes: small, medium, or large. For alignment, you can choose one of three: left, center, or right.

4. Hide Logo

Toggle this to dictate whether or not the navigation logo should be hidden.

5. Replace Logo Image & Alt Text

Replace the logo image and add alt text for this image. Alt text is used for accessibility and when the image cannot be displayed on the viewing device.

6. Logo "On Click"

Make something happen when this navigation's logo is clicked. By default, it is set to "None" - nothing happens when it is clicked. To make something happen, choose from one of the options accessible in the "On Click" dropdown: Open Link, Jump to Section, Download File, Print Image, Call Phone, Send Email, or Custom Code.

After you choose for something to happen, on-click custom configurations become available. Here we have set the on click event to "Open Link". Notice how this on click cannot be tracked as a conversion. This is different than the button component's on click. Select "Open In New Tab" to have open the configured url in a new browser tab: