---
title: Primary Select Menu
category: Application
paid: false
isActive: true
ltr: {"vue":{"vueTail":[],"vueCss":[]},"preview":"function App() {\n  \n  const menuItems = [\n    \"Software engineer\",\n    \"Project manager\",\n    \"IT manager\",\n    \"UI / UX designer\",\n    \"Full-stack engineer\",\n    \"Front-end enginner\",\n    \"Marketing manager\",\n    \"embded system enginner\",\n  ];\n\nconst SelectItem = React.forwardRef(\n  ({ children, className, value }, forwardedRef) => {\n    // If you want to make this component more customizable you can use classnames and tailwind-merge library.\n    return (\n      <Select.Item\n        className=\"flex items-center justify-between px-3 cursor-default py-2 duration-150 text-gray-600 data-[state=checked]:text-indigo-600 data-[state=checked]:bg-indigo-50 data-[highlighted]:text-indigo-600 data-[highlighted]:bg-indigo-50 data-[highlighted]:hover:text-indigo-600 data-[highlighted]:hover:bg-indigo-50 outline-none\"\n        value={value}\n        ref={forwardedRef}\n      >\n        <Select.ItemText>\n          <div className=\"pr-4 line-clamp-1 flex items-center gap-2\">\n            {children}\n          </div>\n        </Select.ItemText>\n        <div className=\"w-6\">\n          <Select.ItemIndicator>\n            <svg\n              xmlns=\"http://www.w3.org/2000/svg\"\n              className=\"w-5 h-5 text-indigo-600\"\n              viewBox=\"0 0 20 20\"\n              fill=\"currentColor\"\n            >\n              <path\n                fillRule=\"evenodd\"\n                d=\"M16.707 5.293a1 1 0 010 1.414l-8 8a1 1 0 01-1.414 0l-4-4a1 1 0 011.414-1.414L8 12.586l7.293-7.293a1 1 0 011.414 0z\"\n                clipRule=\"evenodd\"\n              />\n            </svg>{\" \"}\n          </Select.ItemIndicator>\n        </div>\n      </Select.Item>\n    );\n  }\n);\n\n  return (\n      <Select.Root>\n        <div className=\"w-72 max-w-full mx-auto\">\n          <Select.Trigger className=\"w-full inline-flex items-center justify-between px-3 py-2 text-sm text-gray-600 bg-white border rounded-lg shadow-sm outline-none focus:ring-offset-2 focus:ring-indigo-600 focus:ring-2\">\n            <Select.Value placeholder=\"Select your job\" />\n            <Select.Icon className=\"text-gray-400\">\n              <svg\n                xmlns=\"http://www.w3.org/2000/svg\"\n                className=\"w-5 h-5\"\n                fill=\"none\"\n                viewBox=\"0 0 24 24\"\n                stroke=\"currentColor\"\n              >\n                <path\n                  strokeLinecap=\"round\"\n                  strokeLinejoin=\"round\"\n                  strokeWidth={2}\n                  d=\"M8 9l4-4 4 4m0 6l-4 4-4-4\"\n                />\n              </svg>\n            </Select.Icon>\n          </Select.Trigger>\n          <Select.Portal>\n            <Select.Content\n              position=\"popper\"\n              avoidCollisions={false}\n              className=\"w-[var(--radix-select-trigger-width)] mt-3 overflow-y-auto bg-white border rounded-lg shadow-sm text-sm\"\n            >\n              <Select.Viewport className=\"\">\n    <SelectItem value='Software engineer'>\n      Software engineer\n    </SelectItem>\n\n    <SelectItem value='Project manager'>\n      Project manager\n    </SelectItem>\n\n    <SelectItem value='IT manager'>\n      IT manager\n    </SelectItem>\n\n    <SelectItem value='UI / UX designer'>\n      UI / UX designer\n    </SelectItem>\n\n    <SelectItem value='Full-stack engineer'>\n      Full-stack engineer\n    </SelectItem>\n\n    <SelectItem value='Front-end enginner'>\n      Front-end enginner\n    </SelectItem>\n\n    <SelectItem value='Marketing manager'>\n      Marketing manager\n    </SelectItem>\n\n    <SelectItem value='embded system enginner'>\n      embded system enginner\n    </SelectItem>\n\n              </Select.Viewport>\n            </Select.Content>\n          </Select.Portal>\n        </div>\n      </Select.Root>\n  );\n};\n","html":{"htmlTail":[]},"react":{"jsxTail":[{"label":"App.jsx","code":"import * as Select from \"@radix-ui/react-select\";\nimport React from \"react\";\n\nexport default () => {\n  const menuItems = [\n    \"Software engineer\",\n    \"Project manager\",\n    \"IT manager\",\n    \"UI / UX designer\",\n    \"Full-stack engineer\",\n    \"Front-end enginner\",\n    \"Marketing manager\",\n    \"embded system enginner\",\n  ];\n\n  return (\n      <Select.Root>\n        <div className=\"w-72 max-w-full\">\n          <Select.Trigger className=\"w-full inline-flex items-center justify-between px-3 py-2 text-sm text-gray-600 bg-white border rounded-lg shadow-sm outline-none focus:ring-offset-2 focus:ring-indigo-600 focus:ring-2\">\n            <Select.Value placeholder=\"Select your job\" />\n            <Select.Icon className=\"text-gray-400\">\n              <svg\n                xmlns=\"http://www.w3.org/2000/svg\"\n                className=\"w-5 h-5\"\n                fill=\"none\"\n                viewBox=\"0 0 24 24\"\n                stroke=\"currentColor\"\n              >\n                <path\n                  strokeLinecap=\"round\"\n                  strokeLinejoin=\"round\"\n                  strokeWidth={2}\n                  d=\"M8 9l4-4 4 4m0 6l-4 4-4-4\"\n                />\n              </svg>\n            </Select.Icon>\n          </Select.Trigger>\n          <Select.Portal>\n            <Select.Content\n              position=\"popper\"\n              avoidCollisions={false}\n              className=\"w-[var(--radix-select-trigger-width)] mt-3 overflow-y-auto bg-white border rounded-lg shadow-sm text-sm\"\n            >\n              <Select.Viewport className=\"\">\n                {menuItems.map((item, idx) => (\n                  <SelectItem key={idx} value={item}>\n                    {item}\n                  </SelectItem>\n                ))}\n              </Select.Viewport>\n            </Select.Content>\n          </Select.Portal>\n        </div>\n      </Select.Root>\n  );\n};\n\nconst SelectItem = React.forwardRef(\n  ({ children, className, ...props }, forwardedRef) => {\n    // If you want to make this component more customizable you can use classnames and tailwind-merge library.\n    return (\n      <Select.Item\n        className=\"flex items-center justify-between px-3 cursor-default py-2 duration-150 text-gray-600 data-[state=checked]:text-indigo-600 data-[state=checked]:bg-indigo-50 data-[highlighted]:text-indigo-600 data-[highlighted]:bg-indigo-50 data-[highlighted]:hover:text-indigo-600 data-[highlighted]:hover:bg-indigo-50 outline-none\"\n        {...props}\n        ref={forwardedRef}\n      >\n        <Select.ItemText>\n          <div className=\"pr-4 line-clamp-1\">{children}</div>\n        </Select.ItemText>\n        <div className=\"w-6\">\n          <Select.ItemIndicator>\n            <svg\n              xmlns=\"http://www.w3.org/2000/svg\"\n              className=\"w-5 h-5 text-indigo-600\"\n              viewBox=\"0 0 20 20\"\n              fill=\"currentColor\"\n            >\n              <path\n                fillRule=\"evenodd\"\n                d=\"M16.707 5.293a1 1 0 010 1.414l-8 8a1 1 0 01-1.414 0l-4-4a1 1 0 011.414-1.414L8 12.586l7.293-7.293a1 1 0 011.414 0z\"\n                clipRule=\"evenodd\"\n              />\n            </svg>{\" \"}\n          </Select.ItemIndicator>\n        </div>\n      </Select.Item>\n    );\n  }\n);\n"}],"jsxCss":[{"code":"import { useEffect, useRef, useState } from \"react\"\n\nexport default () => {\n\n    const menuItems = [\n        \"Software engineer\", \"Project manager\", \"IT manager\",\n        \"UI / UX designer\", \"Full-stack engineer\", \"Front-end enginner\",\n        \"Marketing manager\", \"embded system enginner\"\n    ]\n\n    const [selectedItem, setSelectedItem] = useState({\n        item: menuItems[0],\n        idx: 0\n    })\n    const [state, setState] = useState(false)\n    const selectMenuRef = useRef()\n\n    useEffect(() => {\n        \n        const handleSelectMenu = (e) => {\n            if (!selectMenuRef.current.contains(e.target)) {\n                setState(false)\n            }\n        }\n\n        document.addEventListener('click', handleSelectMenu)\n\n    }, [])\n\n    return (\n        <div className=\"select-menu-primary\">\n            <button ref={selectMenuRef} className=\"select-menu-btn\" \n                aria-haspopup=\"true\" \n                aria-expanded=\"true\"\n                onClick={() => setState(!state)}\n            >\n                { selectedItem.item }\n                <svg xmlns=\"http://www.w3.org/2000/svg\" fill=\"none\" viewBox=\"0 0 24 24\" stroke=\"currentColor\">\n                    <path strokeLinecap=\"round\" strokeLinejoin=\"round\" strokeWidth={2} d=\"M8 9l4-4 4 4m0 6l-4 4-4-4\" />\n                </svg>\n            </button>\n            \n            {\n                state ? (\n                    <div className=\"items-container\">\n                        <ul className=\"items-list\" role=\"listbox\">\n                            {\n                                menuItems.map((el, idx) => (\n                                    <li\n                                        key={idx}\n                                        onClick={() => setSelectedItem({\n                                            item: el,\n                                            idx\n                                        })}\n                                        role=\"option\"\n                                        className={`${selectedItem.idx == idx ? 'active' : ''} item`}\n                                    >\n                                        { el }\n                                        {\n                                            selectedItem.idx == idx ? (\n                                                <svg xmlns=\"http://www.w3.org/2000/svg\" viewBox=\"0 0 20 20\" fill=\"currentColor\">\n                                                    <path fillRule=\"evenodd\" d=\"M16.707 5.293a1 1 0 010 1.414l-8 8a1 1 0 01-1.414 0l-4-4a1 1 0 011.414-1.414L8 12.586l7.293-7.293a1 1 0 011.414 0z\" clipRule=\"evenodd\" />\n                                                </svg>\n                                            ) : ''\n                                        }\n                                    </li>\n                                ))\n                            }\n                        </ul>\n                    </div>\n                ) : ''\n            }\n        </div>\n    )\n}","label":"App.jsx"},{"code":".select-menu-primary {\n  position: relative;\n  max-width: 20rem;\n  padding-left: 1rem;\n  padding-right: 1rem;\n  margin: 3rem auto 0px auto;\n  font-size: 15px;\n}\n.select-menu-primary .select-menu-btn {\n  display: flex;\n  align-items: center;\n  justify-content: space-between;\n  width: 100%;\n  padding: 0.5rem 0.75rem 0.5rem 0.75rem;\n  color: #6b7280;\n  background-color: #FFF;\n  border: solid 1px #e5e7eb;\n  border-radius: 0.375rem;\n  box-shadow: 0 1px 2px 0 #0000000d;\n  cursor: default;\n  outline: none;\n}\n.select-menu-primary .select-menu-btn:focus {\n  border-color: #4f46e5;\n}\n.select-menu-primary .select-menu-btn svg {\n  width: 1.5rem;\n  height: 1.5rem;\n  color: #9ca3af;\n}\n.select-menu-primary .items-container {\n  position: relative;\n  width: 100%;\n}\n.select-menu-primary .items-container .items-list {\n  position: absolute;\n  width: 100%;\n  margin-top: 0.75rem;\n  overflow-y: auto;\n  background-color: #FFF;\n  border: solid 1px #e5e7eb;\n  border-radius: 0.375rem;\n  box-shadow: 0 1px 2px 0 #0000000d;\n  max-height: 16rem;\n}\n.select-menu-primary .items-container .items-list .item {\n  display: flex;\n  align-items: center;\n  justify-content: space-between;\n  padding: 0.5rem 0.75rem 0.5rem 0.75rem;\n  cursor: default;\n  transition-duration: 150ms;\n  color: #6b7280;\n}\n.select-menu-primary .items-container .items-list .item:hover {\n  color: #4f46e5;\n  background-color: #eef2ff;\n}\n.select-menu-primary .items-container .items-list .item svg {\n  width: 1.25rem;\n  height: 1.25rem;\n  color: #4f46e5;\n}\n.select-menu-primary .items-container .items-list .active {\n  color: #4f46e5;\n  background-color: #eef2ff;\n}","label":"style.css"}]}}
slug: /select-menus
id: f5a5e83c-185a-4a20-b75a-97760aa45255
created_at: 2
---

<FUIPrimarySelectMenu />