"use strict";(self.webpackChunkwebsite=self.webpackChunkwebsite||[]).push([[3096],{3905:function(e,t,a){a.d(t,{Zo:function(){return p},kt:function(){return u}});var n=a(7294);function i(e,t,a){return t in e?Object.defineProperty(e,t,{value:a,enumerable:!0,configurable:!0,writable:!0}):e[t]=a,e}function o(e,t){var a=Object.keys(e);if(Object.getOwnPropertySymbols){var n=Object.getOwnPropertySymbols(e);t&&(n=n.filter((function(t){return Object.getOwnPropertyDescriptor(e,t).enumerable}))),a.push.apply(a,n)}return a}function s(e){for(var t=1;t<arguments.length;t++){var a=null!=arguments[t]?arguments[t]:{};t%2?o(Object(a),!0).forEach((function(t){i(e,t,a[t])})):Object.getOwnPropertyDescriptors?Object.defineProperties(e,Object.getOwnPropertyDescriptors(a)):o(Object(a)).forEach((function(t){Object.defineProperty(e,t,Object.getOwnPropertyDescriptor(a,t))}))}return e}function l(e,t){if(null==e)return{};var a,n,i=function(e,t){if(null==e)return{};var a,n,i={},o=Object.keys(e);for(n=0;n<o.length;n++)a=o[n],t.indexOf(a)>=0||(i[a]=e[a]);return i}(e,t);if(Object.getOwnPropertySymbols){var o=Object.getOwnPropertySymbols(e);for(n=0;n<o.length;n++)a=o[n],t.indexOf(a)>=0||Object.prototype.propertyIsEnumerable.call(e,a)&&(i[a]=e[a])}return i}var r=n.createContext({}),d=function(e){var t=n.useContext(r),a=t;return e&&(a="function"==typeof e?e(t):s(s({},t),e)),a},p=function(e){var t=d(e.components);return n.createElement(r.Provider,{value:t},e.children)},c={inlineCode:"code",wrapper:function(e){var t=e.children;return n.createElement(n.Fragment,{},t)}},m=n.forwardRef((function(e,t){var a=e.components,i=e.mdxType,o=e.originalType,r=e.parentName,p=l(e,["components","mdxType","originalType","parentName"]),m=d(a),u=i,w=m["".concat(r,".").concat(u)]||m[u]||c[u]||o;return a?n.createElement(w,s(s({ref:t},p),{},{components:a})):n.createElement(w,s({ref:t},p))}));function u(e,t){var a=arguments,i=t&&t.mdxType;if("string"==typeof e||i){var o=a.length,s=new Array(o);s[0]=m;var l={};for(var r in t)hasOwnProperty.call(t,r)&&(l[r]=t[r]);l.originalType=e,l.mdxType="string"==typeof e?e:i,s[1]=l;for(var d=2;d<o;d++)s[d]=a[d];return n.createElement.apply(null,s)}return n.createElement.apply(null,a)}m.displayName="MDXCreateElement"},2695:function(e,t,a){a.d(t,{Z:function(){return l}});var n=a(7462),i=a(3366),o=a(7294),s=["isBad","isGood","children","disableFullscreen","limitWidth"];function l(e){var t=e.isBad,a=e.isGood,l=e.children,r=e.disableFullscreen,d=e.limitWidth,p=(0,i.Z)(e,s),c=(0,o.useState)(!1),m=c[0],u=c[1];return o.createElement("div",{className:"preview-box-wrapper",style:d?{width:d,display:"table",margin:"0 auto"}:{}},!r&&o.createElement("button",{"aria-label":m?"Minimize the example":"Fullscreen the example",className:"preview-box-fullscreen-toggle",onClick:function(e){var t=e.target.closest(".preview-box-wrapper");m?document.exitFullscreen?document.exitFullscreen():document.webkitExitFullscreen?document.webkitExitFullscreen():document.msExitFullscreen&&document.msExitFullscreen():t.requestFullscreen?t.requestFullscreen():t.webkitRequestFullscreen?t.webkitRequestFullscreen():t.msRequestFullscreen&&t.msRequestFullscreen(),u(!m)}},m?o.createElement("svg",{"aria-hidden":"true",xmlns:"http://www.w3.org/2000/svg",x:"0",y:"0",viewBox:"0 0 24 24"},o.createElement("path",{d:"M19.707 18.293a1 1 0 01-1.414 1.414L16 17.414V18a1 1 0 01-2 0v-3a1 1 0 011-1h3a1 1 0 010 2h-.586zM9 14H6a1 1 0 000 2h.586l-2.293 2.293a1 1 0 001.414 1.414L8 17.414V18a1 1 0 002 0v-3a1 1 0 00-1-1zm0-9a1 1 0 00-1 1v.586L5.707 4.293a1 1 0 00-1.414 1.414L6.586 8H6a1 1 0 000 2h3a1 1 0 001-1V6a1 1 0 00-1-1zm6 5h3a1 1 0 000-2h-.586l2.293-2.293a1 1 0 00-1.414-1.414L16 6.586V6a1 1 0 00-2 0v3a1 1 0 001 1z"})):o.createElement("svg",{"aria-hidden":"true",xmlns:"http://www.w3.org/2000/svg",x:"0",y:"0",viewBox:"26 26 48 48"},o.createElement("path",{d:"M54.347 57.882A8.96 8.96 0 0150 59a8.96 8.96 0 01-4.347-1.118L40.736 62.8c-.38.38-.257.701.29.701h.98A2.503 2.503 0 0144.5 66c0 1.39-1.122 2.5-2.507 2.5h-7.986a2.505 2.505 0 01-2.507-2.507v-7.986A2.502 2.502 0 0134 55.5a2.49 2.49 0 012.5 2.493v.98c0 .547.314.678.7.29l4.918-4.916A8.96 8.96 0 0141 50a8.96 8.96 0 011.118-4.347L37.2 40.736c-.38-.38-.701-.257-.701.29v.98A2.503 2.503 0 0134 44.5c-1.39 0-2.5-1.122-2.5-2.507v-7.986a2.505 2.505 0 012.507-2.507h7.986A2.502 2.502 0 0144.5 34a2.49 2.49 0 01-2.493 2.5h-.98c-.547 0-.678.314-.29.7l4.916 4.918A8.96 8.96 0 0150 41a8.96 8.96 0 014.347 1.118l4.917-4.917c.38-.38.257-.701-.29-.701h-.98A2.503 2.503 0 0155.5 34c0-1.39 1.122-2.5 2.507-2.5h7.986a2.505 2.505 0 012.507 2.507v7.986A2.502 2.502 0 0166 44.5a2.49 2.49 0 01-2.5-2.493v-.98c0-.547-.314-.678-.7-.29l-4.918 4.916A8.96 8.96 0 0159 50a8.96 8.96 0 01-1.118 4.347l4.917 4.917c.38.38.701.257.701-.29v-.98A2.503 2.503 0 0166 55.5c1.39 0 2.5 1.122 2.5 2.507v7.986a2.505 2.505 0 01-2.507 2.507h-7.986A2.502 2.502 0 0155.5 66a2.49 2.49 0 012.493-2.5h.98c.547 0 .678-.314.29-.7l-4.916-4.918zM50 54a4 4 0 100-8 4 4 0 000 8z"}))),t&&o.createElement("div",{className:"is-bad-example style-red"},o.createElement("svg",{xmlns:"http://www.w3.org/2000/svg",x:"0",y:"0",viewBox:"2 2 12 12"},o.createElement("path",{d:"M3.3 12.7c.2.2.4.3.7.3s.5-.1.7-.3L8 9.4l3.3 3.3c.2.2.5.3.7.3s.5-.1.7-.3c.4-.4.4-1 0-1.4L9.4 8l3.3-3.3c.4-.4.4-1 0-1.4s-1-.4-1.4 0L8 6.6 4.7 3.3c-.4-.4-1-.4-1.4 0s-.4 1 0 1.4L6.6 8l-3.3 3.3c-.4.4-.4 1 0 1.4z"}))),a&&o.createElement("div",{className:"is-good-example style-green"},o.createElement("svg",{xmlns:"http://www.w3.org/2000/svg",x:"0",y:"0",viewBox:"0 0 18 18"},o.createElement("path",{d:"M5.056 15.04a1.5 1.5 0 002.217-.119l10.17-12.476A1.5 1.5 0 0015.118.55L6.007 11.758l-3.453-3.41a1.5 1.5 0 10-2.109 2.133l4.611 4.56"}))),o.createElement("iframe",(0,n.Z)({width:"100%",className:"docus-preview-box"+(m?" is-fullscreen":""),srcDoc:l},p)))}},3815:function(e,t,a){a.r(t),a.d(t,{frontMatter:function(){return r},contentTitle:function(){return d},metadata:function(){return p},toc:function(){return c},default:function(){return u}});var n=a(7462),i=a(3366),o=(a(7294),a(3905)),s=a(2695),l=["components"],r={title:"Dropdowns"},d=void 0,p={unversionedId:"components/dropdown",id:"components/dropdown",isDocsHomePage:!1,title:"Dropdowns",description:"Dropdowns typically provide a list of items to interact with, however, it is possible to have a complex UI inside dropdowns. FlatifyCSS uses Popper library for positioning dropdowns dynamically, so dropdowns need this library to work as expected and you should include it inside your webpage before FlatifyCSS's JavaScript file.",source:"@site/docs/components/dropdown.mdx",sourceDirName:"components",slug:"/components/dropdown",permalink:"/docs/components/dropdown",editUrl:"https://github.com/amir2mi/flatifycss/tree/master/website/docs/components/dropdown.mdx",tags:[],version:"current",frontMatter:{title:"Dropdowns"},sidebar:"tutorialSidebar",previous:{title:"Cards",permalink:"/docs/components/card"},next:{title:"Fireworks",permalink:"/docs/components/fireworks"}},c=[{value:"A simple dropdown",id:"a-simple-dropdown",children:[],level:2},{value:"Directions",id:"directions",children:[],level:2},{value:"Autoclose",id:"autoclose",children:[],level:2},{value:"Split button",id:"split-button",children:[],level:2},{value:"Items group mockup",id:"items-group-mockup",children:[],level:2},{value:"Sizes",id:"sizes",children:[],level:2},{value:"Colors",id:"colors",children:[],level:2},{value:"Customization",id:"customization",children:[],level:2}],m={toc:c};function u(e){var t=e.components,a=(0,i.Z)(e,l);return(0,o.kt)("wrapper",(0,n.Z)({},m,a,{components:t,mdxType:"MDXLayout"}),(0,o.kt)("p",null,"Dropdowns typically provide a list of items to interact with, however, it is possible to have a complex UI inside dropdowns. FlatifyCSS uses ",(0,o.kt)("a",{parentName:"p",href:"https://popper.js.org/"},"Popper")," library for positioning dropdowns dynamically, so dropdowns need this library to work as expected and you should include it inside your webpage before FlatifyCSS's JavaScript file."),(0,o.kt)("h2",{id:"a-simple-dropdown"},"A simple dropdown"),(0,o.kt)("p",null,"To create a simple dropdown, we need a ",(0,o.kt)("a",{parentName:"p",href:"docs/components/buttons/button"},"button")," (specifically an ",(0,o.kt)("a",{parentName:"p",href:"/docs/components/buttons/arrow-button"},"arrow button"),") with ",(0,o.kt)("inlineCode",{parentName:"p"},".dropdown-toggle")," class, ",(0,o.kt)("a",{parentName:"p",href:"docs/components/menu"},"menu")," with ",(0,o.kt)("inlineCode",{parentName:"p"},".dropdown")," class, also they should be wrapped by ",(0,o.kt)("inlineCode",{parentName:"p"},".dropdown-wrapper")," class. These are basics and they should have some special classes to work that you can see in the example below."),(0,o.kt)(s.Z,{height:"430px",children:'\n<!DOCTYPE html>\n<html lang="en"> <head> <meta charset="UTF-8" /> <meta http-equiv="X-UA-Compatible" content="IE=edge" /> <meta name="viewport" content="width=device-width, initial-scale=1.0" /> <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/flatifycss/dist/css/flatify.min.css" /> <title>Dropdown</title> <script src="https://unpkg.com/@popperjs/core@2"><\/script> <script src="https://raw.githack.com/amir2mi/flatifycss/master/dist/js/flatify-min.js"><\/script> </head> <body> <div class="dropdown-wrapper"> <button id="my-dropdown-toggle" class="button dropdown-toggle arrow-button" aria-expanded="false"> Dropdown at bottom </button> <ul class="dropdown menu-items-wrapper" aria-labelledby="my-dropdown-toggle" > <li class="menu-item heading">My Account</li> <li class="menu-item"><a>Sign up</a></li> <li class="menu-item"><a>Login</a></li> <li role="separator" class="menu-item separator"></li> <li class="menu-item"><a>About us</a></li> <li class="menu-item"><a>Contribute</a></li> <li class="menu-item"><a>Rate it!</a></li> <li aria-hidden="true"><span class="pointer-arrow"></span></li> </ul> </div> <br><br> <p class="opacity-50"> Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Donec odio. Quisque volutpat mattis eros. Nullam malesuada erat ut turpis. Suspendisse urna nibh, viverra non, semper suscipit, posuere a, pede. Donec nec justo eget felis facilisis fermentum. Aliquam porttitor mauris sit amet orci. Aenean dignissim pellentesque felis. Morbi in sem quis dui placerat ornare. Pellentesque odio nisi, euismod in, pharetra a, ultricies in, diam. Sed arcu. Cras consequat. Praesent dapibus, neque id cursus faucibus, tortor neque egestas auguae, eu vulputate magna eros eu erat. Aliquam erat volutpat. Nam dui mi, tincidunt quis, accumsan porttitor, facilisis luctus, metus. Phasellus ultrices nulla quis nibh. Quisque a lectus. Donec consectetuer ligula vulputate sem tristique cursus. Nam nulla quam, gravida non, commodo a, sodales sit amet, nisi. </p> <br> <div class="dropdown-wrapper push-right" style="display: table"> <button id="my-dropdown-toggle" class="button dropdown-toggle arrow-button arrow-top"aria-expanded="false"> Dropdown at top </button> <ul class="dropdown menu-items-wrapper" aria-labelledby="my-dropdown-toggle" data-dropdown-direction="top" > <li class="menu-item heading">My Account</li> <li class="menu-item"><a>Sign up</a></li> <li class="menu-item"><a>Login</a></li> <li role="separator" class="menu-item separator"></li> <li class="menu-item"><a>About us</a></li> <li class="menu-item"><a>Contribute</a></li> <li class="menu-item"><a>Rate it!</a></li> <li aria-hidden="true"><span class="pointer-arrow"></span></li> </ul> </div> </body>\n</html>\n',mdxType:"PreviewBox"}),(0,o.kt)("pre",null,(0,o.kt)("code",{parentName:"pre",className:"language-html",metastring:'title="index.html"',title:'"index.html"'},'<div class="dropdown-wrapper">\n  \x3c!-- a button to toggle show/hide of dropdown --\x3e\n  <button id="my-dropdown-toggle" class="button dropdown-toggle arrow-button" aria-expanded="false">\n    Dropdown at bottom\n  </button>\n  \x3c!-- dropdown: in this case a menu --\x3e\n  <ul class="dropdown menu-items-wrapper" aria-labelledby="my-dropdown-toggle">\n    <li class="menu-item heading">My Account</li>\n    <li class="menu-item"><a href="#">Sign up</a></li>\n    <li class="menu-item"><a href="#">Login</a></li>\n    <li role="separator" class="menu-item separator"></li>\n    <li class="menu-item"><a href="#">About us</a></li>\n    <li class="menu-item"><a href="#">Contribute</a></li>\n    <li class="menu-item"><a href="#">Rate it!</a></li>\n    \x3c!-- dropdown arrow which is optional --\x3e\n    <li aria-hidden="true"><span class="pointer-arrow"></span></li>\n  </ul>\n</div>\n')),(0,o.kt)("div",{className:"admonition admonition-info alert alert--info"},(0,o.kt)("div",{parentName:"div",className:"admonition-heading"},(0,o.kt)("h5",{parentName:"div"},(0,o.kt)("span",{parentName:"h5",className:"admonition-icon"},(0,o.kt)("svg",{parentName:"span",xmlns:"http://www.w3.org/2000/svg",width:"14",height:"16",viewBox:"0 0 14 16"},(0,o.kt)("path",{parentName:"svg",fillRule:"evenodd",d:"M7 2.3c3.14 0 5.7 2.56 5.7 5.7s-2.56 5.7-5.7 5.7A5.71 5.71 0 0 1 1.3 8c0-3.14 2.56-5.7 5.7-5.7zM7 1C3.14 1 0 4.14 0 8s3.14 7 7 7 7-3.14 7-7-3.14-7-7-7zm1 3H6v5h2V4zm0 6H6v2h2v-2z"}))),"Accessibility matters!")),(0,o.kt)("div",{parentName:"div",className:"admonition-content"},(0,o.kt)("p",{parentName:"div"},"There is an attribute called ",(0,o.kt)("inlineCode",{parentName:"p"},"aria-labelledby")," you can read about ",(0,o.kt)("a",{parentName:"p",href:"https://developer.mozilla.org/en-US/docs/Web/Accessibility/ARIA/ARIA_Techniques/Using_the_aria-labelledby_attribute"},"its use-cases"),". Simply, it describes dropdown with its toggle text, because it has the ID of the dropdown toggle button, so they are connected like form label ",(0,o.kt)("inlineCode",{parentName:"p"},"for")," attribute."))),(0,o.kt)("h2",{id:"directions"},"Directions"),(0,o.kt)("p",null,"We call them dropdown but they can come from left, right, or top as well. To set a position for dropdown there is an HTML attribute called ",(0,o.kt)("inlineCode",{parentName:"p"},"data-dropdown-direction"),", it accepts ",(0,o.kt)("inlineCode",{parentName:"p"},"top"),", ",(0,o.kt)("inlineCode",{parentName:"p"},"bottom")," (as default), ",(0,o.kt)("inlineCode",{parentName:"p"},"right")," or ",(0,o.kt)("inlineCode",{parentName:"p"},"left")," and should be added to the ",(0,o.kt)("inlineCode",{parentName:"p"},".dropdown")," element."),(0,o.kt)(s.Z,{height:"450px",children:'\n<!DOCTYPE html>\n<html lang="en"> <head> <meta charset="UTF-8" /> <meta http-equiv="X-UA-Compatible" content="IE=edge" /> <meta name="viewport" content="width=device-width, initial-scale=1.0" /> <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/flatifycss/dist/css/flatify.min.css" /> <title>Dropdown</title> <script src="https://unpkg.com/@popperjs/core@2"><\/script> <script src="https://raw.githack.com/amir2mi/flatifycss/master/dist/js/flatify-min.js"><\/script> </head> <body> <div class="flex-center" style="justify-content: space-between"> <div class="dropdown-wrapper"> <button id="my-dropdown-toggle" class="button dropdown-toggle arrow-button" aria-expanded="false"> Bottom </button> <ul class="dropdown menu-items-wrapper" aria-labelledby="my-dropdown-toggle" > <li class="menu-item heading">My Account</li> <li class="menu-item"><a>Sign up</a></li> <li class="menu-item"><a>Login</a></li> <li aria-hidden="true"><span class="pointer-arrow"></span></li> </ul> </div> <div class="dropdown-wrapper"> <button id="my-dropdown-toggle" class="button dropdown-toggle arrow-button" aria-expanded="false"> Left </button> <ul class="dropdown menu-items-wrapper" aria-labelledby="my-dropdown-toggle" data-dropdown-direction="left" > <li class="menu-item heading">My Account</li> <li class="menu-item"><a>Sign up</a></li> <li class="menu-item"><a>Login</a></li> <li aria-hidden="true"><span class="pointer-arrow"></span></li> </ul> </div> </div> <br><br> <p class="opacity-50"> Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Donec odio. Quisque volutpat mattis eros. Nullam malesuada erat ut turpis. Suspendisse urna nibh, viverra non, semper suscipit, posuere a, pede. Donec nec justo eget felis facilisis fermentum. Aliquam porttitor mauris sit amet orci. Aenean dignissim pellentesque felis. Morbi in sem quis dui placerat ornare. Pellentesque odio nisi, euismod in, pharetra a, ultricies in, diam. Sed arcu. Cras consequat. Praesent dapibus, neque id cursus faucibus, tortor neque egestas auguae, eu vulputate magna eros eu erat. Aliquam erat volutpat. Nam dui mi, tincidunt quis, accumsan porttitor, facilisis luctus, metus. Phasellus ultrices nulla quis nibh. Quisque a lectus. Donec consectetuer ligula vulputate sem tristique cursus. Nam nulla quam, gravida non, commodo a, sodales sit amet, nisi. </p> <br> <div class="flex-center" style="justify-content: space-between"> <div class="dropdown-wrapper"> <button id="my-dropdown-toggle" class="button dropdown-toggle arrow-button" aria-expanded="false"> Right </button> <ul class="dropdown menu-items-wrapper" aria-labelledby="my-dropdown-toggle" data-dropdown-direction="right" > <li class="menu-item heading">My Account</li> <li class="menu-item"><a>Sign up</a></li> <li class="menu-item"><a>Login</a></li> <li aria-hidden="true"><span class="pointer-arrow"></span></li> </ul> </div> <div class="dropdown-wrapper"> <button id="my-dropdown-toggle" class="button dropdown-toggle arrow-button" aria-expanded="false"> Top </button> <ul class="dropdown menu-items-wrapper" aria-labelledby="my-dropdown-toggle" data-dropdown-direction="top" > <li class="menu-item heading">My Account</li> <li class="menu-item"><a>Sign up</a></li> <li class="menu-item"><a>Login</a></li> <li aria-hidden="true"><span class="pointer-arrow"></span></li> </ul> </div> </div> </body>\n</html>\n',mdxType:"PreviewBox"}),(0,o.kt)("pre",null,(0,o.kt)("code",{parentName:"pre",className:"language-html",metastring:'{3,10,17,24} title="index.html"',"{3,10,17,24}":!0,title:'"index.html"'},'<div class="dropdown-wrapper">\n  <button ...></button>\n  <ul ... data-dropdown-direction="bottom">\n    ...\n  </ul>\n</div>\n\n<div class="dropdown-wrapper">\n  <button ...></button>\n  <ul ... data-dropdown-direction="left">\n    ...\n  </ul>\n</div>\n\n<div class="dropdown-wrapper">\n  <button ...></button>\n  <ul ... data-dropdown-direction="top">\n    ...\n  </ul>\n</div>\n\n<div class="dropdown-wrapper">\n  <button ...></button>\n  <ul ... data-dropdown-direction="right">\n    ...\n  </ul>\n</div>\n')),(0,o.kt)("div",{className:"admonition admonition-success alert alert--success"},(0,o.kt)("div",{parentName:"div",className:"admonition-heading"},(0,o.kt)("h5",{parentName:"div"},(0,o.kt)("span",{parentName:"h5",className:"admonition-icon"},(0,o.kt)("svg",{parentName:"span",xmlns:"http://www.w3.org/2000/svg",width:"12",height:"16",viewBox:"0 0 12 16"},(0,o.kt)("path",{parentName:"svg",fillRule:"evenodd",d:"M6.5 0C3.48 0 1 2.19 1 5c0 .92.55 2.25 1 3 1.34 2.25 1.78 2.78 2 4v1h5v-1c.22-1.22.66-1.75 2-4 .45-.75 1-2.08 1-3 0-2.81-2.48-5-5.5-5zm3.64 7.48c-.25.44-.47.8-.67 1.11-.86 1.41-1.25 2.06-1.45 3.23-.02.05-.02.11-.02.17H5c0-.06 0-.13-.02-.17-.2-1.17-.59-1.83-1.45-3.23-.2-.31-.42-.67-.67-1.11C2.44 6.78 2 5.65 2 5c0-2.2 2.02-4 4.5-4 1.22 0 2.36.42 3.22 1.19C10.55 2.94 11 3.94 11 5c0 .66-.44 1.78-.86 2.48zM4 14h5c-.23 1.14-1.3 2-2.5 2s-2.27-.86-2.5-2z"}))),"Keyboard friendly")),(0,o.kt)("div",{parentName:"div",className:"admonition-content"},(0,o.kt)("p",{parentName:"div"},"Note that dropdowns are keyboard friendly, since pressing ",(0,o.kt)("kbd",null,"ESC")," will hide active dropdowns."))),(0,o.kt)("h2",{id:"autoclose"},"Autoclose"),(0,o.kt)("p",null,"Dropdowns by default will be closed on clicked outside and inside, you can change this behavior easily with ",(0,o.kt)("inlineCode",{parentName:"p"},"data-dropdown-auto-close")," HTML attribute for ",(0,o.kt)("inlineCode",{parentName:"p"},".dropdown")," element, It accepts:"),(0,o.kt)("p",null,(0,o.kt)("inlineCode",{parentName:"p"},"true")," (as default) Close dropdown on click outside or inside.",(0,o.kt)("br",{parentName:"p"}),"\n",(0,o.kt)("inlineCode",{parentName:"p"},"outside")," Close dropdown when clicked outside of its area",(0,o.kt)("br",{parentName:"p"}),"\n",(0,o.kt)("inlineCode",{parentName:"p"},"inside")," Close dropdown when clicked inside of its area",(0,o.kt)("br",{parentName:"p"}),"\n",(0,o.kt)("inlineCode",{parentName:"p"},"false")," Do not close dropdown automatically (you need to handle closing dropdown manually or you can use the dropdown close button)."),(0,o.kt)("div",{className:"admonition admonition-success alert alert--success"},(0,o.kt)("div",{parentName:"div",className:"admonition-heading"},(0,o.kt)("h5",{parentName:"div"},(0,o.kt)("span",{parentName:"h5",className:"admonition-icon"},(0,o.kt)("svg",{parentName:"span",xmlns:"http://www.w3.org/2000/svg",width:"12",height:"16",viewBox:"0 0 12 16"},(0,o.kt)("path",{parentName:"svg",fillRule:"evenodd",d:"M6.5 0C3.48 0 1 2.19 1 5c0 .92.55 2.25 1 3 1.34 2.25 1.78 2.78 2 4v1h5v-1c.22-1.22.66-1.75 2-4 .45-.75 1-2.08 1-3 0-2.81-2.48-5-5.5-5zm3.64 7.48c-.25.44-.47.8-.67 1.11-.86 1.41-1.25 2.06-1.45 3.23-.02.05-.02.11-.02.17H5c0-.06 0-.13-.02-.17-.2-1.17-.59-1.83-1.45-3.23-.2-.31-.42-.67-.67-1.11C2.44 6.78 2 5.65 2 5c0-2.2 2.02-4 4.5-4 1.22 0 2.36.42 3.22 1.19C10.55 2.94 11 3.94 11 5c0 .66-.44 1.78-.86 2.48zM4 14h5c-.23 1.14-1.3 2-2.5 2s-2.27-.86-2.5-2z"}))),"Handle closing dropdown with a button")),(0,o.kt)("div",{parentName:"div",className:"admonition-content"},(0,o.kt)("p",{parentName:"div"},"You might set ",(0,o.kt)("inlineCode",{parentName:"p"},"data-dropdown-auto-close")," to ",(0,o.kt)("inlineCode",{parentName:"p"},"false")," and handle dropdown manually, however, there is a button that handles closing dropdown on click, all you need to do is add a button inside ",(0,o.kt)("inlineCode",{parentName:"p"},".dropdown-wrapper")," with the ",(0,o.kt)("inlineCode",{parentName:"p"},".close-dropdown")," class."))),(0,o.kt)(s.Z,{height:"370px",children:'\n<!DOCTYPE html>\n<html lang="en"> <head> <meta charset="UTF-8" /> <meta http-equiv="X-UA-Compatible" content="IE=edge" /> <meta name="viewport" content="width=device-width, initial-scale=1.0" /> <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/flatifycss/dist/css/flatify.min.css" /> <title>Dropdown</title> <script src="https://unpkg.com/@popperjs/core@2"><\/script> <script src="https://raw.githack.com/amir2mi/flatifycss/master/dist/js/flatify-min.js"><\/script> </head> <body> <div class="flex-center" style="justify-content: space-between"> <div class="dropdown-wrapper"> <button id="my-dropdown-toggle" class="button dropdown-toggle arrow-button" aria-expanded="false"> Outside & inside </button> <ul class="dropdown menu-items-wrapper" aria-labelledby="my-dropdown-toggle" data-dropdown-auto-close="true" > <li class="menu-item heading">My Account</li> <li class="menu-item"><a>Sign up</a></li> <li class="menu-item"><a>Login</a></li> <li aria-hidden="true"><span class="pointer-arrow"></span></li> </ul> </div> <div class="dropdown-wrapper"> <button id="my-dropdown-toggle" class="button dropdown-toggle arrow-button" aria-expanded="false"> Outside </button> <ul class="dropdown menu-items-wrapper" aria-labelledby="my-dropdown-toggle" data-dropdown-auto-close="outside" > <li class="menu-item heading">My Account</li> <li class="menu-item"><a>Sign up</a></li> <li class="menu-item"><a>Login</a></li> <li aria-hidden="true"><span class="pointer-arrow"></span></li> </ul> </div> </div> <div class="flex-center" style="justify-content: space-between"> <div class="dropdown-wrapper"> <button id="my-dropdown-toggle" class="button dropdown-toggle arrow-button" aria-expanded="false"> Inside </button> <ul class="dropdown menu-items-wrapper" aria-labelledby="my-dropdown-toggle" data-dropdown-auto-close="inside" > <li class="menu-item heading">My Account</li> <li class="menu-item"><a>Sign up</a></li> <li class="menu-item"><a>Login</a></li> <li aria-hidden="true"><span class="pointer-arrow"></span></li> </ul> </div> <div class="dropdown-wrapper"> <button id="my-dropdown-toggle" class="button dropdown-toggle arrow-button" aria-expanded="false"> Manually </button> <ul class="dropdown menu-items-wrapper" aria-labelledby="my-dropdown-toggle" data-dropdown-auto-close="false" > <li class="menu-item heading">My Account</li> <li class="menu-item"><a>Sign up</a></li> <li class="menu-item"><a>Login</a></li> <li aria-hidden="true"><span class="pointer-arrow"></span></li> </ul> </div> </div> <div class="flex-center"> <div class="dropdown-wrapper"> <button id="my-dropdown-toggle" class="button dropdown-toggle arrow-button" aria-expanded="false"> Close button </button> <ul class="dropdown menu-items-wrapper" aria-labelledby="my-dropdown-toggle" data-dropdown-auto-close="false" > <li class="position-absolute place-top place-right"> <button class="close-dropdown \tclose-button size-xs" style="margin: 1.5em 0.75em" aria-label="Close dropdown"></button> </li> <li class="menu-item heading">My Account</li> <li class="menu-item"><a>Sign up</a></li> <li class="menu-item"><a>Login</a></li> <li aria-hidden="true"><span class="pointer-arrow"></span></li> </ul> </div> </div> </body>\n</html>\n',mdxType:"PreviewBox"}),(0,o.kt)("pre",null,(0,o.kt)("code",{parentName:"pre",className:"language-html",metastring:'title="dropdown-close-button.html"',title:'"dropdown-close-button.html"'},'<div class="dropdown-wrapper">\n  <button id="my-dropdown-toggle" class="button dropdown-toggle arrow-button" aria-expanded="false">\n    Close button\n  </button>\n  <ul class="dropdown menu-items-wrapper" aria-labelledby="my-dropdown-toggle" data-dropdown-auto-close="false">\n    <li class="position-absolute place-top place-right">\n      <button\n        class="close-dropdown close-button size-xs"\n        style="margin: 1.2em 0.64em"\n        aria-label="Close dropdown"\n      ></button>\n    </li>\n    <li class="menu-item heading">My Account</li>\n    <li class="menu-item"><a>Sign up</a></li>\n    <li class="menu-item"><a>Login</a></li>\n    <li aria-hidden="true"><span class="pointer-arrow"></span></li>\n  </ul>\n</div>\n')),(0,o.kt)("h2",{id:"split-button"},"Split button"),(0,o.kt)("p",null,"This is common for dropdowns to be opened by an arrow button that is stuck with a button, they are called split buttons. It is simply doable with ",(0,o.kt)("a",{parentName:"p",href:"/docs/components/buttons/button"},"buttons")," and ",(0,o.kt)("a",{parentName:"p",href:"/docs/components/buttons/button-group"},"button group"),"."),(0,o.kt)(s.Z,{height:"250px",children:'\n<!DOCTYPE html>\n<html lang="en"> <head> <meta charset="UTF-8" /> <meta http-equiv="X-UA-Compatible" content="IE=edge" /> <meta name="viewport" content="width=device-width, initial-scale=1.0" /> <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/flatifycss/dist/css/flatify.min.css" /> <title>Dropdown</title> <script src="https://unpkg.com/@popperjs/core@2"><\/script> <script src="https://raw.githack.com/amir2mi/flatifycss/master/dist/js/flatify-min.js"><\/script> </head> <body class="flex-center"> <div class="dropdown-wrapper"> <div class="button-group"> <button class="button bordered">My button</button> <button class="button bordered dropdown-toggle arrow-button" id="defaultDropdown" aria-expanded="false" aria-label="Toggle dropdown" ></button> </div> <ul class="dropdown menu-items-wrapper" aria-labelledby="defaultDropdown" > <li class="menu-item"><a>Item 1</a></li> <li class="menu-item"><a>Item 2</a></li> <li class="menu-item"><a>Item 3</a></li> <li><span class="pointer-arrow"></span></li> </ul> </div> </body>\n</html>\n',mdxType:"PreviewBox"}),(0,o.kt)("h2",{id:"items-group-mockup"},"Items group mockup"),(0,o.kt)("p",null,"Items group is a mockup component that is well suited as dropdown items, ",(0,o.kt)("a",{parentName:"p",href:"/docs/mockups/items-group"},"read more here"),"."),(0,o.kt)(s.Z,{height:"320px",children:'\n<!DOCTYPE html>\n<html lang="en"> <head> <meta charset="UTF-8" /> <meta http-equiv="X-UA-Compatible" content="IE=edge" /> <meta name="viewport" content="width=device-width, initial-scale=1.0" /> <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/flatifycss/dist/css/flatify.min.css" /> <title>Dropdown</title> <script src="https://unpkg.com/@popperjs/core@2"><\/script> <script src="https://raw.githack.com/amir2mi/flatifycss/master/dist/js/flatify-min.js"><\/script> </head> <body class="flex-center"> <div class="dropdown-wrapper free-size size-xs"> <button id="my-dropdown-toggle" class="button dropdown-toggle arrow-button" aria-expanded="false"> Demo with items group </button> <div class="dropdown" aria-labelledby="defaultDropdown" > <div class="items-group" style="width: 200px"> <button class="item-button"> <div class="item-icon"> <svg aria-hidden="true" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 45 100"> <path d="M0 22.815H10.937V34.223H0z"></path> <path d="M0 66.719H10.937V78.12599999999999H0z"></path> <path d="M21.612 100c5.547-10.815 9.123-18.699 10.727-23.653 2.442-7.5 3.664-16.291 3.664-26.373s-1.413-19.309-4.24-27.682C30.019 17.129 26.583 9.699 21.455 0h6.331c5.374 8.583 8.626 13.876 9.76 15.882 1.134 2.006 2.363 4.771 3.689 8.293 1.674 4.361 2.87 8.669 3.585 12.925s1.072 8.355 1.072 12.297c0 10.327-1.639 19.536-4.919 27.629-2.059 5.198-6.332 12.855-12.82 22.973h-6.541z" ></path> </svg> </div> <div class="item-text"> <p class="item-title">First item</p> <p class="item-subtitle">Lorem ipsum dolor sit amet.</p> </div> </button> <button class="item-button"> <div class="item-icon"> <svg aria-hidden="true" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 100 100"> <path d="M39.1 77l48.7-48.7c1.5-1.4 1.6-3.8.2-5.3-1.4-1.5-3.8-1.6-5.3-.2l-.2.2-46.1 46.1-19.8-19.9c-1.5-1.4-3.9-1.3-5.3.2-1.3 1.4-1.3 3.7 0 5.1L33.8 77c1.4 1.5 3.8 1.5 5.3 0z" ></path> </svg> </div> <div class="item-text"> <p class="item-title">Second item</p> <p class="item-subtitle">Lorem ipsum dolor sit amet.</p> </div> </button> <button class="item-button active"> <div class="item-icon"> <svg aria-hidden="true" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 1024 1024"> <path d="M864.5 512.5c0 17.6-1.2 35.2-3.5 52.7.5-3.5 1-7.1 1.4-10.6-4.7 34.3-13.8 67.9-27.3 99.8 1.3-3.2 2.7-6.4 4-9.6-13.2 31.2-30.4 60.5-51.1 87.3l6.3-8.1c-20.4 26.2-44 49.8-70.2 70.2l8.1-6.3c-26.8 20.7-56.1 37.9-87.3 51.1 3.2-1.3 6.4-2.7 9.6-4a397.09 397.09 0 01-99.8 27.3c3.5-.5 7.1-1 10.6-1.4-35 4.6-70.5 4.6-105.5 0 3.5.5 7.1 1 10.6 1.4-34.3-4.7-67.9-13.8-99.8-27.3 3.2 1.3 6.4 2.7 9.6 4-31.2-13.2-60.5-30.4-87.3-51.1l8.1 6.3c-26.2-20.4-49.8-44-70.2-70.2l6.3 8.1c-20.7-26.8-37.9-56.1-51.1-87.3 1.3 3.2 2.7 6.4 4 9.6a397.09 397.09 0 01-27.3-99.8c.5 3.5 1 7.1 1.4 10.6-4.6-35-4.6-70.5 0-105.5-.5 3.5-1 7.1-1.4 10.6 4.7-34.3 13.8-67.9 27.3-99.8-1.3 3.2-2.7 6.4-4 9.6 13.2-31.2 30.4-60.5 51.1-87.3l-6.3 8.1c20.4-26.2 44-49.8 70.2-70.2l-8.1 6.3c26.8-20.7 56.1-37.9 87.3-51.1-3.2 1.3-6.4 2.7-9.6 4 31.9-13.4 65.5-22.6 99.8-27.3-3.5.5-7.1 1-10.6 1.4 35-4.6 70.5-4.6 105.5 0-3.5-.5-7.1-1-10.6-1.4 34.3 4.7 67.9 13.8 99.8 27.3-3.2-1.3-6.4-2.7-9.6-4 31.2 13.2 60.5 30.4 87.3 51.1l-8.1-6.3c26.2 20.4 49.8 44 70.2 70.2l-6.3-8.1c20.7 26.8 37.9 56.1 51.1 87.3-1.3-3.2-2.7-6.4-4-9.6 13.4 31.9 22.6 65.5 27.3 99.8-.5-3.5-1-7.1-1.4-10.6 2.3 17.6 3.5 35.2 3.5 52.8 0 20.9 18.4 41 40 40s40-17.6 40-40c-.2-87.7-27-175.9-78-247.4-13.4-18.8-27.9-36.8-43.9-53.4-15.8-16.3-33-30.8-51-44.6-34.3-26.3-72.6-46.3-113.2-61.2-83.6-30.7-178.2-33.4-263.8-9.1-82.4 23.4-158.6 72.1-213.1 138.3-14.7 17.8-28.4 36.5-40.3 56.3-11.8 19.7-21.4 40.3-30.1 61.5-16.8 41-26.1 84.6-29.5 128.8-6.8 88 15.1 178.6 60.9 254.1 44.2 72.9 110.7 133.5 188.6 168.7 21.2 9.6 42.9 18 65.4 24.3 22.9 6.4 46.4 10.3 70 13.1 44.9 5.2 90.6 2.4 134.9-6.6 84.3-17.1 163.6-61.7 222.9-123.8C884 749 925.6 668.2 938.6 582.7c3.5-23.3 5.9-46.6 5.9-70.2 0-20.9-18.4-41-40-40-21.7 1-40 17.6-40 40z" ></path> <path d="M551.5 704v-76.7-122.2V477c0-20.9-18.4-41-40-40-21.7 1-40 17.6-40 40v227c0 20.9 18.4 41 40 40 21.7-1 40-17.6 40-40zM551.5 346v-27c0-20.9-18.4-41-40-40-21.7 1-40 17.6-40 40v27c0 20.9 18.4 41 40 40 21.7-1 40-17.6 40-40z" ></path> </svg> </div> <div class="item-text"> <p class="item-title">Third item</p> <p class="item-subtitle">Lorem ipsum dolor sit amet.</p> </div> </button> <button class="item-button"> <div class="item-icon"> <svg aria-hidden="true" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"> <path d="M21.72,18,13.82,4a2.09,2.09,0,0,0-3.64,0L2.28,18a2.08,2.08,0,0,0,1.81,3.11H19.91A2.08,2.08,0,0,0,21.72,18Zm-1.81,1.11H4.09L4,18.94l8-14a.1.1,0,0,1,.08,0h0L20,19h0ZM11,14V11a1,1,0,0,1,2,0v3a1,1,0,0,1-2,0Zm2,3a1,1,0,1,1-1-1A1,1,0,0,1,13,17Z" /> </svg> </div> <div class="item-text"> <p class="item-title">Fourth item</p> <p class="item-subtitle">Lorem ipsum dolor sit amet.</p> </div> </button> </div> <span class="pointer-arrow"></span> </div> </div> </body>\n</html>\n',mdxType:"PreviewBox"}),(0,o.kt)("h2",{id:"sizes"},"Sizes"),(0,o.kt)("p",null,"To change the drop size use ",(0,o.kt)("a",{parentName:"p",href:"/docs/helpers/size-setters"},"size setter classes"),".\nThese classes just set a ",(0,o.kt)("inlineCode",{parentName:"p"},"font-size")," property so it is possible to change it yourself by writing custom CSS."),(0,o.kt)(s.Z,{height:"360px",children:'\n<!DOCTYPE html>\n<html lang="en"> <head> <meta charset="UTF-8" /> <meta http-equiv="X-UA-Compatible" content="IE=edge" /> <meta name="viewport" content="width=device-width, initial-scale=1.0" /> <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/flatifycss/dist/css/flatify.min.css" /> <title>Dropdown</title> <script src="https://unpkg.com/@popperjs/core@2"><\/script> <script src="https://raw.githack.com/amir2mi/flatifycss/master/dist/js/flatify-min.js"><\/script> </head> <body class="flex-center"> <div class="dropdown-wrapper size-xs"> <button id="my-dropdown-toggle" class="button dropdown-toggle arrow-button" aria-expanded="false"> Small </button> <ul class="dropdown menu-items-wrapper" aria-labelledby="my-dropdown-toggle" > <li class="menu-item heading">My Account</li> <li class="menu-item"><a>Sign up</a></li> <li class="menu-item"><a>Login</a></li> <li aria-hidden="true"><span class="pointer-arrow"></span></li> </ul> </div> <div class="dropdown-wrapper"> <button id="my-dropdown-toggle" class="button dropdown-toggle arrow-button" aria-expanded="false"> Medium </button> <ul class="dropdown menu-items-wrapper" aria-labelledby="my-dropdown-toggle" > <li class="menu-item heading">My Account</li> <li class="menu-item"><a>Sign up</a></li> <li class="menu-item"><a>Login</a></li> <li aria-hidden="true"><span class="pointer-arrow"></span></li> </ul> </div> <div class="dropdown-wrapper size-2x"> <button id="my-dropdown-toggle" class="button dropdown-toggle arrow-button" aria-expanded="false"> Large </button> <ul class="dropdown menu-items-wrapper" aria-labelledby="my-dropdown-toggle" > <li class="menu-item heading">My Account</li> <li class="menu-item"><a>Sign up</a></li> <li class="menu-item"><a>Login</a></li> <li aria-hidden="true"><span class="pointer-arrow"></span></li> </ul> </div> </body>\n</html>\n',mdxType:"PreviewBox"}),(0,o.kt)("pre",null,(0,o.kt)("code",{parentName:"pre",className:"language-html",metastring:'title="index.html"',title:'"index.html"'},'<div class="dropdown-wrapper size-xs">...</div>\n<div class="dropdown-wrapper size-md">...</div>\n<div class="dropdown-wrapper size-2x">...</div>\n')),(0,o.kt)("h2",{id:"colors"},"Colors"),(0,o.kt)("p",null,"There are helper classes for styling elements like dropdown, first read about ",(0,o.kt)("a",{parentName:"p",href:"/docs/helpers/color-setters"},"color setter classes"),"."),(0,o.kt)("div",{className:"admonition admonition-warning alert alert--danger"},(0,o.kt)("div",{parentName:"div",className:"admonition-heading"},(0,o.kt)("h5",{parentName:"div"},(0,o.kt)("span",{parentName:"h5",className:"admonition-icon"},(0,o.kt)("svg",{parentName:"span",xmlns:"http://www.w3.org/2000/svg",width:"12",height:"16",viewBox:"0 0 12 16"},(0,o.kt)("path",{parentName:"svg",fillRule:"evenodd",d:"M5.05.31c.81 2.17.41 3.38-.52 4.31C3.55 5.67 1.98 6.45.9 7.98c-1.45 2.05-1.7 6.53 3.53 7.7-2.2-1.16-2.67-4.52-.3-6.61-.61 2.03.53 3.33 1.94 2.86 1.39-.47 2.3.53 2.27 1.67-.02.78-.31 1.44-1.13 1.81 3.42-.59 4.78-3.42 4.78-5.56 0-2.84-2.53-3.22-1.25-5.61-1.52.13-2.03 1.13-1.89 2.75.09 1.08-1.02 1.8-1.86 1.33-.67-.41-.66-1.19-.06-1.78C8.18 5.31 8.68 2.45 5.05.32L5.03.3l.02.01z"}))),"warning")),(0,o.kt)("div",{parentName:"div",className:"admonition-content"},(0,o.kt)("p",{parentName:"div"},"Do not add color setter classes to ",(0,o.kt)("inlineCode",{parentName:"p"},".dropdown-wrapper"),", inside the wrapper there are a button and dropdown and they are generally separate components, so you should add color setter classes to button and dropdown separately."))),(0,o.kt)(s.Z,{height:"270px",children:'\n<!DOCTYPE html>\n<html lang="en"> <head> <meta charset="UTF-8" /> <meta http-equiv="X-UA-Compatible" content="IE=edge" /> <meta name="viewport" content="width=device-width, initial-scale=1.0" /> <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/flatifycss/dist/css/flatify.min.css" /> <title>Dropdown</title> <script src="https://unpkg.com/@popperjs/core@2"><\/script> <script src="https://raw.githack.com/amir2mi/flatifycss/master/dist/js/flatify-min.js"><\/script> </head> <body class="flex-center"> <div class="dropdown-wrapper"> <button id="my-dropdown-toggle" class="button dropdown-toggle arrow-button style-dark" aria-expanded="false"> Dark </button> <ul class="dropdown menu-items-wrapper style-dark" aria-labelledby="my-dropdown-toggle" > <li class="menu-item heading">My Account</li> <li class="menu-item"><a>Sign up</a></li> <li class="menu-item"><a>Login</a></li> <li aria-hidden="true"><span class="pointer-arrow"></span></li> </ul> </div> <div class="dropdown-wrapper"> <button id="my-dropdown-toggle" class="button dropdown-toggle arrow-button style-pink-light" aria-expanded="false"> Light pink </button> <ul class="dropdown menu-items-wrapper style-pink-light" aria-labelledby="my-dropdown-toggle" > <li class="menu-item heading">My Account</li> <li class="menu-item"><a>Sign up</a></li> <li class="menu-item"><a>Login</a></li> <li aria-hidden="true"><span class="pointer-arrow"></span></li> </ul> </div> <div class="dropdown-wrapper"> <button id="my-dropdown-toggle" class="button dropdown-toggle arrow-button style-green" aria-expanded="false"> green & light green </button> <ul class="dropdown menu-items-wrapper style-green-light" aria-labelledby="my-dropdown-toggle" > <li class="menu-item heading">My Account</li> <li class="menu-item"><a>Sign up</a></li> <li class="menu-item"><a>Login</a></li> <li aria-hidden="true"><span class="pointer-arrow"></span></li> </ul> </div> </body>\n</html>\n',mdxType:"PreviewBox"}),(0,o.kt)("pre",null,(0,o.kt)("code",{parentName:"pre",className:"language-html",metastring:'{2,5} title="index.html"',"{2,5}":!0,title:'"index.html"'},'<div class="dropdown-wrapper">\n  <button id="my-dropdown-toggle" class="button dropdown-toggle arrow-button style-green" aria-expanded="false">\n    Large\n  </button>\n  <ul class="dropdown menu-items-wrapper style-green-light" aria-labelledby="my-dropdown-toggle">\n    <li class="menu-item heading">My Account</li>\n    <li class="menu-item"><a>Sign up</a></li>\n    <li class="menu-item"><a>Login</a></li>\n    <li aria-hidden="true"><span class="pointer-arrow"></span></li>\n  </ul>\n</div>\n')),(0,o.kt)("h2",{id:"customization"},"Customization"),(0,o.kt)("p",null,"You can customize dropdowns, they offer you CSS variables to change, as you might be noticed a typical dropdown uses menu items because it is a ",(0,o.kt)("a",{parentName:"p",href:"/docs/components/menu#submenu"},"submenu"),", to customize them check ",(0,o.kt)("a",{parentName:"p",href:"/docs/components/menu#customization"},"menu component customization"),".\nThese are dropdowns CSS variables:"),(0,o.kt)("p",null,(0,o.kt)("inlineCode",{parentName:"p"},"--flatify__submenu-bg-color"),(0,o.kt)("br",{parentName:"p"}),"\n",(0,o.kt)("inlineCode",{parentName:"p"},"--flatify__submenu-txt-color"),(0,o.kt)("br",{parentName:"p"}),"\n",(0,o.kt)("inlineCode",{parentName:"p"},"--flatify__submenu-border-color")),(0,o.kt)("p",null,(0,o.kt)("inlineCode",{parentName:"p"},"--flatify__dropdown-animation-show-duration"),(0,o.kt)("br",{parentName:"p"}),"\n",(0,o.kt)("inlineCode",{parentName:"p"},"--flatify__dropdown-animation-hide-duration")),(0,o.kt)("p",null,(0,o.kt)("inlineCode",{parentName:"p"},"--flatify__dropdown-animation-show"),(0,o.kt)("br",{parentName:"p"}),"\n",(0,o.kt)("inlineCode",{parentName:"p"},"--flatify__dropdown-animation-hide")),(0,o.kt)("p",null,"It is possible to change colors, animations duration, or change the whole animation, here is an example of customized dropdown:"),(0,o.kt)(s.Z,{height:"420px",children:'\n<!DOCTYPE html>\n<html lang="en"> <head> <meta charset="UTF-8" /> <meta http-equiv="X-UA-Compatible" content="IE=edge" /> <meta name="viewport" content="width=device-width, initial-scale=1.0" /> <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/flatifycss/dist/css/flatify.min.css" /> <title>Dropdown</title> <style> @keyframes my-dropdown-show-animation{ from{ opacity: 0; transform: scale(1.2) rotate(90deg); } to{ opacity: 1; transform: scale(1) rotate(0); } } @keyframes my-dropdown-hide-animation{ from{ transform: scale(1); } 50%{ transform: scale(1.2); } to{ transform: scale(0); } } .my-custom-dropdown{ /* dropdown */ --flatify__dropdown-animation-show: my-dropdown-show-animation 500ms ease; --flatify__dropdown-animation-hide: my-dropdown-hide-animation 500ms ease; /* submenu */ --flatify__submenu-bg-color: #D8334A; --flatify__submenu-txt-color: #F5F7FA; --flatify__submenu-border-color: #BF263C; /* submenu items */ --flatify__submenu-item-bg-color: #BF263C; --flatify__submenu-item-txt-color: #F5F7FA; --flatify__submenu-item-bg-color__hover: #A0D468; --flatify__submenu-item-bg-color__focus: #FFCE54; --flatify__submenu-item-txt-color__hover: #3C3B3D; --flatify__submenu-item-txt-color__focus: #BF263C; } </style> <script src="https://unpkg.com/@popperjs/core@2"><\/script> <script src="https://raw.githack.com/amir2mi/flatifycss/master/dist/js/flatify-min.js"><\/script> </head> <body class="flex-center"> <div class="dropdown-wrapper my-custom-dropdown"> <button id="my-dropdown-toggle" class="button dropdown-toggle arrow-button" aria-expanded="false"> Custom dropdown </button> <ul class="dropdown menu-items-wrapper" aria-labelledby="my-dropdown-toggle" data-dropdown-auto-close="outside" > <li class="menu-item heading">My Account</li> <li class="menu-item"><a href="#">Sign up</a></li> <li class="menu-item"><a href="#">Login</a></li> <li class="menu-item"><a href="#">About us</a></li> <li class="menu-item"><a href="#">Contribute</a></li> <li class="menu-item"><a href="#">Rate it!</a></li> <li aria-hidden="true"><span class="pointer-arrow"></span></li> </ul> </div> </body>\n</html>\n',mdxType:"PreviewBox"}),(0,o.kt)("pre",null,(0,o.kt)("code",{parentName:"pre",className:"language-html",metastring:'title="index.html"',title:'"index.html"'},'<div class="dropdown-wrapper my-custom-dropdown">...</div>\n')),(0,o.kt)("pre",null,(0,o.kt)("code",{parentName:"pre",className:"language-css",metastring:'title="style.css"',title:'"style.css"'},"@keyframes my-dropdown-show-animation {\n  from {\n    opacity: 0;\n    transform: scale(1.2) rotate(90deg);\n  }\n  to {\n    opacity: 1;\n    transform: scale(1) rotate(0);\n  }\n}\n\n@keyframes my-dropdown-hide-animation {\n  from {\n    transform: scale(1);\n  }\n  50% {\n    transform: scale(1.2);\n  }\n  to {\n    transform: scale(0);\n  }\n}\n\n.my-custom-dropdown {\n  /* dropdown */\n  --flatify__dropdown-animation-show: my-dropdown-show-animation 500ms ease;\n  --flatify__dropdown-animation-hide: my-dropdown-hide-animation 500ms ease;\n  /* submenu */\n  --flatify__submenu-bg-color: #d8334a;\n  --flatify__submenu-txt-color: #f5f7fa;\n  --flatify__submenu-border-color: #bf263c;\n  /* submenu items */\n  --flatify__submenu-item-bg-color: #bf263c;\n  --flatify__submenu-item-txt-color: #f5f7fa;\n  --flatify__submenu-item-bg-color__hover: #a0d468;\n  --flatify__submenu-item-bg-color__focus: #ffce54;\n  --flatify__submenu-item-txt-color__hover: #3c3b3d;\n  --flatify__submenu-item-txt-color__focus: #bf263c;\n}\n")))}u.isMDXComponent=!0}}]);