Menu with Combobox
Combining Menu and Combobox to create a dropdown menu with a search field that can be used to filter menu items.
Open preview in a new tab
Paragraph
Heading
List
Quote
Classic
Code
Preformatted
Pullquote
Table
Verse
Image
Gallery
Audio
Cover
File
Media & Text
Video
Buttons
Columns
Group
More
Page Break
Separator
Archives
Calendar
Categories
Latest Comments
Latest Posts
Page List
RSS
Search
Shortcode
Social Icons
Tag Cloud
1234567891011121314151617181920212223242526272829303132333435363738394041424344454647484950515253
import "./style.css";import { startTransition, useMemo, useState } from "react";import * as Ariakit from "@ariakit/react";import { matchSorter } from "match-sorter";import list from "./list.js";export default function Example() {const [searchValue, setSearchValue] = useState("");const matches = useMemo(() => {return matchSorter(list, searchValue, {baseSort: (a, b) => (a.index < b.index ? -1 : 1),});}, [searchValue]);return (startTransition(() => {setSearchValue(value);});}}>Add blockplaceholder="Search..."className="combobox"/>{matches.map((value) => (key={value}className="menu-item"/>))});}import "./style.css";import { startTransition, useMemo, useState } from "react";import * as Ariakit from "@ariakit/react";import { matchSorter } from "match-sorter";import list from "./list.js";export default function Example() {const [searchValue, setSearchValue] = useState("");const matches = useMemo(() => {return matchSorter(list, searchValue, {baseSort: (a, b) => (a.index < b.index ? -1 : 1),});}, [searchValue]);return (startTransition(() => {setSearchValue(value);});}}>Add blockplaceholder="Search..."className="combobox"/>{matches.map((value) => (key={value}className="menu-item"/>))});}
Related examples
Follow updates
Join 1,000+ subscribers and receive monthly updates with the latest improvements on Examples.