flowbite-mcp 1.1.3 → 1.1.5

package/data/components/dropdowns.md

@@ -1,20 +1,6 @@
----
-layout: docs
-title: Tailwind CSS Dropdown - Flowbite
-description: Get started with the dropdown component to show a list of menu items when clicking on the trigger element based on multiple layouts, styles, and placements
-group: components
-toc: true
-requires_js: true
-
-previous: Drawer
-previousLink: components/drawer/
-next: Footer
-nextLink: components/footer/
----
-
 The dropdown component can be used to show a list of menu items when clicking on an element such as a button and hiding it when focusing outside of the triggering element.
 
-Make sure to include <a href="{{< ref "getting-started/quickstart" >}}">Flowbite's JavaScript file</a> inside your project to enable dropdowns.
+Make sure to include Flowbite's JavaScript file inside your project to enable dropdowns.
 
 ## Dropdown example
 
@@ -22,7 +8,7 @@ If you want to show a dropdown menu when clicking on an element make sure that y
 
 The `dropdownId` is the id of the dropdown menu element.
 
-{{< example class="flex justify-center" github="components/dropdowns.md" show_dark=true iframeHeight="300" >}}
+```html
 <button id="dropdownDefaultButton" data-dropdown-toggle="dropdown" class="inline-flex items-center justify-center text-white bg-brand box-border border border-transparent hover:bg-brand-strong focus:ring-4 focus:ring-brand-medium shadow-xs font-medium leading-5 rounded-base text-sm px-4 py-2.5 focus:outline-none" type="button">
   Dropdown button 
   <svg class="w-4 h-4 ms-1.5 -me-0.5" aria-hidden="true" xmlns="http://www.w3.org/2000/svg" width="24" height="24" fill="none" viewBox="0 0 24 24"><path stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="m19 9-7 7-7-7"/></svg>
@@ -45,7 +31,7 @@ The `dropdownId` is the id of the dropdown menu element.
       </li>
     </ul>
 </div>
-{{< /example >}}
+```
 
 ## Dropdown hover
 
@@ -53,7 +39,7 @@ Use the `data-dropdown-trigger="{hover|click}"` data attribute options to set wh
 
 There's a 300ms default delay when showing or hiding the dropdown due to UI/UX reasons and how it may affect the interaction with other components on the page. Generally, we recommend using the `click` method.
 
-{{< example class="flex justify-center" github="components/dropdowns.md" show_dark=true iframeHeight="300" >}}
+```html
 <button id="dropdownHoverButton" data-dropdown-toggle="dropdownHover" data-dropdown-trigger="hover" class="inline-flex items-center justify-center text-white bg-brand box-border border border-transparent hover:bg-brand-strong focus:ring-4 focus:ring-brand-medium shadow-xs font-medium leading-5 rounded-base text-sm px-4 py-2.5 focus:outline-none" type="button">
   Dropdown button 
   <svg class="w-4 h-4 ms-1.5 -me-0.5" aria-hidden="true" xmlns="http://www.w3.org/2000/svg" width="24" height="24" fill="none" viewBox="0 0 24 24"><path stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="m19 9-7 7-7-7"/></svg>
@@ -76,13 +62,13 @@ There's a 300ms default delay when showing or hiding the dropdown due to UI/UX r
       </li>
     </ul>
 </div>
-{{< /example >}}
+```
 
 ### Delay duration
 
 You can use the `data-dropdown-delay={milliseconds}` data attribute to set they delay on when to show or hide the dropdown menu when using hover. You may want to use this depending on how the users interact with your interface. In this example we add 500 milliseconds instead of the default 300.
 
-{{< example class="flex justify-center" github="components/dropdowns.md" show_dark=true iframeHeight="300" >}}
+```html
 <button id="dropdownDelayButton" data-dropdown-toggle="dropdownDelay" data-dropdown-delay="500" data-dropdown-trigger="hover" class="inline-flex items-center justify-center text-white bg-brand box-border border border-transparent hover:bg-brand-strong focus:ring-4 focus:ring-brand-medium shadow-xs font-medium leading-5 rounded-base text-sm px-4 py-2.5 focus:outline-none" type="button">
   Dropdown button 
   <svg class="w-4 h-4 ms-1.5 -me-0.5" aria-hidden="true" xmlns="http://www.w3.org/2000/svg" width="24" height="24" fill="none" viewBox="0 0 24 24"><path stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="m19 9-7 7-7-7"/></svg>
@@ -105,13 +91,13 @@ You can use the `data-dropdown-delay={milliseconds}` data attribute to set they
       </li>
     </ul>
 </div>
-{{< /example >}}
+```
 
 ## Dropdown divider
 
 You can use the `divide-y divide-gray-100` classes to add separate elements inside the dropdown menu.
 
