12:[["$","main",null,{"children":[["$","$L5",null,{"maxW":"100%","children":[["$","$L20","div-0",{"code":"import { Button } from 'welcome-ui/Button'\nimport { DropdownMenu, useDropdownMenu } from 'welcome-ui/DropdownMenu'\n\nconst Example = () => {\n const dropdownMenu = useDropdownMenu()\n\n const handleClick = () => {\n // your code\n }\n\n return (\n <>\n \n Dropdown Menu\n \n \n \n Facebook\n \n \n Instagram\n \n \n \n Github\n \n \n \n )\n}\n\nexport default Example\n","isOverview":true,"mt":0,"name":"DropdownMenu","pathToFile":"/DropdownMenu/docs/examples/overview.tsx","withCodeEditor":true}]]}],["$","$L5",null,{"maxW":"100%","children":[["$","$Lf","h2-0",{"alignItems":"center","as":"h2","borderBottom":"1px solid","borderBottomColor":"neutral-30","display":"flex","id":"examples","mt":"3xl","pb":"sm","style":{"scrollMarginTop":170},"variant":"h3","children":["$","$L5",null,{"as":"a","color":"inherit","href":"#examples","textDecoration":{"hover":"underline"},"children":"Examples"}]}]]}],["$","$L5",null,{"maxW":"100%","children":[["$","$Lf","h3-0",{"as":"h3","id":"usage","mb":"lg","mt":"xxl","style":{"scrollMarginTop":170},"variant":"h4","children":["$","$L5",null,{"as":"a","color":"inherit","href":"#usage","textDecoration":{"hover":"underline"},"children":"Usage"}]}],"\n",["$","$L20","div-0",{"code":"$21","isOverview":false,"mt":"$undefined","name":"DropdownMenu","pathToFile":"/DropdownMenu/docs/examples/example.tsx","withCodeEditor":true}],"\n",["$","$Lf","h3-1",{"as":"h3","id":"arrow","mb":"lg","mt":"xxl","style":{"scrollMarginTop":170},"variant":"h4","children":["$","$L5",null,{"as":"a","color":"inherit","href":"#arrow","textDecoration":{"hover":"underline"},"children":"Arrow"}]}],"\n",["$","$L22","p-0",{"node":{"type":"element","tagName":"p","properties":{},"children":[{"type":"text","value":"Use ","position":{"start":{"line":8,"column":1,"offset":96},"end":{"line":8,"column":5,"offset":100}}},{"type":"element","tagName":"code","properties":{},"children":[{"type":"text","value":"DropdownMenu.Arrow","position":{"start":{"line":8,"column":5,"offset":100},"end":{"line":8,"column":25,"offset":120}}}],"position":{"start":{"line":8,"column":5,"offset":100},"end":{"line":8,"column":25,"offset":120}}},{"type":"text","value":" to add an arrow to the dropdown menu","position":{"start":{"line":8,"column":25,"offset":120},"end":{"line":8,"column":62,"offset":157}}}],"position":{"start":{"line":8,"column":1,"offset":96},"end":{"line":8,"column":62,"offset":157}}},"children":["Use ",["$","$L5","code-0",{"alignItems":"center","as":"code","backgroundColor":"neutral-30","borderRadius":"md","color":"neutral-90","display":"inline-flex","px":"sm","py":"xxs","text":"sm","whiteSpace":"break-spaces","children":"DropdownMenu.Arrow"}]," to add an arrow to the dropdown menu"]}],"\n",["$","$L20","div-1",{"code":"import { Button } from 'welcome-ui/Button'\nimport { DropdownMenu, useDropdownMenu } from 'welcome-ui/DropdownMenu'\n\nconst Example = () => {\n const dropdownMenu = useDropdownMenu()\n\n const handleClick = () => {\n // your code\n }\n\n return (\n <>\n \n Dropdown Menu\n \n \n \n \n Facebook\n \n Instagram\n \n Github\n \n \n )\n}\n\nexport default Example\n","isOverview":false,"mt":"$undefined","name":"DropdownMenu","pathToFile":"/DropdownMenu/docs/examples/arrow.tsx","withCodeEditor":true}],"\n",["$","$Lf","h3-2",{"as":"h3","id":"stay-open","mb":"lg","mt":"xxl","style":{"scrollMarginTop":170},"variant":"h4","children":["$","$L5",null,{"as":"a","color":"inherit","href":"#stay-open","textDecoration":{"hover":"underline"},"children":"Stay open"}]}],"\n",["$","$L22","p-1",{"node":{"type":"element","tagName":"p","properties":{},"children":[{"type":"text","value":"Use ","position":{"start":{"line":14,"column":1,"offset":245},"end":{"line":14,"column":5,"offset":249}}},{"type":"element","tagName":"code","properties":{},"children":[{"type":"text","value":"hideOnClick={false}","position":{"start":{"line":14,"column":5,"offset":249},"end":{"line":14,"column":26,"offset":270}}}],"position":{"start":{"line":14,"column":5,"offset":249},"end":{"line":14,"column":26,"offset":270}}},{"type":"text","value":" on ","position":{"start":{"line":14,"column":26,"offset":270},"end":{"line":14,"column":30,"offset":274}}},{"type":"element","tagName":"code","properties":{},"children":[{"type":"text","value":"DropdownMenu.Item","position":{"start":{"line":14,"column":30,"offset":274},"end":{"line":14,"column":49,"offset":293}}}],"position":{"start":{"line":14,"column":30,"offset":274},"end":{"line":14,"column":49,"offset":293}}},{"type":"text","value":" to not closing menu on item click.","position":{"start":{"line":14,"column":49,"offset":293},"end":{"line":14,"column":84,"offset":328}}}],"position":{"start":{"line":14,"column":1,"offset":245},"end":{"line":14,"column":84,"offset":328}}},"children":["Use ",["$","$L5","code-0",{"alignItems":"center","as":"code","backgroundColor":"neutral-30","borderRadius":"md","color":"neutral-90","display":"inline-flex","px":"sm","py":"xxs","text":"sm","whiteSpace":"break-spaces","children":"hideOnClick={false}"}]," on ",["$","$L5","code-1",{"alignItems":"center","as":"code","backgroundColor":"neutral-30","borderRadius":"md","color":"neutral-90","display":"inline-flex","px":"sm","py":"xxs","text":"sm","whiteSpace":"break-spaces","children":"DropdownMenu.Item"}]," to not closing menu on item click."]}],"\n",["$","$L20","div-2",{"code":"import { Button } from 'welcome-ui/Button'\nimport { DropdownMenu, useDropdownMenu } from 'welcome-ui/DropdownMenu'\n\nconst Example = () => {\n const dropdownMenu = useDropdownMenu()\n\n const handleClick = () => {\n // your code\n }\n\n return (\n <>\n \n Dropdown Menu\n \n \n \n \n Instagram\n \n \n Facebook\n \n \n \n )\n}\n\nexport default Example\n","isOverview":false,"mt":"$undefined","name":"DropdownMenu","pathToFile":"/DropdownMenu/docs/examples/open.tsx","withCodeEditor":true}],"\n",["$","$Lf","h2-0",{"alignItems":"center","as":"h2","borderBottom":"1px solid","borderBottomColor":"neutral-30","display":"flex","id":"use-dropdown-menu","mt":"3xl","pb":"sm","style":{"scrollMarginTop":170},"variant":"h3","children":["$","$L5",null,{"as":"a","color":"inherit","href":"#use-dropdown-menu","textDecoration":{"hover":"underline"},"children":"useDropdownMenu"}]}],"\n",["$","$L22","p-2",{"node":{"type":"element","tagName":"p","properties":{},"children":[{"type":"text","value":"We use ","position":{"start":{"line":20,"column":1,"offset":420},"end":{"line":20,"column":8,"offset":427}}},{"type":"element","tagName":"code","properties":{},"children":[{"type":"text","value":"useMenuStore","position":{"start":{"line":20,"column":8,"offset":427},"end":{"line":20,"column":22,"offset":441}}}],"position":{"start":{"line":20,"column":8,"offset":427},"end":{"line":20,"column":22,"offset":441}}},{"type":"text","value":" from ","position":{"start":{"line":20,"column":22,"offset":441},"end":{"line":20,"column":28,"offset":447}}},{"type":"element","tagName":"a","properties":{"href":"https://ariakit.org/reference/use-menu-store"},"children":[{"type":"text","value":"Ariakit Menu","position":{"start":{"line":20,"column":29,"offset":448},"end":{"line":20,"column":41,"offset":460}}}],"position":{"start":{"line":20,"column":28,"offset":447},"end":{"line":20,"column":88,"offset":507}}},{"type":"text","value":" for the state of the dropdown menu with the ","position":{"start":{"line":20,"column":88,"offset":507},"end":{"line":20,"column":133,"offset":552}}},{"type":"element","tagName":"code","properties":{},"children":[{"type":"text","value":"animated","position":{"start":{"line":20,"column":133,"offset":552},"end":{"line":20,"column":143,"offset":562}}}],"position":{"start":{"line":20,"column":133,"offset":552},"end":{"line":20,"column":143,"offset":562}}},{"type":"text","value":" flag set to ","position":{"start":{"line":20,"column":143,"offset":562},"end":{"line":20,"column":156,"offset":575}}},{"type":"element","tagName":"code","properties":{},"children":[{"type":"text","value":"true","position":{"start":{"line":20,"column":156,"offset":575},"end":{"line":20,"column":162,"offset":581}}}],"position":{"start":{"line":20,"column":156,"offset":575},"end":{"line":20,"column":162,"offset":581}}},{"type":"text","value":" by default.","position":{"start":{"line":20,"column":162,"offset":581},"end":{"line":20,"column":174,"offset":593}}}],"position":{"start":{"line":20,"column":1,"offset":420},"end":{"line":20,"column":174,"offset":593}}},"children":["We use ",["$","$L5","code-0",{"alignItems":"center","as":"code","backgroundColor":"neutral-30","borderRadius":"md","color":"neutral-90","display":"inline-flex","px":"sm","py":"xxs","text":"sm","whiteSpace":"break-spaces","children":"useMenuStore"}]," from ",["$","$L23","a-0",{"href":"https://ariakit.org/reference/use-menu-store","isExternal":true,"rel":"noreferrer noopener","target":"_blank","node":"$12:0:props:children:2:props:children:18:props:node:children:3","children":"Ariakit Menu"}]," for the state of the dropdown menu with the ",["$","$L5","code-1",{"alignItems":"center","as":"code","backgroundColor":"neutral-30","borderRadius":"md","color":"neutral-90","display":"inline-flex","px":"sm","py":"xxs","text":"sm","whiteSpace":"break-spaces","children":"animated"}]," flag set to ",["$","$L5","code-2",{"alignItems":"center","as":"code","backgroundColor":"neutral-30","borderRadius":"md","color":"neutral-90","display":"inline-flex","px":"sm","py":"xxs","text":"sm","whiteSpace":"break-spaces","children":"true"}]," by default."]}],"\n",["$","$L22","p-3",{"node":{"type":"element","tagName":"p","properties":{},"children":[{"type":"text","value":"Pass options to ","position":{"start":{"line":22,"column":1,"offset":595},"end":{"line":22,"column":17,"offset":611}}},{"type":"element","tagName":"code","properties":{},"children":[{"type":"text","value":"useDropdownMenu","position":{"start":{"line":22,"column":17,"offset":611},"end":{"line":22,"column":34,"offset":628}}}],"position":{"start":{"line":22,"column":17,"offset":611},"end":{"line":22,"column":34,"offset":628}}},{"type":"text","value":":","position":{"start":{"line":22,"column":34,"offset":628},"end":{"line":22,"column":35,"offset":629}}}],"position":{"start":{"line":22,"column":1,"offset":595},"end":{"line":22,"column":35,"offset":629}}},"children":["Pass options to ",["$","$L5","code-0",{"alignItems":"center","as":"code","backgroundColor":"neutral-30","borderRadius":"md","color":"neutral-90","display":"inline-flex","px":"sm","py":"xxs","text":"sm","whiteSpace":"break-spaces","children":"useDropdownMenu"}],":"]}],"\n",["$","$L5","ul-0",{"as":"ul","listStyleType":"disc","mt":"sm","children":["\n",["$","$L5","li-0",{"as":"li","ml":"xxl","mt":"xs","children":[["$","$L5","strong-0",{"as":"strong","color":"neutral-90","fontWeight":"500","children":"defaultOpen"}],": e.g. ",["$","$L5","code-0",{"alignItems":"center","as":"code","backgroundColor":"neutral-30","borderRadius":"md","color":"neutral-90","display":"inline-flex","px":"sm","py":"xxs","text":"sm","whiteSpace":"break-spaces","children":"const dropdownMenu = useDropdownMenu({ defaultOpen: true })"}]]}],"\n"]}],"\n",["$","$L22","p-4",{"node":{"type":"element","tagName":"p","properties":{},"children":[{"type":"text","value":"And the hook returns (among other things):","position":{"start":{"line":26,"column":1,"offset":718},"end":{"line":26,"column":43,"offset":760}}}],"position":{"start":{"line":26,"column":1,"offset":718},"end":{"line":26,"column":43,"offset":760}}},"children":"And the hook returns (among other things):"}],"\n",["$","$L5","ul-1",{"as":"ul","listStyleType":"disc","mt":"sm","children":["\n",["$","$L5","li-0",{"as":"li","ml":"xxl","mt":"xs","children":[["$","$L5","strong-0",{"as":"strong","color":"neutral-90","fontWeight":"500","children":"useState('open')"}],": whether the dropdown menu is currently open"]}],"\n",["$","$L5","li-1",{"as":"li","ml":"xxl","mt":"xs","children":[["$","$L5","strong-0",{"as":"strong","color":"neutral-90","fontWeight":"500","children":"hide"}],": a function to hide the dropdown menu"]}],"\n"]}]]}]]}],["$","$L24",null,{"isSubPage":true,"tree":[{"href":"#","id":"definition","title":"Definition"},{"href":"#installation","id":"installation","title":"Installation"},{"href":"#examples","id":"examples","title":"Examples","children":[{"href":"#usage","id":"usage","title":"Usage"},{"href":"#arrow","id":"arrow","title":"Arrow"},{"href":"#stay-open","id":"stay-open","title":"Stay open"}]},{"href":"#use-dropdown-menu","id":"use-dropdown-menu","title":"useDropdownMenu"}]}]]