How to get selected menu item from menu

[afrazahmmad]

I want to show the selected option in the menu but I could not find that in the docs.

<Menu.Items className="origin-top-right  border z-10 p-4   rounded-lg  w-full bg-white   text-secondary border-[#777E90] absolute  mt-2">
                <div className="space-y-3">
                    {Data.map((item, i) => (

                        <Menu.Item key={i} onClick={() => {onChangeFilters(item.value)}}>

                            {({ active }) => (
                                <a
                                    key={item.title}
                                    href="#"
                                    className={classNames(
                                        i === 0
                                            ? 'text-secondary'
                                            : 'text-[#29303A]',
                                        active ? '' : '',
                                        'block text-base ',
                                    )}>
                                    {item.title}
                                    {selected}
                                </a>
                            )}
                        </Menu.Item>
                    ))}
                </div>
            </Menu.Items>

[RobinMalfait]

Hey! Thank you for your question!
Much appreciated! 🙏

For the Menu there is only an active (when you hover over it with your mouse or focus it with your keyboard). There is no selected because the Menu doesn't have a value attached to it.

The Listbox has an active and a selected because it does have a value attached to it. Active is the one that's currently hovered/focused, selected is the one that is equal to your value on the Listbox component.