-{{< example class="flex justify-center" github="components/dropdowns.md" show_dark=true iframeHeight="320" >}}
+```html
 <button id="dropdownDividerButton" data-dropdown-toggle="dropdownDivider" class="inline-flex items-center justify-center text-white bg-brand box-border border border-transparent hover:bg-brand-strong focus:ring-4 focus:ring-brand-medium shadow-xs font-medium leading-5 rounded-base text-sm px-4 py-2.5 focus:outline-none" type="button">
   Dropdown button 
   <svg class="w-4 h-4 ms-1.5 -me-0.5" aria-hidden="true" xmlns="http://www.w3.org/2000/svg" width="24" height="24" fill="none" viewBox="0 0 24 24"><path stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="m19 9-7 7-7-7"/></svg>
@@ -134,13 +120,13 @@ You can use the `divide-y divide-gray-100` classes to add separate elements insi
       <a href="#" class="inline-flex items-center w-full p-2 hover:bg-neutral-tertiary-medium hover:text-heading rounded">Separated link</a>
     </div>
 </div>
-{{< /example >}}
+```
 
 ## Dropdown header
 
 Use this example to show extra information outside of the list of menu items inside the dropdown.
 
-{{< example class="flex justify-center " github="components/dropdowns.md" show_dark=true iframeHeight="520" >}}
+```html
 <button id="dropdownInformationButton" data-dropdown-toggle="dropdownInformation" class="inline-flex items-center justify-center text-white bg-brand box-border border border-transparent hover:bg-brand-strong focus:ring-4 focus:ring-brand-medium shadow-xs font-medium leading-5 rounded-base text-sm px-4 py-2.5 focus:outline-none" type="button">
   Dropdown button 
   <svg class="w-4 h-4 ms-1.5 -me-0.5" aria-hidden="true" xmlns="http://www.w3.org/2000/svg" width="24" height="24" fill="none" viewBox="0 0 24 24"><path stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="m19 9-7 7-7-7"/></svg>
@@ -213,13 +199,13 @@ Use this example to show extra information outside of the list of menu items ins
       </li>
     </ul>
 </div>
-{{< /example >}}
+```
 
 ## Multi-level dropdown
 
 Use this example to enable multi-level dropdown menus by adding stacked elements inside of each other.
 
-{{< example class="flex justify-center" github="components/dropdowns.md" show_dark=true iframeHeight="350" >}}
+```html
 <button id="multiLevelDropdownButton" data-dropdown-toggle="multi-dropdown" class="inline-flex items-center justify-center text-white bg-brand box-border border border-transparent hover:bg-brand-strong focus:ring-4 focus:ring-brand-medium shadow-xs font-medium leading-5 rounded-base text-sm px-4 py-2.5 focus:outline-none" type="button">
   Dropdown button 
   <svg class="w-4 h-4 ms-1.5 -me-0.5" aria-hidden="true" xmlns="http://www.w3.org/2000/svg" width="24" height="24" fill="none" viewBox="0 0 24 24"><path stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="m19 9-7 7-7-7"/></svg>
@@ -261,13 +247,13 @@ Use this example to enable multi-level dropdown menus by adding stacked elements
       </li>
     </ul>
 </div>
-{{< /example >}}
+```
 
 ## Dropdown with checkbox
 
 Add multiple checkbox elements inside your dropdown menu to enable more advanced input interaction.
 
