---

title: BaseKeyboardNavigation

---

# BaseKeyboardNavigation

Base component to handle keyboard navigation for elements inside it. It has a required slot to
include the navigable elements.

## Props

| Name                                 | Description                                                                                                                                            | Type                                          | Default                                                                                                               |
| ------------------------------------ | ------------------------------------------------------------------------------------------------------------------------------------------------------ | --------------------------------------------- | --------------------------------------------------------------------------------------------------------------------- |
| <code>navigationHijacker</code>      | An array of TakeNavigationControl objects defining when to<br />take control of the keyboard navigation.                                               | <code>TakeNavigationControl[]</code>          | <code>() => [<br /> { xEvent: 'UserPressedArrowKey', moduleName: 'searchBox', direction: 'ArrowDown' },<br />]</code> |
| <code>eventsForDirectionLimit</code> | An EventsForDirectionLimit to emit when the user is already at the furthest element<br />in a direction and tries to keep going on the same direction. | <code>Partial<EventsForDirectionLimit></code> | <code>() => ({ ArrowUp: 'UserReachedEmpathizeTop' })</code>                                                           |

## Slots

| Name                 | Description                  | Bindings<br />(name - type - description) |
| -------------------- | ---------------------------- | ----------------------------------------- |
| <code>default</code> | (Required) Container content | None                                      |

## Events

An event that the component will emit:

- [`UserReachedEmpathizeTop`](https://github.com/empathyco/x/blob/main/packages/x-components/src/wiring/events.types.ts):
  the event emitted by default when the container reaches its top navigation, but more events can be
  emitted for each direction using the `eventsForDirectionLimit` prop.

## Examples

This component has a slot to inject other components inside it. The component expects a required
prop, navigationHijacker, which is an array of objects containing: the xEvent to listen to, the
moduleName in charge of emitting the event and to which direction it should react to; to take
control of the navigation. It has another prop, optional in this case, to emit an xEvent when
reaching the navigation limit in any direction.

### Basic Usage

```vue
<template>
  <BaseKeyboardNavigation>
    <QuerySuggestions />
  </BaseKeyboardNavigation>
</template>

<script setup>
import { BaseKeyboardNavigation } from "@empathyco/x-components";
import QuerySuggestions from "./QuerySuggestions.vue";
</script>
```

### Defining multiple conditions to take navigation's control

```vue
<template>
  <BaseKeyboardNavigation
    :navigationHijacker="[
      {
        xEvent: 'UserPressedArrowKey',
        moduleName: 'searchBox',
        direction: 'ArrowDown',
      },
      {
        xEvent: 'UserPressedArrowKey',
        moduleName: 'facets',
        direction: 'ArrowRight',
      },
    ]"
  >
    <QuerySuggestions />
  </BaseKeyboardNavigation>
</template>

<script setup>
import { BaseKeyboardNavigation } from "@empathyco/x-components";
import QuerySuggestions from "./QuerySuggestions.vue";
</script>
```

### Defining events to emit when reaching a navigation limit

```vue
<template>
  <BaseKeyboardNavigation
    :navigationHijacker="[
      {
        xEvent: 'UserPressedArrowKey',
        moduleName: 'searchBox',
        direction: 'ArrowDown',
      },
    ]"
    :eventsForDirectionLimit="{
      ArrowUp: 'UserReachedEmpathizeTop',
    }"
  >
    <QuerySuggestions />
  </BaseKeyboardNavigation>
</template>

<script setup>
import { BaseKeyboardNavigation } from "@empathyco/x-components";
import QuerySuggestions from "./QuerySuggestions.vue";
</script>
```