The "Navigation" block guides visitors around your landing page and website.
About the "Navigation" block
With this block, you can have page visitors jump to a section on your page, download a file, open a link, and more when the navigation item is clicked.
If you're using this block to have visitors download a file or print an image, note that the following file types are supported:
- jpg
- png
In addition, the maximum file size is 5mb.
Like other blocks in the page builder, the "Navigation" block is available in the right pane.
Once this block is added to your layout, you can adjust its size and add styling to it. You can add, edit, duplicate, and delete a "Navigation" component.
Add the "Navigation" block to your page
1. From the page editor, drag the "Navigation" block to your page layout.
2. "Home" will appear as the default navigation text. To change this text, double-click the text on the page layout. Type your new text over the default text. Note that you can use the modal toolbar that appears to add styling to your text. For example, you can make the text all-caps, underlined, italicized, bold, change the font size, and more.
3. To add additional items to your navigation bar, click the "+" button next to "Navigation Items" in the right pane. Once this button is clicked, a new navigation item will be added to the block in your layout.
4. Items added to the "Navigation" block do not have any actions by default. This means nothing will happen when they are clicked. To make something happen when a navigation item is clicked:
- Click the block on your page layout once
- The right pane will open and display all style and action items. Click the navigation item in the right pane that you want to add an action to.
- A modal window will open with a dropdown field. Click the dropdown field then click the action you wish to apply to the navigation item. Actions you can choose from are: open link, jump to section, download file, print image, call phone, and send email
Note that to use the "Jump to Section" option, you need to add an ID to the section that you want to jump to.
5. When finished, click the checkmark button to save your work.
Style and edit the "Navigation" block
The "Navigation" block comes with the following edit and style options:
Navigation Theme
A newly added navigation shares its theme with other added navigations. Uncheck "Use Shared Theme" to make its theme unique.
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 block starts with one item: "Home." Each item has the option to make something happen when it's clicked. Click on the navigation item to change it's "On click" action.
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.
Hide Logo
Toggle this to dictate whether or not the navigation logo should be hidden.
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.
Logo On Click
Make something happen when this navigation's logo is clicked. By default, it is set to "None." This means that nothing will happen when it's 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.
Duplicate a "Navigation" block
You can duplicate any block on your page. To do so click the block you wish you duplicate on your page then click the duplicate icon in the top right bar.
Delete a "Navigation" block
You can delete any block from a page. To do so, click the block you wish to remove then click the trash icon in the top right bar.