-{{< example class="flex justify-center" github="components/dropdowns.md" show_dark=true iframeHeight="290" >}}
+```html
 <button id="dropdownCheckboxButton" data-dropdown-toggle="dropdownDefaultCheckbox" class="inline-flex items-center justify-center text-white bg-brand box-border border border-transparent hover:bg-brand-strong focus:ring-4 focus:ring-brand-medium shadow-xs font-medium leading-5 rounded-base text-sm px-4 py-2.5 focus:outline-none" type="button">
   Dropdown button 
   <svg class="w-4 h-4 ms-1.5 -me-0.5" aria-hidden="true" xmlns="http://www.w3.org/2000/svg" width="24" height="24" fill="none" viewBox="0 0 24 24"><path stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="m19 9-7 7-7-7"/></svg>
@@ -295,13 +281,13 @@ Add multiple checkbox elements inside your dropdown menu to enable more advanced
       </li>
     </ul>
 </div>
-{{< /example >}}
+```
 
 ### Background hover
 
 Use this example to update the background color of a menu item when using a list of checkbox elements.
 
-{{< example class="flex justify-center" github="components/dropdowns.md" show_dark=true iframeHeight="300" >}}
+```html
 <button id="dropdownBgHoverButton" data-dropdown-toggle="dropdownBgHover" class="inline-flex items-center justify-center text-white bg-brand box-border border border-transparent hover:bg-brand-strong focus:ring-4 focus:ring-brand-medium shadow-xs font-medium leading-5 rounded-base text-sm px-4 py-2.5 focus:outline-none" type="button">
   Dropdown button 
   <svg class="w-4 h-4 ms-1.5 -me-0.5" aria-hidden="true" xmlns="http://www.w3.org/2000/svg" width="24" height="24" fill="none" viewBox="0 0 24 24"><path stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="m19 9-7 7-7-7"/></svg>
@@ -330,13 +316,13 @@ Use this example to update the background color of a menu item when using a list
       </li>
     </ul>
 </div>
-{{< /example >}}
+```
 
 ### Helper text
 
 Add an extra helper text to each checkbox element inside the dropdown menu list with this example.
 
-{{< example class="flex justify-center" github="components/dropdowns.md" show_dark=true iframeHeight="380" >}}
+```html
 <button id="dropdownHelperButton" data-dropdown-toggle="dropdownHelper" class="inline-flex items-center justify-center text-white bg-brand box-border border border-transparent hover:bg-brand-strong focus:ring-4 focus:ring-brand-medium shadow-xs font-medium leading-5 rounded-base text-sm px-4 py-2.5 focus:outline-none" type="button">
   Dropdown button 
   <svg class="w-4 h-4 ms-1.5 -me-0.5" aria-hidden="true" xmlns="http://www.w3.org/2000/svg" width="24" height="24" fill="none" viewBox="0 0 24 24"><path stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="m19 9-7 7-7-7"/></svg>
@@ -385,13 +371,13 @@ Add an extra helper text to each checkbox element inside the dropdown menu list
       </li>
     </ul>
 </div>
-{{< /example >}}
+```
 
 ## Dropdown with radio
 
 Enable more advanced interaction with your users by adding radio input elements inside the dropdown menu.
 
-{{< example class="flex justify-center" github="components/dropdowns.md" show_dark=true iframeHeight="250" >}}
+```html
 <button id="dropdownRadioButton" data-dropdown-toggle="dropdownDefaultRadio" class="inline-flex items-center justify-center text-white bg-brand box-border border border-transparent hover:bg-brand-strong focus:ring-4 focus:ring-brand-medium shadow-xs font-medium leading-5 rounded-base text-sm px-4 py-2.5 focus:outline-none" type="button">
   Dropdown radio 
   <svg class="w-4 h-4 ms-1.5 -me-0.5" aria-hidden="true" xmlns="http://www.w3.org/2000/svg" width="24" height="24" fill="none" viewBox="0 0 24 24"><path stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="m19 9-7 7-7-7"/></svg>
@@ -420,13 +406,13 @@ Enable more advanced interaction with your users by adding radio input elements
       </li>
     </ul>
 </div>
-{{< /example >}}
+```
 
 ### Background hover
 
 Use this example to update the background color when hovering over a menu item when using radio elements.
 
