Quickly move through your menu items using the arrow key navigation menu. It ensures that users who rely on keyboard navigation, including those with mobility impairments, can easily navigate the menu allowing them to keep their focus on the task at hand without the distraction of moving a mouse pointer.
Tip: Pin the Arrows to the necessary pages at the top of the styles panel. Learn how to do it here.
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 |
Open page in a new tab | Open the selected page in a new browser's tab. |
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 |