Help Center Search Navbar Block for React

Edit ENTRIES at the top of the file: each row is an article or a category, with a title, a category, a note under the title ("3 min read", "12 articles"), a group label and a value. Picking a row puts its title in the field, as an autocomplete does. To open the page, pass onValueChange to Autocomplete: it receives the picked value, which you can map to a route. To search a real index, replace matching(query) with your own results, fetched or local; the popup renders whatever the collection holds, in the groups the rows name.

The collection is rebuilt from the typed text on every change. A row matches when its title or its category holds the text, compared without case or accents, so "billing" finds the Billing category and both Billing articles, and "tickets" finds the two articles with tickets in their titles. A group with no match disappears with its label. The matching letters sit on a light tint of the text colour, so the words keep their contrast in every theme.

The popup says "No articles match" followed by the text, in a bdi so it reads right in any direction, and shows an Ask support row as a link. Because it is a plain link inside the popup, a keyboard user reaches the same destination through the Contact support button in the bar (or the sheet on a phone), which stays one Tab away. Point both at your contact page.

The field is a combobox with an accessible name and the popup is a listbox of options in labelled groups. The arrow keys move through the rows, Enter picks one and Escape closes the popup, leaving focus in the field. The field declares the "/" key with aria-keyshortcuts, and the key cap is hidden from screen readers because it's a hint, not a control. The search sits in a search landmark named Help center, and the category links in a nav named Main with the current one marked aria-current="page". The popup behaves the same on every library: it is built on the same combobox everywhere.

Below the md breakpoint the bar shows the wordmark, a search button and a menu button. The search button says whether the search is open and which landmark it controls; pressing it (or "/") replaces the bar with the field, which takes the keyboard, and turns the button into a close button in the same place. Escape closes the popup first and ends the search second, and focus returns to the search button. The menu button opens a sheet from the top whose header lines up with the bar, with the four categories and Contact support; choosing a link closes it and Escape returns focus to the menu button. Nothing wraps at 320 pixels, and the popup is as wide as the screen allows.

The navbar is the page's first block: its + marks and rails line up with every block under it, its top rule falls on the window's top edge, and it draws no bottom border, because the next block's top rule is its bottom edge. To keep the bar in view while the page scrolls, add sticky top-0 z-40 bg-background/80 backdrop-blur to the header; the popup still opens under it.

Every link points at #: point them at your pages. Contact support renders the link it's given with render, with nativeButton={false}.