-{{< example class="flex justify-center" github="components/dropdowns.md" show_dark=true iframeHeight="280" >}}
+```html
 <button id="dropdownRadioBgHoverButton" data-dropdown-toggle="dropdownRadioBgHover" class="inline-flex items-center justify-center text-white bg-brand box-border border border-transparent hover:bg-brand-strong focus:ring-4 focus:ring-brand-medium shadow-xs font-medium leading-5 rounded-base text-sm px-4 py-2.5 focus:outline-none" type="button">
   Dropdown button 
   <svg class="w-4 h-4 ms-1.5 -me-0.5" aria-hidden="true" xmlns="http://www.w3.org/2000/svg" width="24" height="24" fill="none" viewBox="0 0 24 24"><path stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="m19 9-7 7-7-7"/></svg>
@@ -455,13 +441,13 @@ Use this example to update the background color when hovering over a menu item w
       </li>
     </ul>
 </div>
-{{< /example >}}
+```
 
 ### Helper text
 
 This example can be used to add an extra helper text inside of each radio element from the dropdown menu.
 
-{{< example class="flex justify-center" github="components/dropdowns.md" show_dark=true iframeHeight="380" >}}
+```html
 
 <button id="dropdownHelperRadioButton" data-dropdown-toggle="dropdownHelperRadio" class="inline-flex items-center justify-center text-white bg-brand box-border border border-transparent hover:bg-brand-strong focus:ring-4 focus:ring-brand-medium shadow-xs font-medium leading-5 rounded-base text-sm px-4 py-2.5 focus:outline-none" type="button">
   Dropdown button 
@@ -512,13 +498,13 @@ This example can be used to add an extra helper text inside of each radio elemen
       </li>
     </ul>
 </div>
-{{< /example >}}
+```
 
 ## Dropdown with toggle switch
 
 Show a list of toggle switch elements inside the dropdown menu to enable a yes or no type of choice.
 
-{{< example class="flex justify-center" github="components/dropdowns.md" show_dark=true iframeHeight="280" >}}
+```html
 <button id="dropdownToggleButton" data-dropdown-toggle="dropdownToggle" class="inline-flex items-center justify-center text-white bg-brand box-border border border-transparent hover:bg-brand-strong focus:ring-4 focus:ring-brand-medium shadow-xs font-medium leading-5 rounded-base text-sm px-4 py-2.5 focus:outline-none" type="button">
   Dropdown button 
   <svg class="w-4 h-4 ms-1.5 -me-0.5" aria-hidden="true" xmlns="http://www.w3.org/2000/svg" width="24" height="24" fill="none" viewBox="0 0 24 24"><path stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="m19 9-7 7-7-7"/></svg>
@@ -557,13 +543,13 @@ Show a list of toggle switch elements inside the dropdown menu to enable a yes o
     </ul>
 </div>
 
-{{< /example >}}
+```
 
 ## Dropdown with scrolling
 
 This example can be used when you want to show a long list of items that won't affect the height of the dropdown menu by enabling a scrolling behaviour.
 
-{{< example class="flex justify-center" github="components/dropdowns.md" show_dark=true iframeHeight="380" >}}
+```html
 <button id="dropdownUsersButton" data-dropdown-toggle="dropdownUsers" data-dropdown-placement="bottom" class="inline-flex items-center justify-center text-white bg-brand box-border border border-transparent hover:bg-brand-strong focus:ring-4 focus:ring-brand-medium shadow-xs font-medium leading-5 rounded-base text-sm px-4 py-2.5 focus:outline-none" type="button">
   Dropdown button 
   <svg class="w-4 h-4 ms-1.5 -me-0.5" aria-hidden="true" xmlns="http://www.w3.org/2000/svg" width="24" height="24" fill="none" viewBox="0 0 24 24"><path stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="m19 9-7 7-7-7"/></svg>
@@ -628,13 +614,13 @@ This example can be used when you want to show a long list of items that won't a
       </button>
   </div>
 </div>
-{{< /example >}}
+```
 
 ## Scrollable checkboxes
 
 Use this example to show multiple dropdown items in a scrollable container with checkboxes.
 
