👍🏽 Adding an arrow key navigation
From the top menu bar, click on the Add Menu (
Search for and select Arrow Key Navigation
Click and drag the element onto your canvas
Tip: Pin the Arrows to the necessary pages at the top of the styles panel.
Adding a Menu Item
Double-click the element
Click on Add Menu Item
Write the menu item's name in the Label field
Select Page in the Link type dropdown menu
Select your page in the Go to page dropdown menu
You'll find an Add menu item button at the end of the Navigation Controls section within the element setting's panel, you can repeat these steps to link all the necessary pages to your menu.
Click the Pen icon next to the menu item if you need to change the settings.
Tip: More link types are available in the Link types dropdown menu, however, the Page link type is the most used with this element.
Arranging The Menu Item's Order
The navigation pager order is affected by the order of your menu items in the list. Follow the steps below to arrange them when needed.
Double-click the Arrow Key Navigation element
Click and hold the equal icon (=) next to the menu item you want to move
Drag it up or below the item you need
🎨 Styling an arrow key navigation element
Background: Change the arrow's container background color
Arrow: Change the arrow's size and color
Arrow Text: Style the Previous and Next texts
Hover Arrow: Change the arrow's color on hover
Disabled Arrow: Make the arrow that can't go any further a different color.
Margin: Add margin to arrow's text
Padding: Add padding to the arrow's text
Border: Set a border color, opacity, and line weight for the arrows
Opacity: Set the disabled arrow's transparency
Set custom shape: Replace the arrows icons with a shape or a custom SVG
Set custom image: Replace the arrows icons with an image
⚙️ Configuration Options
Dropdown menu that will allow you to create as many menus as needed.
The title of the menu item
Dropdown menu where you can choose your link type (Page, Element, External, Email, Phone, File).
Go to page
The page the menu item should link to
Transition animation when linking to the next page
Add menu item
Creates a new menu item
The label next to the Previous arrow
Label next to the Next arrow