Keyboard Navigation for Next.js

NextStep provides built-in keyboard navigation, a unique feature that sets it apart from other onboarding libraries. This allows users to navigate through your tours using keyboard shortcuts, enhancing accessibility and user experience.

Default Keyboard Shortcuts

NextStep supports the following keyboard shortcuts by default:

→

Right Arrow

Move to the next step in the tour

←

Left Arrow

Move to the previous step in the tour

Esc

Escape

Skip the current tour

Pro Tip: Keyboard navigation makes your tours more accessible and provides a smoother experience for power users who prefer keyboard controls.

Disabling Keyboard Navigation

While keyboard navigation is enabled by default, you can disable it for specific steps using the blockKeyboardControl property in your step configuration:

// In your steps.tsx file
{
  tour: 'myTour',
  steps: [
    {
      icon: <>👋</>,
      title: 'Welcome',
      content: <>This is the first step</>,
      selector: '#welcome-element',
      side: 'top',
      // Keyboard navigation works normally for this step
    },
    {
      icon: <>✏️</>,
      title: 'Form Input',
      content: <>Please fill out this form</>,
      selector: '#form-element',
      side: 'bottom',
      // Disable keyboard navigation for this step
      blockKeyboardControl: true,
    },
    {
      icon: <>🎉</>,
      title: 'Completed',
      content: <>You've completed the tour!</>,
      selector: '#complete-element',
      side: 'right',
      // Keyboard navigation works normally for this step
    },
  ],
}