{"componentChunkName":"component---src-templates-blog-js","path":"/blog/how-to-create-tailwind-css-dropdown/","result":{"data":{"site":{"siteMetadata":{"title":"Resources to help developers | Contrast | Devwares"}},"mdx":{"id":"031a03fc-c219-55fa-adda-bfb88c0fd255","excerpt":"Tailwind Dropdowns Tailwind CSS is a powerful and versatile tool that can help you create visually appealing and feature-rich websites. One of the most popular…","body":"var _excluded = [\"components\"];\nfunction _extends() { return _extends = Object.assign ? Object.assign.bind() : function (n) { for (var e = 1; e < arguments.length; e++) { var t = arguments[e]; for (var r in t) ({}).hasOwnProperty.call(t, r) && (n[r] = t[r]); } return n; }, _extends.apply(null, arguments); }\nfunction _objectWithoutProperties(e, t) { if (null == e) return {}; var o, r, i = _objectWithoutPropertiesLoose(e, t); if (Object.getOwnPropertySymbols) { var n = Object.getOwnPropertySymbols(e); for (r = 0; r < n.length; r++) o = n[r], t.indexOf(o) >= 0 || {}.propertyIsEnumerable.call(e, o) && (i[o] = e[o]); } return i; }\nfunction _objectWithoutPropertiesLoose(r, e) { if (null == r) return {}; var t = {}; for (var n in r) if ({}.hasOwnProperty.call(r, n)) { if (e.indexOf(n) >= 0) continue; t[n] = r[n]; } return t; }\n/* @jsxRuntime classic */\n/* @jsx mdx */\n\nvar _frontmatter = {\n \"title\": \"How to create Tailwind CSS dropdown\",\n \"lastUpdated\": \"20 May 2024\",\n \"date\": \"2021-01-10T02:16:04+01:00\",\n \"metaTitle\": \"How to create Tailwind CSS dropdown\",\n \"metaDescription\": \"Dropdowns are very important for responsive websites and applications. We shall look at the ways to create this tailwind css dropdown example\",\n \"type\": \"blog\",\n \"author\": \"Emmanuel Chinonso\",\n \"role\": \"Technical Writer\",\n \"authorImage\": \"/blog/author/author_emmanuel.jpg\",\n \"image\": \"./_/images/how-to-create-tailwind-css-dropdown.png\",\n \"tags\": [\"tailwind css\", \"bootstrap\", \"bootstrap 5 alpha\"],\n \"previousTitle\": \"How to create Tailwind CSS Components for your Website\",\n \"previousPath\": \"how-to-create-tailwind-css-components-for-your-website\",\n \"nextTitle\": \"How to create Tailwind CSS Modal:A Step-by-Step Guide\",\n \"nextPath\": \"how-to-create-tailwind-css-modal\",\n \"blogtype\": \"tailwindcss\",\n \"canonicalUrl\": \"https://windframe.dev/blog/how-to-create-tailwind-css-dropdown\"\n};\nvar layoutProps = {\n _frontmatter: _frontmatter\n};\nvar MDXLayout = \"wrapper\";\nreturn function MDXContent(_ref) {\n var components = _ref.components,\n props = _objectWithoutProperties(_ref, _excluded);\n return mdx(MDXLayout, _extends({}, layoutProps, props, {\n components: components,\n mdxType: \"MDXLayout\"\n }), mdx(\"h1\", null, \"Tailwind Dropdowns\"), mdx(\"p\", null, \"Tailwind CSS is a powerful and versatile tool that can help you create visually appealing and feature-rich websites. One of the most popular features of Tailwind is its ability to create dropdown menus. Dropdowns allow you to provide additional content to users without taking up too much space on the page. In this blog, we will walk through the steps to create a Tailwind CSS dropdown menu.\"), mdx(\"h2\", null, \"Table of content\"), mdx(\"ul\", null, mdx(\"li\", {\n parentName: \"ul\"\n }, \"Installing Tailwind CSS\"), mdx(\"li\", {\n parentName: \"ul\"\n }, \"Setting up the Html Structure.\"), mdx(\"li\", {\n parentName: \"ul\"\n }, \"Adding the Classes to the Tailwind dropdown\"), mdx(\"li\", {\n parentName: \"ul\"\n }, \"Overview of Tailwind CSS dropdown menu\"), mdx(\"li\", {\n parentName: \"ul\"\n }, \"Conclusion\")), mdx(\"h2\", null, \"Installing Tailwind CSS\"), mdx(\"p\", null, \"We have to install Tailwind CSS before we can start building our Tailwind dropdown menu. There are many ways you can do this. You can check our post here to understand it \", mdx(\"a\", {\n parentName: \"p\",\n \"href\": \"/blog/How-to-use-tailwind-css-in-HTML\"\n }, \"better\"), \".\"), mdx(\"h2\", null, \"Setting up the Html Structure.\"), mdx(\"p\", null, \"The first step to creating a Tailwind CSS dropdown is setting up the HTML structure. You will need to create a div container with a class of \\u201Cdropdown\\u201D. Inside this div, you should create two other divs, one for the dropdown trigger and one for the dropdown menu. The trigger div should contain an anchor tag with an id, class, and aria-haspopup attribute. The menu div should contain a list of links, each with its own class of \\u201Cdropdown-item\\u201D.\"), mdx(\"pre\", null, mdx(\"code\", {\n parentName: \"pre\",\n \"className\": \"language-html\"\n }, \"\\n\\n \\n \\n \\n \\n Drop down meanu\\n \\n \\n \\n