-{{< example class="flex justify-center" github="components/dropdowns.md" show_dark=true iframeHeight="380" >}}
+```html
 <button id="dropdownUsersAdvancedButton" data-dropdown-toggle="dropdownAdvanced" data-dropdown-placement="bottom" class="inline-flex items-center justify-center text-white bg-brand box-border border border-transparent hover:bg-brand-strong focus:ring-4 focus:ring-brand-medium shadow-xs font-medium leading-5 rounded-base text-sm px-4 py-2.5 focus:outline-none" type="button">
   Dropdown button 
   <svg class="w-4 h-4 ms-1.5 -me-0.5" aria-hidden="true" xmlns="http://www.w3.org/2000/svg" width="24" height="24" fill="none" viewBox="0 0 24 24"><path stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="m19 9-7 7-7-7"/></svg>
@@ -723,13 +709,13 @@ Use this example to show multiple dropdown items in a scrollable container with
       </button>
   </div>
 </div>
-{{< /example >}}
+```
 
 ## Dropdown with search
 
 Use this example if you want to add a search bar inside the dropdown menu to be able to filter through a long list of menu items with scrolling behaviour.
 
-{{< example class="flex justify-center" github="components/dropdowns.md" show_dark=true iframeHeight="440" >}}
+```html
 <button id="dropdownUsersSearchButton" data-dropdown-toggle="dropdownSearch" data-dropdown-placement="bottom" class="inline-flex items-center justify-center text-white bg-brand box-border border border-transparent hover:bg-brand-strong focus:ring-4 focus:ring-brand-medium shadow-xs font-medium leading-5 rounded-base text-sm px-4 py-2.5 focus:outline-none" type="button">
   Dropdown button 
   <svg class="w-4 h-4 ms-1.5 -me-0.5" aria-hidden="true" xmlns="http://www.w3.org/2000/svg" width="24" height="24" fill="none" viewBox="0 0 24 24"><path stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="m19 9-7 7-7-7"/></svg>
@@ -822,13 +808,13 @@ Use this example if you want to add a search bar inside the dropdown menu to be
       </button>
   </div>
 </div>
-{{< /example >}}
+```
 
 ## Menu icon
 
 Use the menu icon trigger element on components such as cards as an alternative element to the button.
 
-{{< example class="flex justify-center space-x-4 rtl:space-x-reverse" github="components/dropdowns.md" show_dark=true iframeHeight="320" >}}
+```html
 <button id="dropdownMenuIconButton" data-dropdown-toggle="dropdownDots" class="text-heading bg-neutral-primary box-border border border-transparent hover:bg-neutral-secondary-medium focus:ring-4 focus:ring-neutral-tertiary font-medium leading-5 rounded-base text-sm p-2 focus:outline-none" type="button">
   <svg class="w-6 h-6" aria-hidden="true" xmlns="http://www.w3.org/2000/svg" width="24" height="24" fill="none" viewBox="0 0 24 24"><path stroke="currentColor" stroke-linecap="round" stroke-width="3" d="M12 6h.01M12 12h.01M12 18h.01"/></svg>
 </button>
@@ -872,13 +858,13 @@ Use the menu icon trigger element on components such as cards as an alternative
       <a href="#" class="inline-flex items-center w-full p-2 hover:bg-neutral-tertiary-medium hover:text-heading rounded">Separated link</a>
     </div>
 </div>
-{{< /example >}}
+```
 
 ## Notification bell
 
 Use this example to show a list of notifications inside your application by providing more detailed information such as the user avatar, content and time of notification triggered by a notification bell icon.
 
-{{< example class="flex justify-center" github="components/dropdowns.md" show_dark=true iframeHeight="660" >}}
+```html
 
 <button id="dropdownNotificationButton" data-dropdown-toggle="dropdownNotification" class="relative inline-flex items-center text-sm font-medium text-center text-body hover:text-heading focus:outline-none" type="button">
   <svg class="w-6 h-6" aria-hidden="true" xmlns="http://www.w3.org/2000/svg" width="24" height="24" fill="none" viewBox="0 0 24 24"><path stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M12 5.365V3m0 2.365a5.338 5.338 0 0 1 5.133 5.368v1.8c0 2.386 1.867 2.982 1.867 4.175 0 .593 0 1.292-.538 1.292H5.538C5 18 5 17.301 5 16.708c0-1.193 1.867-1.789 1.867-4.175v-1.8A5.338 5.338 0 0 1 12 5.365ZM8.733 18c.094.852.306 1.54.944 2.112a3.48 3.48 0 0 0 4.646 0c.638-.572 1.236-1.26 1.33-2.112h-6.92Z"/></svg>
@@ -960,13 +946,13 @@ Use this example to show a list of notifications inside your application by prov
     </div>
   </a>
 </div>
-{{< /example >}}
+```
 
 ## User avatar
 
 This example can be used to show a list of menu items and options when a user is logged into your application.
 
