Chat Nav

Props

• label: string (required) -- accessible name for the navigation landmark
• children: slot (required) -- ChatList with ChatListItem components
• ...restProps: unknown -- additional attributes spread onto the <nav> element

Keyboard Interactions

• Tab: Focus moves between interactive elements in the chat list
• Enter: Activates the focused chat list item or link
• Arrow Down: Move focus to the next chat list item
• Arrow Up: Move focus to the previous chat list item

ARIA

• <nav> with aria-label creates a navigation landmark for the chat list
• <ol> conveys the ordered relationship of the chat entries
• Implicit listitem role from semantic <li> elements
• aria-current on the currently selected chat item

When to Use

• Use as a navigation landmark for chat conversations in messaging applications, customer support interfaces, or collaborative platforms.
• Use when users need to browse and select between multiple chat threads.
• Use when conversations should be listed in a navigable, ordered structure with aria-current support.
• Use when the chat interface needs a semantic <nav> landmark for screen reader users.

When Not to Use

• Do not use for non-chat navigation -- use ContentsNav for page sections or TreeNav for hierarchical navigation.
• Do not use for a single conversation thread -- render ChatList directly without the <nav> wrapper.
• Do not use for displaying system notifications -- use Alert or Notification instead.

Headless

This component provides a <nav> landmark with aria-label containing an <ol> for ordered chat entries, with zero visual styling. The consumer is responsible for all CSS including chat item layout, active/selected states, unread indicators, avatar positioning, and responsive design.

Styles

The consumer provides all CSS styling. The component renders with a .chat-nav class for targeting. No default styles are included -- this is a fully headless component.

Testing

• Verify the component renders a <nav> element with class chat-nav
• Verify <nav> with aria-label creates a navigation landmark
• Verify keyboard interactions work correctly
• Verify pass-through attributes are applied

Advice

• Designers: Show clear visual distinction between read and unread conversations. Display the most recent message preview and timestamp for each chat entry. Ensure the currently selected conversation is visually highlighted.
• Developers: Always provide a descriptive label prop (e.g., "Chat conversations") for the navigation landmark. Use aria-current on the currently active chat item.

Implementation Notes

• Renders a <nav> element for the navigation landmark
• aria-label on the <nav> provides an accessible name (e.g. "Chat conversations")
• Consumer places ChatList component and ChatListItem components as children
• Each ChatListItem typically contains a ChatMessage component
• Spreads restProps onto the <nav> for consumer customization

Composition

ChatNav follows the Nav / List / ListItem composition pattern:

• ChatNav -- outer <nav> container providing the navigation landmark and accessible label.
• ChatList -- <ol> list conveying the ordered relationship of chat entries.
• ChatListItem -- individual <li> items, each typically containing a ChatMessage component.
• ChatMessage -- <article> element displaying one chat message with author, time, and content.

<ChatNav label="Chat conversations">
  <ChatList>
    <ChatListItem>
      <ChatMessage>...</ChatMessage>
    </ChatListItem>
    <ChatListItem>
      <ChatMessage>...</ChatMessage>
    </ChatListItem>
  </ChatList>
</ChatNav>

Related components

• chat-list — an ordered list of chat list item components
• chat-list-item — one chat list item component, typically containing one chat message component
• chat-message — a chat message shows one chat conversation message entry and all its data, including the author avatar, author name, time, etc.

References

• WAI-ARIA Navigation Landmark: https://www.w3.org/WAI/ARIA/apg/patterns/landmark/