lab components / Navigation

Search navigation

Allow users to quickly search navigation menu items by keyboard within a popover

This is a Lab component!

That means it doesn't satisfy our definition of done and may be changed or even deleted. For an exact status, please reach out to the Fancy team through the dev_fancy or ux_fancy channels.

import { SearchNavigation } from "@siteimprove/fancylab";

#Examples

A SearchNavigation allows the user to choose a specific navigation item by browsing a flattened list of them.

The items must implement the properties defined in type SearchableNavigationItem.

CodeHTML output

Theme: agentic-ai-2025

<SearchNavigation
	hotkey="m"
	items={[
		{
			id: "myMenuA",
			title: "My Menu A",
			children: [
				{ id: "myLinkPlain", title: "My Link plain", href: "http://example.com" },
				{
					id: "myLinkOpenNew",
					title: "My Link openNew",
					href: "http://example.com",
					openNew: true,
				},
				{ id: "myButton", title: "My Button", onClick: () => alert("clicked") },
			],
		},
		{
			id: "myMenuB",
			title: "My Menu B",
			children: [
				{
					id: "mySubA",
					title: "My Sub A",
					children: [
						{
							id: "link",
							title: "Link",
							href: "http://example.com",
						},
					],
				},
				{
					id: "mySubB",
					title: "My Sub B",
					children: [
						{
							id: "mySubBB",
							title: "My Sub BB",
							children: [
								{
									id: "myItemSubBB",
									title: "My Item Sub BB",
									href: "http://example.com",
								},
							],
						},
						{
							id: "mySubBC",
							title: "My Sub BC",
							href: "http://example.com",
						},
					],
				},
			],
		},
		{
			id: "myMenuC",
			title: "My Menu C",
		},
	]}
/>

#Properties

CodePropsHTML output

Theme: agentic-ai-2025

Property	Description	Defined
itemsRequired	`object[]`List of strings or objects to display in the menu	YesNo
labelOptional	`string`Optional label text of the search button	YesNo
placeholderOptional	`string`Optional placeholder text of the search field	YesNo
hotkeyOptional	`string`Optional character of hotkey for invoking the search	YesNo
navigateOptional	`function`Custom navigation function, in case the user has a better way of navigating than setting window.location.href	YesNo
dialogSelectorsOptional	`string[]`Optional list of selectors to identify dialogs (e.g. modals and sidepanels) that should disable the hotkey	YesNo
data-observe-keyOptional	`string`Unique string, used by external script e.g. for event tracking	YesNo
classNameOptional	`string`Custom className that's applied to the outermost element (only intended for special cases)	YesNo
styleOptional	`object`Style object to apply custom inline styles (only intended for special cases)	YesNo