-{{< example class="flex justify-center" github="components/dropdowns.md" show_dark=true iframeHeight="520" >}}
+```html
 <button id="dropdownUserAvatarButton" data-dropdown-toggle="dropdownAvatar" class="flex text-sm bg-dark rounded-full md:me-0 focus:ring-4 focus:ring-neutral-quaternary" type="button">
   <span class="sr-only">Open user menu</span>
   <img class="w-8 h-8 rounded-full" src="/docs/images/people/profile-picture-5.jpg" alt="user photo">
@@ -1040,13 +1026,13 @@ This example can be used to show a list of menu items and options when a user is
       </li>
     </ul>
 </div>
-{{< /example >}}
+```
 
 ### Avatar with name
 
 Use this example to also show the name or email of the user next to the avatar for the dropdown menu.
 
-{{< example class="flex justify-center" github="components/dropdowns.md" show_dark=true iframeHeight="520" >}}
+```html
 <button id="dropdownAvatarNameButton" data-dropdown-toggle="dropdownAvatarName" class="flex items-center text-sm pe-1 font-medium text-heading rounded-full hover:text-fg-brand md:me-0 focus:ring-4 focus:ring-neutral-tertiary" type="button">
   <span class="sr-only">Open user menu</span>
   <img class="w-8 h-8 me-2 rounded-full" src="/docs/images/people/profile-picture-5.jpg" alt="user photo">
@@ -1122,13 +1108,13 @@ Use this example to also show the name or email of the user next to the avatar f
       </li>
     </ul>
 </div>
-{{< /example >}}
+```
 
 ## Dropdown navbar
 
 You can also use the dropdown element inside a navigation bar and add a second level of navigation hierarchy, but make sure to use a `button` element.
 
-{{< example bodyClass="!p-0" github="components/dropdowns.md" show_dark=true iframeHeight="380" >}}
+```html
 
 <nav class="bg-neutral-primary border-default">
   <div class="max-w-screen-xl flex flex-wrap items-center justify-between mx-auto px-4 py-2.5">
@@ -1178,13 +1164,13 @@ You can also use the dropdown element inside a navigation bar and add a second l
     </div>
   </div>
 </nav>
-{{< /example >}}
+```
 
 ## Dropdown datepicker
 
 Use this example to show a date range picker inside a dropdown menu. Use the `data-dropdown-ignore-click-outside-class={class}` option to keep the dropdown menu open when interacting with the datepicker component by setting the element's parent class name.
 
-{{< example class="flex justify-center" github="components/dropdowns.md" show_dark=true iframeHeight="520" >}}
+```html
 <button id="dateRangeButton" data-dropdown-toggle="dateRangeDropdown" data-dropdown-ignore-click-outside-class="datepicker" type="button" class="inline-flex items-center text-fg-brand font-medium hover:underline">
 31 Nov <p class="ms-1"> - 31 Dev </p> 
   <svg class="w-5 h-5 ms-1.5" aria-hidden="true" xmlns="http://www.w3.org/2000/svg" width="24" height="24" fill="none" viewBox="0 0 24 24"><path stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="m19 9-7 7-7-7"/></svg>
@@ -1209,13 +1195,13 @@ Use this example to show a date range picker inside a dropdown menu. Use the `da
     </div>
   </div>
 </div>
-{{< /example >}}
+```
 
 ## Sizes
 
 The dropdown menus work with buttons of all sizes including smaller or larger ones.
 
-{{< example github="components/dropdowns.md" class="space-x-2 space-y-2" show_dark=true iframeHeight="380" >}}
+```html
 <button id="dropdownSmallButton" data-dropdown-toggle="dropdownSmall" class="inline-flex items-center text-white bg-brand box-border border border-transparent hover:bg-brand-strong focus:ring-4 focus:ring-brand-medium shadow-xs font-medium leading-5 rounded-base text-sm px-4 py-2.5 focus:outline-none" type="button">
   Small dropdown 
   <svg class="w-4 h-4 ms-1.5 -me-0.5" aria-hidden="true" xmlns="http://www.w3.org/2000/svg" width="24" height="24" fill="none" viewBox="0 0 24 24"><path stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="m19 9-7 7-7-7"/></svg>
