Filter Menu#

Use FilterMenu when you want to have an array of controls over a content. These controls usually changes how the content looks, thus filtering. FilterMenu layouts these controls in a horizontal line.

import { Popover } from "@headlessui/react";
import { FilterMenu } from "@tinka/react";
 
return (
  <div className="filter-menu-group">
    <span className="label">
      <span class="icon">filter menu icon</span>
      filter menu group label
    </span>
    <FilterMenu label="Sweetness" classNamePanel="z-[99999]">
      Put filter content here
      <Popover.Button>
        Popover.Button will close the popover when clicked.
      </Popover.Button>
    </FilterMenu>
  </div>
);

• Use filter-menu-group to group multiple FilterMenu together. You can render a label by adding an element with the label class.
• To let user choose one from many elements, a button group is recommended inside a filter menu panel (filter-menu-panel), always use btn-group-blue-outline-dark.
• filter-menu-button and filter-menu-panel are the underlying class names that style the button and the panel.
• consider assign a sensible z-index value via classNamePanel, by default it does not assign any z-index.

• This component is implemented with the PopOver component from @headlessui/react, the positioning is done via react-popper.

• Headless UI Popover
• Popper.js options