Skip to main content
Arrow Key Navigation

Allows you to navigate between the pages of the project using the left and right keyboard arrows

Diego Muralles avatar
Written by Diego Muralles
Updated over a week ago

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

Did this answer your question?