@@ -1261,13 +1247,13 @@ The dropdown menus work with buttons of all sizes including smaller or larger on
       </li>
     </ul>
 </div>
-{{< /example >}}
+```
 
 ## Placement
 
 You can also use the `data-dropdown-placement={top|right|bottom|left}` data attribute options to choose the placement of the dropdown menu. By default the positioning is set to the bottom side of the button.
 
-{{< example class="flex flex-wrap space-x-4 justify-center py-48" github="components/dropdowns.md" show_dark=true >}}
+```html
 <button id="dropdownTopButton" data-dropdown-toggle="dropdownTop" data-dropdown-placement="top" class="inline-flex items-center text-white bg-brand box-border border border-transparent hover:bg-brand-strong focus:ring-4 focus:ring-brand-medium shadow-xs font-medium leading-5 rounded-base text-sm px-4 py-2.5 focus:outline-none" type="button">
   Dropdown top 
   <svg class="w-4 h-4 ms-1.5 -me-0.5" aria-hidden="true" xmlns="http://www.w3.org/2000/svg" width="24" height="24" fill="none" viewBox="0 0 24 24"><path stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="m5 15 7-7 7 7"/></svg>
@@ -1359,13 +1345,13 @@ You can also use the `data-dropdown-placement={top|right|bottom|left}` data attr
       </li>
     </ul>
 </div>
-{{< /example >}}
+```
 
 ### Double placement
 
 You can combine the placement options by using the `top|right|bottom|left-{start|end}` values. For example, `left-end` will position the dropdown on the left bottom, whereas `right-end` will position it on the right bottom side.
 
-{{< example class="flex flex-wrap justify-center space-x-4" github="components/dropdowns.md" iframeHeight="240" show_dark=true >}}
+```html
 <button id="dropdownLeftEndButton" data-dropdown-toggle="dropdownLeftEnd" data-dropdown-placement="left-end" class="inline-flex items-center text-white bg-brand box-border border border-transparent hover:bg-brand-strong focus:ring-4 focus:ring-brand-medium shadow-xs font-medium leading-5 rounded-base text-sm px-4 py-2.5 focus:outline-none" type="button">
   <svg class="w-4 h-4 me-1.5 -ms-0.5" aria-hidden="true" xmlns="http://www.w3.org/2000/svg" width="24" height="24" fill="none" viewBox="0 0 24 24"><path stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="m15 19-7-7 7-7"/></svg>
   Dropdown left end
@@ -1411,7 +1397,7 @@ You can combine the placement options by using the `top|right|bottom|left-{start
       </li>
     </ul>
 </div>
-{{< /example >}}
+```
 
 ## Dropdown offset
 
@@ -1421,7 +1407,7 @@ Use the offset options on the dropdown component to set the distance and skiddin
 
 Use the `data-dropdown-offset-distance={pixels}` data attribute to set the number of pixels you want the dropdown menu to be offset from the trigger element.
 
-{{< example class="flex flex-wrap justify-center" github="components/dropdowns.md" iframeHeight="320" show_dark=true >}}
+```html
 <button id="dropdownOffsetButton" data-dropdown-toggle="dropdownDistance" data-dropdown-offset-distance="35" data-dropdown-offset-skidding="0" class="inline-flex items-center text-white bg-brand box-border border border-transparent hover:bg-brand-strong focus:ring-4 focus:ring-brand-medium shadow-xs font-medium leading-5 rounded-base text-sm px-4 py-2.5 focus:outline-none" type="button">
   Dropdown button 
   <svg class="w-4 h-4 ms-1.5 -me-0.5 rtl:rotate-180" aria-hidden="true" xmlns="http://www.w3.org/2000/svg" width="24" height="24" fill="none" viewBox="0 0 24 24"><path stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="m9 5 7 7-7 7"/></svg>
@@ -1444,13 +1430,13 @@ Use the `data-dropdown-offset-distance={pixels}` data attribute to set the numbe
       </li>
     </ul>
 </div>
-{{< /example >}}
+```
 
 ### Skidding
 
 The `data-dropdown-offset-skidding={pixels}` data attribute can be used to move up or down (or left and right) the dropdown menu along and relative to the trigger element.
 
