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
    <FilterMenu label="Sweetness" classNamePanel="z-[99999]">
      Put filter content here
        Popover.Button will close the popover when clicked.


  • 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.

Technical Implementation#

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