---
url: https://talkjs.com/docs/UI_Components/Theme/System_components/KeyboardNavigationListItem
title: '<KeyboardNavigationListItem>'
minidoc-source: js
minidoc-lib: components
---

The `<KeyboardNavigationListItem>` system component marks an item as participating in its parent list's keyboard navigation.

The ConversationList wraps its conversations in a component that manages keyboard navigation. Each conversation inside that list should use `<KeyboardNavigationListItem>`, so arrow keys can move focus between conversations.

## Safari focus styling

Safari does not reliably update `:focus-visible` when an item first receives focus through a click and TalkJS's internal keyboard navigation list component then moves focus programmatically. TalkJS therefore adds a `t-keyboard-navigation-active` attribute to the list container while arrow-key navigation is being used. Styling a normally focused item that is a descendant of that marker preserves the keyboard focus styling without showing it for ordinary pointer focus. See [WebKit bug 225148](https://bugs.webkit.org/show_bug.cgi?id=225148) for more details.

When styling a `<KeyboardNavigationListItem>`, include the container marker as a fallback alongside your normal `:focus-visible` selector:

```css
.t-conversation-name-link:focus-visible::after,
[t-keyboard-navigation-active] .t-conversation-name-link:focus::after {
  /* Focus styling */
}
```

## KeyboardNavigationListItemProps
/** */
export declare interface KeyboardNavigationListItemProps extends React.AllHTMLAttributes<HTMLElement>{
[attributeName: `t-${string}`]: string|undefined;
/** The HTML element to render.
Defaults to `"div"`. */
as?: keyof JSX.IntrinsicElements & keyof HTMLElementTagNameMap;
/** Content rendered inside the keyboard navigation list item. */
children: React.ReactNode;
}