-{{< example class="flex flex-wrap justify-center" github="components/dropdowns.md" iframeHeight="320" show_dark=true >}}
+```html
 <button id="dropdownOffsetButton" data-dropdown-toggle="dropdownSkidding" data-dropdown-offset-distance="10" data-dropdown-offset-skidding="100" data-dropdown-placement="right" class="inline-flex items-center text-white bg-brand box-border border border-transparent hover:bg-brand-strong focus:ring-4 focus:ring-brand-medium shadow-xs font-medium leading-5 rounded-base text-sm px-4 py-2.5 focus:outline-none" type="button">
   Dropdown button 
   <svg class="w-4 h-4 ms-1.5 -me-0.5" aria-hidden="true" xmlns="http://www.w3.org/2000/svg" width="24" height="24" fill="none" viewBox="0 0 24 24"><path stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="m19 9-7 7-7-7"/></svg>
@@ -1473,7 +1459,7 @@ The `data-dropdown-offset-skidding={pixels}` data attribute can be used to move
       </li>
     </ul>
 </div>
-{{< /example >}}
+```
 
 ## More examples
 
@@ -1774,7 +1760,7 @@ First of all, you need to set the main target element which will be the dropdown
 
 After that, you can also optionally set an options object to set the placement of the dropdown menu and callback functions.
 
-{{< code lang="javascript" file="dropdown.js" icon="file" >}}
+```javascript
 // set the dropdown menu element
 const $targetEl = document.getElementById('dropdownMenu');
 
@@ -1805,11 +1791,11 @@ const instanceOptions = {
   id: 'dropdownMenu',
   override: true
 };
-{{< /code >}}
+```
 
 Create a new Dropdown object based on the options above.
 
-{{< code lang="javascript" file="dropdown.js" icon="file" >}}
+```javascript
 import { Dropdown } from 'flowbite';
 
 /*
@@ -1819,11 +1805,11 @@ import { Dropdown } from 'flowbite';
  * instanceOptions: optional
  */
 const dropdown = new Dropdown($targetEl, $triggerEl, options, instanceOptions);
-{{< /code >}}
+```
 
 Use the `show` and `hide` methods on the Dropdown object to programmatically show or hide the dropdown menu directly from JavaScript.
 
-{{< code lang="javascript" file="dropdown.js" icon="file" >}}
+```javascript
 // show the dropdown menu
 dropdown.show();
 
@@ -1835,13 +1821,13 @@ dropdown.toggle();
 
 // check if dropdown is visible/open
 dropdown.isVisible();
-{{< /code >}}
+```
 
 ### HTML Markup
 
 Use the following HTML code for the JavaScript example above.
 
-{{< code lang="html" file="dropdown.html" icon="file" >}}
+```html
 <button id="dropdownButton" data-dropdown-toggle="dropdown" class="text-white bg-blue-700 hover:bg-blue-800 focus:ring-4 focus:outline-none focus:ring-blue-300 font-medium rounded-base text-sm px-5 py-2.5 text-center inline-flex items-center dark:bg-blue-600 dark:hover:bg-blue-700 dark:focus:ring-blue-800" type="button">Dropdown button <svg class="w-2.5 h-2.5 ms-3" aria-hidden="true" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 10 6">
 <path stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="m1 1 4 4 4-4"/>
 </svg>
@@ -1864,15 +1850,15 @@ Use the following HTML code for the JavaScript example above.
       </li>
     </ul>
 </div>
-{{< /code >}}
+```
 
 ### TypeScript
 
-If you're using the <a href="{{< ref "getting-started/typescript" >}}">TypeScript configuration</a> from Flowbite then you can import the types for the Dropdown class, parameters and its options.
+If you're using the TypeScript configuration from Flowbite then you can import the types for the Dropdown class, parameters and its options.
 
 Here's an example that applies the types from Flowbite to the code above:
 
-{{< code lang="typescript" file="dropdown.ts" icon="file" >}}
+```typescript
 import { Dropdown } from 'flowbite';
 import type { DropdownOptions, DropdownInterface } from 'flowbite';
 import type { InstanceOptions } from 'flowbite';
@@ -1922,4 +1908,4 @@ const dropdown: DropdownInterface = new Dropdown(
 
 // show the dropdown
 dropdown.show();
-{{< /code >}}
+```