Free tools Windows power users keep installed
One-click scans. No signup required.
The right solution depends on where navigation is needed. A visitor-facing menu built with a block theme’s core Navigation block already includes documented keyboard support, so you normally do not add JavaScript. A custom React interface inside the WordPress block editor can use NavigableMenu from @wordpress/components. That editor component does not automatically change a theme’s front-end menu.
Choose the implementation that matches your interface
| Situation | Recommended starting point | Important constraint |
|---|---|---|
| Visitor-facing menu on a block-theme site | Core Navigation block | Keyboard support is built in for the core block; test the customized site. |
| Custom menu inside a block-editor React interface | NavigableMenu |
Children must be focusable and use suitable menu-item semantics; the component does not handle Tab. |
| Tab-based group of controls | TabbableContainer |
Each intended tab stop needs tabIndex="0". |
| Hierarchical two-dimensional editor grid | TreeGrid |
Specialized and explicitly experimental. |
| Movement among important labeled regions | navigateRegions |
Regions need focusability and concise labels; use landmark regions sparingly. |
Use the Navigation block for a visitor-facing menu
On a block-theme site, add or retain the core Navigation block instead of writing arrow-key handlers. WordPress documents this block as providing keyboard navigation without additional code, a nav landmark, and ARIA attributes such as aria-label and aria-hidden.
Check the actual published menu
- Open the site in a private browser window so editor-only controls do not affect the result.
- Use Tab and Shift+Tab to enter and leave the navigation.
- Use the arrow keys when the menu pattern calls for them, and confirm that focus remains visible.
- Activate links and buttons with Enter; activate buttons with Space as well.
Theme styling, custom markup, and menu-related plugins can change the behavior of an otherwise standard block. Treat the documented core behavior as the starting point and verify the deployed configuration.
Improve surrounding landmarks separately
Group, Template part, and Query blocks can provide landmarks. Selecting a main element can also generate a Skip to Content link. These features improve page navigation but do not replace a usable menu.
Quick wins for a faster PC:
Scan for outdated or missing drivers - takes under a minuteDriver Scan →Clear out junk files and repair common Windows errorsFree Scan →Fix the driver behind crashes, sound loss and screen glitchesFind Drivers →Add arrow movement to a custom block-editor React menu
For a menu rendered inside a custom block-editor interface, import NavigableMenu and a focusable control such as Button:
import { NavigableMenu, Button } from '@wordpress/components';
function ExampleMenu() {
return (
<NavigableMenu orientation="horizontal">
<Button variant="secondary">Item 1</Button>
<Button variant="secondary">Item 2</Button>
<Button variant="secondary">Item 3</Button>
</NavigableMenu>
);
}Select the correct orientation
orientation="horizontal"is for left/right movement.orientation="vertical"is for up/down movement and is the documented default.orientation="both"is for an interface that genuinely needs both axes.
Provide the expected semantics
Only focusable children can be navigated. By default, NavigableMenu uses role="menu" and expects children with menuitem, menuitemradio, or menuitemcheckbox roles. A control that merely looks like a menu item is not enough; inspect the rendered HTML and confirm that the child component exposes the intended role and focus behavior.
Rank #2
The component moves focus with arrow keys. It does not implement the Tab key, so users still need a predictable way to enter and leave the composite widget.
Use Tab navigation only when Tab is the intended pattern
TabbableContainer is a separate WordPress component for Tab-based navigation. Give every intended stop tabIndex="0". Do not add both arrow-key roving focus and a collection of unexpected Tab stops unless the interaction design clearly requires both; mixing patterns can make focus order difficult to understand.
What’s actually slowing this PC down?
Pick the symptom - the matching free tool is one click away.
Rank #3
Reserve TreeGrid for a real two-dimensional hierarchy
TreeGrid, together with TreeGridRow and TreeGridCell, supports arrow navigation and roving tabindex for hierarchical, two-dimensional interfaces such as a file-browser-style editor. It is not a shortcut for an ordinary site menu. WordPress marks this feature experimental, so its API and behavior may undergo breaking changes; avoid it for general navigation.
Move between significant regions with navigateRegions
When the goal is navigation among a small number of important page regions rather than items in one menu, use navigateRegions. Give each region a concise accessible label and make it focusable; the documented pattern uses tabIndex="-1". A region is a landmark, so apply this pattern only to meaningful sections, not every visual container.
Test keyboard behavior before publishing
- Disconnect the mouse and verify the expected entry and exit path with Tab and Shift+Tab.
- Use arrows only where the selected composite pattern calls for them, and confirm that focus does not disappear.
- Activate links and controls with Enter; verify button activation with Space.
- Check that every focusable control has a meaningful accessible name and that landmarks are announced sensibly.
- Test with a screen reader, such as NVDA with Firefox or VoiceOver with Safari.
If arrows move focus but Tab and Shift+Tab do not provide a sensible route into or out of the widget, reconsider the composite role. Depending on the control, a toolbar, menu, or listbox pattern may be more appropriate than an ad-hoc key handler.
The Bottom Line
For a block-theme site menu, use the core Navigation block and verify the live result. For a custom block-editor interface, use NavigableMenu with focusable, correctly typed children, and choose a separate component when the interaction is tab-based, region-based, or a genuinely hierarchical two-dimensional grid.
Recommended Free Tools
Quick Recap
Product prices and availability are accurate as of the date/time indicated and are subject to change. Any price and availability information displayed on Amazon at the time of purchase will apply.
