👍🏽 Adding an arrow key navigation
From the top menu bar, click on the Add Menu (
Shortcut: M)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
Text:
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
Icons:
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
Parameter | Description |
Main menu | Dropdown menu that will allow you to create as many menus as needed. |
Label | The title of the menu item |
Link Type | 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 |
Animation | Transition animation when linking to the next page |
Add menu item | Creates a new menu item |
Previous text | The label next to the Previous arrow |
Next text | Label next to the Next arrow |