Rendering Menu using MenuItemRadio as children and the values prop from useMenuState to control the checked item.
MenuItemRadio
values
useMenuState
123456789101112131415161718192021222324252627282930313233343536373839import { Menu, MenuButton, MenuButtonArrow, MenuItemCheck, MenuItemRadio, useMenuState, } from "ariakit/menu"; import "./style.css"; export default function Example() { const menu = useMenuState({ gutter: 8, defaultValues: { sort: "popular" }, }); return ( <> <MenuButton state={menu} className="button"> Sort <MenuButtonArrow /> </MenuButton> <Menu state={menu} className="menu"> <MenuItemRadio name="sort" value="popular" className="menu-item"> <MenuItemCheck /> Popular </MenuItemRadio> <MenuItemRadio name="sort" value="newest" className="menu-item"> <MenuItemCheck /> Newest </MenuItemRadio> <MenuItemRadio name="sort" value="oldest" className="menu-item"> <MenuItemCheck /> Oldest </MenuItemRadio> </Menu> </> ); }
import { Menu, MenuButton, MenuButtonArrow, MenuItemCheck, MenuItemRadio, useMenuState, } from "ariakit/menu"; import "./style.css"; export default function Example() { const menu = useMenuState({ gutter: 8, defaultValues: { sort: "popular" }, }); return ( <> <MenuButton state={menu} className="button"> Sort <MenuButtonArrow /> </MenuButton> <Menu state={menu} className="menu"> <MenuItemRadio name="sort" value="popular" className="menu-item"> <MenuItemCheck /> Popular </MenuItemRadio> <MenuItemRadio name="sort" value="newest" className="menu-item"> <MenuItemCheck /> Newest </MenuItemRadio> <MenuItemRadio name="sort" value="oldest" className="menu-item"> <MenuItemCheck /> Oldest </MenuItemRadio> </Menu> </> ); }