{"id":7948,"date":"2022-12-29T15:08:59","date_gmt":"2022-12-29T15:08:59","guid":{"rendered":"https:\/\/www.jquery-az.com\/?p=7948"},"modified":"2023-09-30T09:25:57","modified_gmt":"2023-09-30T09:25:57","slug":"bootstrap-5-dropdown","status":"publish","type":"post","link":"https:\/\/www.jquery-az.com\/bootstrap-5-dropdown\/","title":{"rendered":"12 Examples to Learn Using Bootstrap 5 Dropdown"},"content":{"rendered":"<h3><strong>What is dropdown in Bootstrap 5?<\/strong><\/h3>\n<ul>\n<li>Dropdowns are used to display links or other information as the mouse clicks on an element like a <a href=\"\/bootstrap-5-buttons\/\">button<\/a>, link, etc.<\/li>\n<li>These are contextual overlays or menus that you use in the navbar, tabs, pill nav, etc.<\/li>\n<li>An important point to notice in BS 5 is that the toggleable dropdown is opened\/closed by clicking and not by hovering the mouse over the button or link, etc. where the dropdown is created. This behavior is designed intentionally in BS5. You may learn about this decision <a href=\"https:\/\/markdotto.com\/2012\/02\/27\/bootstrap-explained-dropdowns\/\" target=\"_blank\" rel=\"nofollow\">here<\/a> in detail.<\/li>\n<\/ul>\n<h3><strong>How dropdown is created in BS5?<\/strong><\/h3>\n<ul>\n<li><a href=\"https:\/\/popper.js.org\/\" target=\"_blank\" rel=\"nofollow\">Popper<\/a> is a third-party library that you need to include before the Bootstrap JS library.<\/li>\n<li>As such dropdowns are built on <strong>popper<\/strong>.<\/li>\n<li>FYI, the purpose of the popper is to detect <strong>viewport<\/strong> and dynamic <strong>positioning<\/strong>.<\/li>\n<li>You need to use <em><strong>.dropdown-toggle<\/strong><\/em> class and <strong>data-bs-toggle = &#8220;dropdown&#8221;<\/strong> property in a button, link etc. to create a dropdown (please see examples below)<\/li>\n<\/ul>\n<h3><strong style=\"font-size: 23px;\">A basic example of Bootstrap 5 dropdown with a button<\/strong><\/h3>\n<p>Let us start with a basic example of creating a dropdown by using a button. As you click on the button, the dropdown menu opens with a few links.<\/p>\n<p><img decoding=\"async\" loading=\"lazy\" class=\"aligncenter size-full wp-image-7949\" src=\"https:\/\/www.jquery-az.com\/wp-content\/uploads\/2022\/12\/6-1-Bootstrap-dropdown-basi.png\" alt=\"Bootstrap-dropdown-basic\" width=\"634\" height=\"222\" srcset=\"https:\/\/www.jquery-az.com\/wp-content\/uploads\/2022\/12\/6-1-Bootstrap-dropdown-basi.png 634w, https:\/\/www.jquery-az.com\/wp-content\/uploads\/2022\/12\/6-1-Bootstrap-dropdown-basi-300x105.png 300w\" sizes=\"(max-width: 634px) 100vw, 634px\" \/><\/p>\n<p><strong>BS 5 code:<\/strong><\/p>\n<pre class=\"EnlighterJSRAW\" data-enlighter-language=\"html\">&lt;!DOCTYPE html&gt;\r\n\r\n&lt;html&gt;\r\n\r\n&lt;head&gt;\r\n\r\n&lt;link href=\"https:\/\/cdn.jsdelivr.net\/npm\/bootstrap@5.0.1\/dist\/css\/bootstrap.min.css\" rel=\"stylesheet\" integrity=\"sha384-+0n0xVW2eSR5OomGNYDnhzAbDsOXxcvSN1TPprVMTNDbiYZCxYbOOl7+AMvyTG2x\" crossorigin=\"anonymous\"&gt;\r\n\r\n&lt;script src=\"https:\/\/cdn.jsdelivr.net\/npm\/bootstrap@5.0.2\/dist\/js\/bootstrap.bundle.min.js\"&gt;&lt;\/script&gt;\r\n\r\n&lt;\/head&gt;\r\n&lt;body&gt;\r\n\r\n&lt;div class=\"m-4\"&gt;\r\n\r\n\u00a0 &lt;h1&gt;Bootstrap 5 Dropdown Example&lt;\/h1&gt;\r\n\r\n\u00a0 \u00a0 \u00a0 \u00a0 \u00a0 \u00a0 \u00a0 \u00a0 \u00a0 \u00a0 \u00a0 \u00a0 \u00a0 \u00a0 \u00a0 \u00a0 \u00a0 \u00a0 \u00a0 \u00a0 \u00a0\r\n\r\n\u00a0 &lt;div class=\"dropdown\"&gt;\r\n\r\n\u00a0 \u00a0 &lt;button type=\"button\" class=\"btn btn-success dropdown-toggle\" data-bs-toggle=\"dropdown\"&gt;\r\n\r\n\u00a0 \u00a0 \u00a0 Bootstrap Versions\r\n\r\n\u00a0 \u00a0 &lt;\/button&gt;\r\n\r\n\u00a0 \u00a0 &lt;ul class=\"dropdown-menu\"&gt;\r\n\r\n\u00a0 \u00a0 \u00a0 &lt;li&gt;&lt;a class=\"dropdown-item\" href=\"https:\/\/www.jquery-az.com\/bootstrap-tips-tutorials\/\"&gt;Bootstrap 3&lt;\/a&gt;&lt;\/li&gt;\r\n\r\n\u00a0 \u00a0 \u00a0 &lt;li&gt;&lt;a class=\"dropdown-item\" href=\"https:\/\/www.jquery-az.com\/bootstrap-4\/\"&gt;Bootstrap 4&lt;\/a&gt;&lt;\/li&gt;\r\n\r\n\u00a0 \u00a0 \u00a0 &lt;li&gt;&lt;a class=\"dropdown-item\" href=\"https:\/\/www.jquery-az.com\/bootstrap-5\/\"&gt;Bootstrap 5&lt;\/a&gt;&lt;\/li&gt;\r\n\r\n\u00a0 \u00a0 &lt;\/ul&gt;\r\n\r\n\u00a0 &lt;\/div&gt;\r\n\r\n&lt;\/div&gt;\r\n\r\n&lt;\/body&gt;\r\n\r\n&lt;\/html&gt;<\/pre>\n<h3><strong>An example of various colored button dropdowns<\/strong><\/h3>\n<p>In this example, we have created different color dropdown buttons by using the available contextual color classes in BS 5.<\/p>\n<p><strong>Code:<\/strong><\/p>\n<pre class=\"EnlighterJSRAW\" data-enlighter-language=\"html\">&lt;!DOCTYPE html&gt;\r\n&lt;html&gt;\r\n&lt;head&gt;\r\n\r\n&lt;link href=\"https:\/\/cdn.jsdelivr.net\/npm\/bootstrap@5.0.1\/dist\/css\/bootstrap.min.css\" rel=\"stylesheet\" integrity=\"sha384-+0n0xVW2eSR5OomGNYDnhzAbDsOXxcvSN1TPprVMTNDbiYZCxYbOOl7+AMvyTG2x\" crossorigin=\"anonymous\"&gt;\r\n\r\n&lt;script src=\"https:\/\/cdn.jsdelivr.net\/npm\/bootstrap@5.0.2\/dist\/js\/bootstrap.bundle.min.js\"&gt;&lt;\/script&gt;\r\n\r\n&lt;\/head&gt;\r\n\r\n&lt;body&gt;\r\n\r\n&lt;div class=\"m-4\"&gt;\r\n\r\n\u00a0 &lt;h1&gt;Bootstrap 5 Dropdown various color buttons&lt;\/h1&gt;\r\n\r\n\u00a0 \u00a0 \u00a0 \u00a0 \u00a0 \u00a0 \u00a0 \u00a0 \u00a0 \u00a0 \u00a0 \u00a0 \u00a0 \u00a0 \u00a0 \u00a0 \u00a0 \u00a0 \u00a0 \u00a0 \u00a0\r\n\r\n\u00a0 &lt;div class=\"btn-group\"&gt;\r\n\r\n\u00a0 \u00a0 &lt;button type=\"button\" class=\"btn btn-success dropdown-toggle\" data-bs-toggle=\"dropdown\"&gt;\r\n\r\n\u00a0 \u00a0 \u00a0 Bootstrap Versions\r\n\r\n\u00a0 \u00a0 &lt;\/button&gt;\r\n\r\n\u00a0 \u00a0 &lt;ul class=\"dropdown-menu\"&gt;\r\n\r\n\u00a0 \u00a0 \u00a0 &lt;li&gt;&lt;a class=\"dropdown-item\" href=\"https:\/\/www.jquery-az.com\/bootstrap-tips-tutorials\/\"&gt;Bootstrap 3&lt;\/a&gt;&lt;\/li&gt;\r\n\r\n\u00a0 \u00a0 \u00a0 &lt;li&gt;&lt;a class=\"dropdown-item\" href=\"https:\/\/www.jquery-az.com\/bootstrap-4\/\"&gt;Bootstrap 4&lt;\/a&gt;&lt;\/li&gt;\r\n\r\n\u00a0 \u00a0 \u00a0 &lt;li&gt;&lt;a class=\"dropdown-item\" href=\"https:\/\/www.jquery-az.com\/bootstrap-5\/\"&gt;Bootstrap 5&lt;\/a&gt;&lt;\/li&gt;\r\n\r\n\u00a0 \u00a0 &lt;\/ul&gt;\r\n\r\n\u00a0 &lt;\/div&gt;\r\n\r\n\u00a0 &lt;div class=\"btn-group\"&gt;\r\n\r\n\u00a0 \u00a0 &lt;button type=\"button\" class=\"btn btn-danger dropdown-toggle\" data-bs-toggle=\"dropdown\"&gt;\r\n\r\n\u00a0 \u00a0 \u00a0 Bootstrap Versions\r\n\r\n\u00a0 \u00a0 &lt;\/button&gt;\r\n\r\n\u00a0 \u00a0 &lt;ul class=\"dropdown-menu\"&gt;\r\n\r\n\u00a0 \u00a0 \u00a0 &lt;li&gt;&lt;a class=\"dropdown-item\" href=\"https:\/\/www.jquery-az.com\/bootstrap-tips-tutorials\/\"&gt;Bootstrap 3&lt;\/a&gt;&lt;\/li&gt;\r\n\r\n\u00a0 \u00a0 \u00a0 &lt;li&gt;&lt;a class=\"dropdown-item\" href=\"https:\/\/www.jquery-az.com\/bootstrap-4\/\"&gt;Bootstrap 4&lt;\/a&gt;&lt;\/li&gt;\r\n\r\n\u00a0 \u00a0 \u00a0 &lt;li&gt;&lt;a class=\"dropdown-item\" href=\"https:\/\/www.jquery-az.com\/bootstrap-5\/\"&gt;Bootstrap 5&lt;\/a&gt;&lt;\/li&gt;\r\n\r\n\u00a0 \u00a0 &lt;\/ul&gt;\r\n\r\n\u00a0 &lt;\/div&gt;\r\n\r\n\u00a0 &lt;div class=\"btn-group\"&gt;\r\n\r\n\u00a0 \u00a0 &lt;button type=\"button\" class=\"btn btn-dark dropdown-toggle\" data-bs-toggle=\"dropdown\"&gt;\r\n\r\n\u00a0 \u00a0 \u00a0 Bootstrap Versions\r\n\r\n\u00a0 \u00a0 &lt;\/button&gt;\r\n\r\n\u00a0 \u00a0 &lt;ul class=\"dropdown-menu\"&gt;\r\n\r\n\u00a0 \u00a0 \u00a0 &lt;li&gt;&lt;a class=\"dropdown-item\" href=\"https:\/\/www.jquery-az.com\/bootstrap-tips-tutorials\/\"&gt;Bootstrap 3&lt;\/a&gt;&lt;\/li&gt;\r\n\r\n\u00a0 \u00a0 \u00a0 &lt;li&gt;&lt;a class=\"dropdown-item\" href=\"https:\/\/www.jquery-az.com\/bootstrap-4\/\"&gt;Bootstrap 4&lt;\/a&gt;&lt;\/li&gt;\r\n\r\n\u00a0 \u00a0 \u00a0 &lt;li&gt;&lt;a class=\"dropdown-item\" href=\"https:\/\/www.jquery-az.com\/bootstrap-5\/\"&gt;Bootstrap 5&lt;\/a&gt;&lt;\/li&gt;\r\n\r\n\u00a0 \u00a0 &lt;\/ul&gt;\r\n\r\n\u00a0 &lt;\/div&gt;\r\n\r\n\u00a0 &lt;div class=\"btn-group\"&gt;\r\n\r\n\u00a0 \u00a0 &lt;button type=\"button\" class=\"btn btn-primary dropdown-toggle\" data-bs-toggle=\"dropdown\"&gt;\r\n\r\n\u00a0 \u00a0 \u00a0 Bootstrap Versions\r\n\r\n\u00a0 \u00a0 &lt;\/button&gt;\r\n\r\n\u00a0 \u00a0 &lt;ul class=\"dropdown-menu\"&gt;\r\n\r\n\u00a0 \u00a0 \u00a0 &lt;li&gt;&lt;a class=\"dropdown-item\" href=\"https:\/\/www.jquery-az.com\/bootstrap-tips-tutorials\/\"&gt;Bootstrap 3&lt;\/a&gt;&lt;\/li&gt;\r\n\r\n\u00a0 \u00a0 \u00a0 &lt;li&gt;&lt;a class=\"dropdown-item\" href=\"https:\/\/www.jquery-az.com\/bootstrap-4\/\"&gt;Bootstrap 4&lt;\/a&gt;&lt;\/li&gt;\r\n\r\n\u00a0 \u00a0 \u00a0 &lt;li&gt;&lt;a class=\"dropdown-item\" href=\"https:\/\/www.jquery-az.com\/bootstrap-5\/\"&gt;Bootstrap 5&lt;\/a&gt;&lt;\/li&gt;\r\n\r\n\u00a0 \u00a0 &lt;\/ul&gt;\r\n\r\n\u00a0 &lt;\/div&gt;\r\n\r\n\u00a0 &lt;div class=\"btn-group\"&gt;\r\n\r\n\u00a0 \u00a0 &lt;button type=\"button\" class=\"btn btn-info dropdown-toggle\" data-bs-toggle=\"dropdown\"&gt;\r\n\r\n\u00a0 \u00a0 \u00a0 Bootstrap Versions\r\n\r\n\u00a0 \u00a0 &lt;\/button&gt;\r\n\r\n\u00a0 \u00a0 &lt;ul class=\"dropdown-menu\"&gt;\r\n\r\n\u00a0 \u00a0 \u00a0 &lt;li&gt;&lt;a class=\"dropdown-item\" href=\"https:\/\/www.jquery-az.com\/bootstrap-tips-tutorials\/\"&gt;Bootstrap 3&lt;\/a&gt;&lt;\/li&gt;\r\n\r\n\u00a0 \u00a0 \u00a0 &lt;li&gt;&lt;a class=\"dropdown-item\" href=\"https:\/\/www.jquery-az.com\/bootstrap-4\/\"&gt;Bootstrap 4&lt;\/a&gt;&lt;\/li&gt;\r\n\r\n\u00a0 \u00a0 \u00a0 &lt;li&gt;&lt;a class=\"dropdown-item\" href=\"https:\/\/www.jquery-az.com\/bootstrap-5\/\"&gt;Bootstrap 5&lt;\/a&gt;&lt;\/li&gt;\r\n\r\n\u00a0 \u00a0 &lt;\/ul&gt;\r\n\r\n\u00a0 &lt;\/div&gt;\r\n&lt;\/div&gt;\r\n\r\n&lt;\/body&gt;\r\n\r\n&lt;\/html&gt;<\/pre>\n<p><strong>Output:<\/strong><\/p>\n<p><img decoding=\"async\" loading=\"lazy\" class=\"aligncenter size-full wp-image-7950\" src=\"https:\/\/www.jquery-az.com\/wp-content\/uploads\/2022\/12\/6-2-dropdown-colors.png\" alt=\"dropdown-colors\" width=\"924\" height=\"148\" srcset=\"https:\/\/www.jquery-az.com\/wp-content\/uploads\/2022\/12\/6-2-dropdown-colors.png 924w, https:\/\/www.jquery-az.com\/wp-content\/uploads\/2022\/12\/6-2-dropdown-colors-300x48.png 300w, https:\/\/www.jquery-az.com\/wp-content\/uploads\/2022\/12\/6-2-dropdown-colors-768x123.png 768w\" sizes=\"(max-width: 924px) 100vw, 924px\" \/><\/p>\n<h3><strong>Creating a button dropdown with split button example<\/strong><\/h3>\n<p>For creating a dropdown with split button, you need to use markup for two buttons.<\/p>\n<ul>\n<li>Outer div refers to the <strong><em>btn-group<\/em><\/strong><\/li>\n<li>For the first button, you provide the text to be displayed for the button.<\/li>\n<li>In the second button, use the <strong><em>dropdown-toggle-split<\/em><\/strong> class for splitting this button that is adjacent to the first button.<\/li>\n<\/ul>\n<p>See the complete code below where we created green-colored buttons.<\/p>\n<pre class=\"EnlighterJSRAW\" data-enlighter-language=\"html\">&lt;!DOCTYPE html&gt;\r\n\r\n&lt;html&gt;\r\n\r\n&lt;head&gt;\r\n\r\n&lt;link href=\"https:\/\/cdn.jsdelivr.net\/npm\/bootstrap@5.0.1\/dist\/css\/bootstrap.min.css\" rel=\"stylesheet\" integrity=\"sha384-+0n0xVW2eSR5OomGNYDnhzAbDsOXxcvSN1TPprVMTNDbiYZCxYbOOl7+AMvyTG2x\" crossorigin=\"anonymous\"&gt;\r\n\r\n&lt;script src=\"https:\/\/cdn.jsdelivr.net\/npm\/bootstrap@5.0.2\/dist\/js\/bootstrap.bundle.min.js\"&gt;&lt;\/script&gt;\r\n\r\n&lt;\/head&gt;\r\n&lt;body&gt;\r\n\r\n&lt;div class=\"m-4\"&gt;\r\n\r\n\u00a0 &lt;h1&gt;Bootstrap 5 Split Dropdown&lt;\/h1&gt;\r\n  \u00a0 \u00a0 \u00a0 \u00a0 \u00a0 \u00a0 \u00a0 \u00a0 \u00a0 \u00a0 \u00a0 \u00a0 \u00a0 \u00a0 \u00a0 \u00a0 \u00a0\r\n\u00a0 &lt;div class=\"btn-group\"&gt;\r\n\r\n\u00a0 \u00a0 &lt;button type=\"button\" class=\"btn btn-success\"&gt;Bootstrap Versions&lt;\/button&gt;\r\n\r\n\u00a0 \u00a0 &lt;button type=\"button\" class=\"btn btn-success dropdown-toggle dropdown-toggle-split\" data-bs-toggle=\"dropdown\"&gt;\r\n\r\n\u00a0 \u00a0 &lt;span class=\"visually-hidden\"&gt;Toggle Dropdown&lt;\/span&gt;\r\n \u00a0\r\n\u00a0 \u00a0 &lt;\/button&gt;\r\n\r\n\u00a0 \u00a0 &lt;ul class=\"dropdown-menu\"&gt;\r\n\r\n\u00a0 \u00a0 \u00a0 &lt;li&gt;&lt;a class=\"dropdown-item\" href=\"https:\/\/www.jquery-az.com\/bootstrap-tips-tutorials\/\"&gt;Bootstrap 3&lt;\/a&gt;&lt;\/li&gt;\r\n\r\n\u00a0 \u00a0 \u00a0 &lt;li&gt;&lt;a class=\"dropdown-item\" href=\"https:\/\/www.jquery-az.com\/bootstrap-4\/\"&gt;Bootstrap 4&lt;\/a&gt;&lt;\/li&gt;\r\n\r\n\u00a0 \u00a0 \u00a0 &lt;li&gt;&lt;a class=\"dropdown-item\" href=\"https:\/\/www.jquery-az.com\/bootstrap-5\/\"&gt;Bootstrap 5&lt;\/a&gt;&lt;\/li&gt;\r\n\r\n\u00a0 \u00a0 &lt;\/ul&gt;\r\n\r\n\u00a0 &lt;\/div&gt;\r\n\r\n&lt;\/div&gt;\r\n&lt;\/body&gt;\r\n\r\n&lt;\/html&gt;<\/pre>\n<p><strong>Result:<\/strong><\/p>\n<p><img decoding=\"async\" loading=\"lazy\" class=\"aligncenter size-full wp-image-7951\" src=\"https:\/\/www.jquery-az.com\/wp-content\/uploads\/2022\/12\/6-3-dropdown-split.png\" alt=\"dropdown-split\" width=\"550\" height=\"218\" srcset=\"https:\/\/www.jquery-az.com\/wp-content\/uploads\/2022\/12\/6-3-dropdown-split.png 550w, https:\/\/www.jquery-az.com\/wp-content\/uploads\/2022\/12\/6-3-dropdown-split-300x119.png 300w\" sizes=\"(max-width: 550px) 100vw, 550px\" \/><\/p>\n<p>You may specify different colors for both buttons to make the split distinct. See the example and code below:<\/p>\n<p><img decoding=\"async\" loading=\"lazy\" class=\"aligncenter size-full wp-image-7952\" src=\"https:\/\/www.jquery-az.com\/wp-content\/uploads\/2022\/12\/6-4-dropdown-split-two.png\" alt=\"dropdown-split-two\" width=\"531\" height=\"223\" srcset=\"https:\/\/www.jquery-az.com\/wp-content\/uploads\/2022\/12\/6-4-dropdown-split-two.png 531w, https:\/\/www.jquery-az.com\/wp-content\/uploads\/2022\/12\/6-4-dropdown-split-two-300x126.png 300w\" sizes=\"(max-width: 531px) 100vw, 531px\" \/><\/p>\n<p><strong>The code:<\/strong><\/p>\n<pre class=\"EnlighterJSRAW\" data-enlighter-language=\"html\">&lt;!DOCTYPE html&gt;\r\n\r\n&lt;html&gt;\r\n\r\n&lt;head&gt;\r\n\r\n&lt;link href=\"https:\/\/cdn.jsdelivr.net\/npm\/bootstrap@5.0.1\/dist\/css\/bootstrap.min.css\" rel=\"stylesheet\" integrity=\"sha384-+0n0xVW2eSR5OomGNYDnhzAbDsOXxcvSN1TPprVMTNDbiYZCxYbOOl7+AMvyTG2x\" crossorigin=\"anonymous\"&gt;\r\n\r\n&lt;script src=\"https:\/\/cdn.jsdelivr.net\/npm\/bootstrap@5.0.2\/dist\/js\/bootstrap.bundle.min.js\"&gt;&lt;\/script&gt;\r\n\r\n&lt;\/head&gt;\r\n\r\n&lt;body&gt;\r\n\r\n&lt;div class=\"m-4\"&gt;\r\n\r\n\u00a0 &lt;h1&gt;Bootstrap 5 Split Dropdown&lt;\/h1&gt;\r\n\u00a0 \u00a0 \u00a0 \u00a0 \u00a0 \u00a0 \u00a0 \u00a0 \u00a0 \u00a0 \u00a0 \u00a0 \u00a0 \u00a0 \u00a0 \u00a0 \u00a0 \u00a0 \u00a0\r\n\u00a0 &lt;div class=\"btn-group\"&gt;\r\n\r\n\u00a0 \u00a0 &lt;button type=\"button\" class=\"btn btn-primary\"&gt;Bootstrap Versions&lt;\/button&gt;\r\n\r\n\u00a0 \u00a0 &lt;button type=\"button\" class=\"btn btn-info dropdown-toggle dropdown-toggle-split\" data-bs-toggle=\"dropdown\"&gt;\r\n\r\n\u00a0 \u00a0 &lt;span class=\"visually-hidden\"&gt;Toggle Dropdown&lt;\/span&gt;\r\n \u00a0\r\n\u00a0 \u00a0 &lt;\/button&gt;\r\n\r\n\u00a0 \u00a0 &lt;ul class=\"dropdown-menu\"&gt;\r\n\r\n\u00a0 \u00a0 \u00a0 &lt;li&gt;&lt;a class=\"dropdown-item\" href=\"https:\/\/www.jquery-az.com\/bootstrap-tips-tutorials\/\"&gt;Bootstrap 3&lt;\/a&gt;&lt;\/li&gt;\r\n\r\n\u00a0 \u00a0 \u00a0 &lt;li&gt;&lt;a class=\"dropdown-item\" href=\"https:\/\/www.jquery-az.com\/bootstrap-4\/\"&gt;Bootstrap 4&lt;\/a&gt;&lt;\/li&gt;\r\n\r\n\u00a0 \u00a0 \u00a0 &lt;li&gt;&lt;a class=\"dropdown-item\" href=\"https:\/\/www.jquery-az.com\/bootstrap-5\/\"&gt;Bootstrap 5&lt;\/a&gt;&lt;\/li&gt;\r\n\r\n\u00a0 \u00a0 &lt;\/ul&gt;\r\n\r\n\u00a0 &lt;\/div&gt;\r\n\r\n&lt;\/div&gt;\r\n\r\n&lt;\/body&gt;\r\n\r\n&lt;\/html&gt;<\/pre>\n<h3><strong>Large and small size dropdowns example<\/strong><\/h3>\n<p>The above demos show normal normal-sized dropdown. You may create large or small-sized dropdowns for simple or split styles as well.<\/p>\n<p>For that, simply use the <em><strong>.btn-sm<\/strong><\/em> for small and <em><strong>.btn-lg<\/strong><\/em>\u00a0classes for large buttons. See an example below where we created all three sizes:<\/p>\n<pre class=\"EnlighterJSRAW\" data-enlighter-language=\"html\">&lt;!DOCTYPE html&gt;\r\n\r\n&lt;html&gt;\r\n\r\n&lt;head&gt;\r\n&lt;link href=\"https:\/\/cdn.jsdelivr.net\/npm\/bootstrap@5.0.1\/dist\/css\/bootstrap.min.css\" rel=\"stylesheet\" integrity=\"sha384-+0n0xVW2eSR5OomGNYDnhzAbDsOXxcvSN1TPprVMTNDbiYZCxYbOOl7+AMvyTG2x\" crossorigin=\"anonymous\"&gt;\r\n\r\n&lt;script src=\"https:\/\/cdn.jsdelivr.net\/npm\/bootstrap@5.0.2\/dist\/js\/bootstrap.bundle.min.js\"&gt;&lt;\/script&gt;\r\n&lt;\/head&gt;\r\n\r\n&lt;body&gt;\r\n\r\n&lt;div class=\"m-4\"&gt;\r\n\r\n\u00a0 &lt;h1&gt;Bootstrap 5 Dropdown Sizes&lt;\/h1&gt;\r\n\r\n\u00a0 &lt;div class=\"btn-group\"&gt;\r\n\r\n\u00a0 \u00a0 &lt;button type=\"button\" class=\"btn btn-secondary dropdown-toggle\" data-bs-toggle=\"dropdown\"&gt;\r\n\r\n\u00a0 \u00a0 \u00a0 Normal Button\r\n\r\n\u00a0 \u00a0 &lt;\/button&gt;\r\n\r\n\u00a0 \u00a0 &lt;ul class=\"dropdown-menu\"&gt;\r\n\r\n\u00a0 \u00a0 \u00a0 &lt;li&gt;&lt;a class=\"dropdown-item\" href=\"https:\/\/www.jquery-az.com\/bootstrap-tips-tutorials\/\"&gt;Bootstrap 3&lt;\/a&gt;&lt;\/li&gt;\r\n\r\n\u00a0 \u00a0 \u00a0 &lt;li&gt;&lt;a class=\"dropdown-item\" href=\"https:\/\/www.jquery-az.com\/bootstrap-4\/\"&gt;Bootstrap 4&lt;\/a&gt;&lt;\/li&gt;\r\n\r\n\u00a0 \u00a0 \u00a0 &lt;li&gt;&lt;a class=\"dropdown-item\" href=\"https:\/\/www.jquery-az.com\/bootstrap-5\/\"&gt;Bootstrap 5&lt;\/a&gt;&lt;\/li&gt;\r\n\r\n\u00a0 \u00a0 &lt;\/ul&gt;\r\n\r\n\u00a0 &lt;\/div&gt;\r\n\r\n\u00a0 &lt;div class=\"btn-group\"&gt;\r\n\r\n\u00a0 \u00a0 &lt;button type=\"button\" class=\"btn btn-lg btn-primary\"&gt;Large Button&lt;\/button&gt;\r\n\r\n\u00a0 \u00a0 &lt;button type=\"button\" class=\"btn btn-lg btn-info dropdown-toggle dropdown-toggle-split\" data-bs-toggle=\"dropdown\"&gt;\r\n\r\n\u00a0 \u00a0 &lt;span class=\"visually-hidden\"&gt;Toggle Dropdown&lt;\/span&gt;\r\n\u00a0\r\n\u00a0 \u00a0 &lt;\/button&gt;\r\n\r\n\u00a0 \u00a0 &lt;ul class=\"dropdown-menu\"&gt;\r\n\r\n\u00a0 \u00a0 \u00a0 &lt;li&gt;&lt;a class=\"dropdown-item\" href=\"https:\/\/www.jquery-az.com\/bootstrap-tips-tutorials\/\"&gt;Bootstrap 3&lt;\/a&gt;&lt;\/li&gt;\r\n\r\n\u00a0 \u00a0 \u00a0 &lt;li&gt;&lt;a class=\"dropdown-item\" href=\"https:\/\/www.jquery-az.com\/bootstrap-4\/\"&gt;Bootstrap 4&lt;\/a&gt;&lt;\/li&gt;\r\n\r\n\u00a0 \u00a0 \u00a0 &lt;li&gt;&lt;a class=\"dropdown-item\" href=\"https:\/\/www.jquery-az.com\/bootstrap-5\/\"&gt;Bootstrap 5&lt;\/a&gt;&lt;\/li&gt;\r\n\r\n\u00a0 \u00a0 &lt;\/ul&gt;\r\n\r\n\u00a0 &lt;\/div&gt;\r\n\r\n&lt;div class=\"btn-group\"&gt;\r\n\r\n\u00a0 \u00a0 &lt;button type=\"button\" class=\"btn btn-warning btn-sm dropdown-toggle\" data-bs-toggle=\"dropdown\"&gt;\r\n\r\n\u00a0 \u00a0 \u00a0 Small Button\r\n\r\n\u00a0 \u00a0 &lt;\/button&gt;\r\n\r\n\u00a0 \u00a0 &lt;ul class=\"dropdown-menu\"&gt;\r\n\r\n\u00a0 \u00a0 \u00a0 &lt;li&gt;&lt;a class=\"dropdown-item\" href=\"https:\/\/www.jquery-az.com\/bootstrap-tips-tutorials\/\"&gt;Bootstrap 3&lt;\/a&gt;&lt;\/li&gt;\r\n\r\n\u00a0 \u00a0 \u00a0 &lt;li&gt;&lt;a class=\"dropdown-item\" href=\"https:\/\/www.jquery-az.com\/bootstrap-4\/\"&gt;Bootstrap 4&lt;\/a&gt;&lt;\/li&gt;\r\n\r\n\u00a0 \u00a0 \u00a0 &lt;li&gt;&lt;a class=\"dropdown-item\" href=\"https:\/\/www.jquery-az.com\/bootstrap-5\/\"&gt;Bootstrap 5&lt;\/a&gt;&lt;\/li&gt;\r\n\r\n\u00a0 \u00a0 &lt;\/ul&gt;\r\n\r\n\u00a0 &lt;\/div&gt;\r\n\r\n&lt;\/body&gt;\r\n\r\n&lt;\/html&gt;<\/pre>\n<p><strong>Result:<\/strong><\/p>\n<p><img decoding=\"async\" loading=\"lazy\" class=\"aligncenter size-full wp-image-7953\" src=\"https:\/\/www.jquery-az.com\/wp-content\/uploads\/2022\/12\/6-5-dropdown-sizes.png\" alt=\"dropdown-sizes\" width=\"542\" height=\"159\" srcset=\"https:\/\/www.jquery-az.com\/wp-content\/uploads\/2022\/12\/6-5-dropdown-sizes.png 542w, https:\/\/www.jquery-az.com\/wp-content\/uploads\/2022\/12\/6-5-dropdown-sizes-300x88.png 300w\" sizes=\"(max-width: 542px) 100vw, 542px\" \/><\/p>\n<h3><strong>Creating a dropdown in upward direction example<\/strong><\/h3>\n<p>In all the above examples, the dropdown menu opened downwards. You may also make a dropdown menu trigger <strong>upwards<\/strong> or other directions by using specific classes. For making the menu open above elements, use the <em><strong>.dropup<\/strong><\/em> class.<\/p>\n<p>We just added the <em>dropup<\/em> class along with<strong> btn-group<\/strong> class, as shown in the example below:<\/p>\n<p><strong>BS 5 code:<\/strong><\/p>\n<pre class=\"EnlighterJSRAW\" data-enlighter-language=\"html\">&lt;!DOCTYPE html&gt;\r\n&lt;html&gt;\r\n&lt;head&gt;\r\n\r\n&lt;link href=\"https:\/\/cdn.jsdelivr.net\/npm\/bootstrap@5.0.1\/dist\/css\/bootstrap.min.css\" rel=\"stylesheet\" integrity=\"sha384-+0n0xVW2eSR5OomGNYDnhzAbDsOXxcvSN1TPprVMTNDbiYZCxYbOOl7+AMvyTG2x\" crossorigin=\"anonymous\"&gt;\r\n&lt;script src=\"https:\/\/cdn.jsdelivr.net\/npm\/bootstrap@5.0.2\/dist\/js\/bootstrap.bundle.min.js\"&gt;&lt;\/script&gt;\r\n&lt;\/head&gt;\r\n&lt;body&gt;\r\n\r\n&lt;div class=\"m-4\"&gt;\r\n\r\n\u00a0 &lt;h1&gt;Bootstrap 5 Dropdown Direction&lt;\/h1&gt;\r\n\r\n\u00a0 &lt;br&gt;&lt;br&gt;&lt;br&gt;&lt;br&gt;\r\n\r\n\u00a0 &lt;div class=\"btn-group dropup\"&gt;\r\n\r\n\u00a0 \u00a0 &lt;button type=\"button\" class=\"btn btn-secondary dropdown-toggle\" data-bs-toggle=\"dropdown\"&gt;\r\n\r\n\u00a0 \u00a0 \u00a0 Normal Button\r\n\r\n\u00a0 \u00a0 &lt;\/button&gt;\r\n\r\n\u00a0 \u00a0 &lt;ul class=\"dropdown-menu\"&gt;\r\n\r\n\u00a0 \u00a0 \u00a0 &lt;li&gt;&lt;a class=\"dropdown-item\" href=\"https:\/\/www.jquery-az.com\/bootstrap-tips-tutorials\/\"&gt;Bootstrap 3&lt;\/a&gt;&lt;\/li&gt;\r\n\r\n\u00a0 \u00a0 \u00a0 &lt;li&gt;&lt;a class=\"dropdown-item\" href=\"https:\/\/www.jquery-az.com\/bootstrap-4\/\"&gt;Bootstrap 4&lt;\/a&gt;&lt;\/li&gt;\r\n\r\n\u00a0 \u00a0 \u00a0 &lt;li&gt;&lt;a class=\"dropdown-item\" href=\"https:\/\/www.jquery-az.com\/bootstrap-5\/\"&gt;Bootstrap 5&lt;\/a&gt;&lt;\/li&gt;\r\n\r\n\u00a0 \u00a0 &lt;\/ul&gt;\r\n\r\n\u00a0 &lt;\/div&gt;\r\n\r\n\u00a0 &lt;div class=\"btn-group dropup\"&gt;\r\n\r\n\u00a0 \u00a0 &lt;button type=\"button\" class=\"btn btn-lg btn-primary\"&gt;Large Button&lt;\/button&gt;\r\n\r\n\u00a0 \u00a0 &lt;button type=\"button\" class=\"btn btn-lg btn-info dropdown-toggle dropdown-toggle-split\" data-bs-toggle=\"dropdown\"&gt;\r\n\r\n\u00a0 \u00a0 &lt;span class=\"visually-hidden\"&gt;Toggle Dropdown&lt;\/span&gt;\r\n\r\n\u00a0 \u00a0 &lt;\/button&gt;\r\n\u00a0 \u00a0 &lt;ul class=\"dropdown-menu\"&gt;\r\n\u00a0 \u00a0 \u00a0 &lt;li&gt;&lt;a class=\"dropdown-item\" href=\"https:\/\/www.jquery-az.com\/bootstrap-tips-tutorials\/\"&gt;Bootstrap 3&lt;\/a&gt;&lt;\/li&gt;\r\n\r\n\u00a0 \u00a0 \u00a0 &lt;li&gt;&lt;a class=\"dropdown-item\" href=\"https:\/\/www.jquery-az.com\/bootstrap-4\/\"&gt;Bootstrap 4&lt;\/a&gt;&lt;\/li&gt;\r\n\r\n\u00a0 \u00a0 \u00a0 &lt;li&gt;&lt;a class=\"dropdown-item\" href=\"https:\/\/www.jquery-az.com\/bootstrap-5\/\"&gt;Bootstrap 5&lt;\/a&gt;&lt;\/li&gt;\r\n\r\n\u00a0 \u00a0 &lt;\/ul&gt;\r\n\r\n\u00a0 &lt;\/div&gt;\r\n\r\n&lt;div class=\"btn-group dropup\"&gt;\r\n\r\n\u00a0 \u00a0 &lt;button type=\"button\" class=\"btn btn-warning btn-sm dropdown-toggle\" data-bs-toggle=\"dropdown\"&gt;\r\n\r\n\u00a0 \u00a0 \u00a0 Small Button\r\n\r\n\u00a0 \u00a0 &lt;\/button&gt;\r\n\r\n\u00a0 \u00a0 &lt;ul class=\"dropdown-menu\"&gt;\r\n\r\n\u00a0 \u00a0 \u00a0 &lt;li&gt;&lt;a class=\"dropdown-item\" href=\"https:\/\/www.jquery-az.com\/bootstrap-tips-tutorials\/\"&gt;Bootstrap 3&lt;\/a&gt;&lt;\/li&gt;\r\n\r\n\u00a0 \u00a0 \u00a0 &lt;li&gt;&lt;a class=\"dropdown-item\" href=\"https:\/\/www.jquery-az.com\/bootstrap-4\/\"&gt;Bootstrap 4&lt;\/a&gt;&lt;\/li&gt;\r\n\r\n\u00a0 \u00a0 \u00a0 &lt;li&gt;&lt;a class=\"dropdown-item\" href=\"https:\/\/www.jquery-az.com\/bootstrap-5\/\"&gt;Bootstrap 5&lt;\/a&gt;&lt;\/li&gt;\r\n\r\n\u00a0 \u00a0 &lt;\/ul&gt;\r\n\r\n\u00a0 &lt;\/div&gt;\r\n\r\n&lt;\/body&gt;\r\n\r\n&lt;\/html&gt;<\/pre>\n<p><strong>Result:<\/strong><\/p>\n<p><img decoding=\"async\" loading=\"lazy\" class=\"aligncenter size-full wp-image-7954\" src=\"https:\/\/www.jquery-az.com\/wp-content\/uploads\/2022\/12\/6-6-dropdown-upward.png\" alt=\"dropdown-upward\" width=\"667\" height=\"233\" srcset=\"https:\/\/www.jquery-az.com\/wp-content\/uploads\/2022\/12\/6-6-dropdown-upward.png 667w, https:\/\/www.jquery-az.com\/wp-content\/uploads\/2022\/12\/6-6-dropdown-upward-300x105.png 300w\" sizes=\"(max-width: 667px) 100vw, 667px\" \/><\/p>\n<p>You can see, all three size buttons open the menu up direction.<\/p>\n<h3><strong>Dropdown menu towards right direction example<\/strong><\/h3>\n<p>Similarly, you may use the <em><strong>.dropend<\/strong><\/em> class to open the menu towards the right of the element. Have a look at the code below:<\/p>\n<pre class=\"EnlighterJSRAW\" data-enlighter-language=\"html\">&lt;!DOCTYPE html&gt;\r\n&lt;html&gt;\r\n\r\n&lt;head&gt;\r\n\r\n&lt;link href=\"https:\/\/cdn.jsdelivr.net\/npm\/bootstrap@5.0.1\/dist\/css\/bootstrap.min.css\" rel=\"stylesheet\" integrity=\"sha384-+0n0xVW2eSR5OomGNYDnhzAbDsOXxcvSN1TPprVMTNDbiYZCxYbOOl7+AMvyTG2x\" crossorigin=\"anonymous\"&gt;\r\n&lt;script src=\"https:\/\/cdn.jsdelivr.net\/npm\/bootstrap@5.0.2\/dist\/js\/bootstrap.bundle.min.js\"&gt;&lt;\/script&gt;\r\n\r\n&lt;\/head&gt;\r\n\r\n&lt;body&gt;\r\n\r\n&lt;div class=\"m-4\"&gt;\r\n\u00a0 &lt;h1&gt;Bootstrap 5 Dropdown Direction&lt;\/h1&gt;\r\n\u00a0 &lt;div class=\"btn-group dropend\"&gt;\r\n\r\n\u00a0 \u00a0 &lt;button type=\"button\" class=\"btn btn-primary dropdown-toggle\" data-bs-toggle=\"dropdown\"&gt;\r\n\r\n\u00a0 \u00a0 \u00a0 Right Direction\r\n\r\n\u00a0 \u00a0 &lt;\/button&gt;\r\n\r\n\u00a0 \u00a0 &lt;ul class=\"dropdown-menu\"&gt;\r\n\r\n\u00a0 \u00a0 \u00a0 &lt;li&gt;&lt;a class=\"dropdown-item\" href=\"https:\/\/www.jquery-az.com\/bootstrap-tips-tutorials\/\"&gt;Bootstrap 3&lt;\/a&gt;&lt;\/li&gt;\r\n\r\n\u00a0 \u00a0 \u00a0 &lt;li&gt;&lt;a class=\"dropdown-item\" href=\"https:\/\/www.jquery-az.com\/bootstrap-4\/\"&gt;Bootstrap 4&lt;\/a&gt;&lt;\/li&gt;\r\n\r\n\u00a0 \u00a0 \u00a0 &lt;li&gt;&lt;a class=\"dropdown-item\" href=\"https:\/\/www.jquery-az.com\/bootstrap-5\/\"&gt;Bootstrap 5&lt;\/a&gt;&lt;\/li&gt;\r\n\r\n\u00a0 \u00a0 &lt;\/ul&gt;\r\n\r\n\u00a0 &lt;\/div&gt;\r\n&lt;\/body&gt;\r\n\r\n&lt;\/html&gt;<\/pre>\n<h3><img decoding=\"async\" loading=\"lazy\" class=\"aligncenter size-full wp-image-7955\" src=\"https:\/\/www.jquery-az.com\/wp-content\/uploads\/2022\/12\/6-7-dropdown-dropend.png\" alt=\"dropdown-dropend\" width=\"663\" height=\"216\" srcset=\"https:\/\/www.jquery-az.com\/wp-content\/uploads\/2022\/12\/6-7-dropdown-dropend.png 663w, https:\/\/www.jquery-az.com\/wp-content\/uploads\/2022\/12\/6-7-dropdown-dropend-300x98.png 300w\" sizes=\"(max-width: 663px) 100vw, 663px\" \/><\/h3>\n<h3><strong>Dropdown towards left direction example<\/strong><\/h3>\n<p>Use the <em><strong>.dropstart<\/strong><\/em> class for opening the menu towards the left side of the button or other elements with a dropdown. Have a look:<\/p>\n<pre class=\"EnlighterJSRAW\" data-enlighter-language=\"html\">&lt;!DOCTYPE html&gt;\r\n&lt;html&gt;\r\n&lt;head&gt;\r\n\r\n&lt;link href=\"https:\/\/cdn.jsdelivr.net\/npm\/bootstrap@5.0.1\/dist\/css\/bootstrap.min.css\" rel=\"stylesheet\" integrity=\"sha384-+0n0xVW2eSR5OomGNYDnhzAbDsOXxcvSN1TPprVMTNDbiYZCxYbOOl7+AMvyTG2x\" crossorigin=\"anonymous\"&gt;\r\n&lt;script src=\"https:\/\/cdn.jsdelivr.net\/npm\/bootstrap@5.0.2\/dist\/js\/bootstrap.bundle.min.js\"&gt;&lt;\/script&gt;\r\n\r\n&lt;\/head&gt;\r\n\r\n&lt;body&gt;\r\n&lt;div class=\"m-4\"&gt;\r\n\u00a0 &lt;h1&gt;Bootstrap 5 Dropdown Direction&lt;\/h1&gt;\r\n\u00a0 &lt;div class=\"btn-group dropstart\"&gt;\r\n\r\n\u00a0 \u00a0 &lt;button type=\"button\" class=\"btn btn-primary dropdown-toggle\" data-bs-toggle=\"dropdown\"&gt;\r\n\r\n\u00a0 \u00a0 \u00a0 Left Direction\r\n\r\n\u00a0 \u00a0 &lt;\/button&gt;\r\n\r\n\u00a0 \u00a0 &lt;ul class=\"dropdown-menu\"&gt;\r\n\r\n\u00a0 \u00a0 \u00a0 &lt;li&gt;&lt;a class=\"dropdown-item\" href=\"https:\/\/www.jquery-az.com\/bootstrap-tips-tutorials\/\"&gt;Bootstrap 3&lt;\/a&gt;&lt;\/li&gt;\r\n\r\n\u00a0 \u00a0 \u00a0 &lt;li&gt;&lt;a class=\"dropdown-item\" href=\"https:\/\/www.jquery-az.com\/bootstrap-4\/\"&gt;Bootstrap 4&lt;\/a&gt;&lt;\/li&gt;\r\n\r\n\u00a0 \u00a0 \u00a0 &lt;li&gt;&lt;a class=\"dropdown-item\" href=\"https:\/\/www.jquery-az.com\/bootstrap-5\/\"&gt;Bootstrap 5&lt;\/a&gt;&lt;\/li&gt;\r\n\r\n\u00a0 \u00a0 &lt;\/ul&gt;\r\n\r\n\u00a0 &lt;\/div&gt;\r\n\u00a0 &lt;div class=\"btn-group dropstart\"&gt;\r\n\r\n\u00a0 \u00a0 &lt;button type=\"button\" class=\"btn btn-warning btn-sm dropdown-toggle\" data-bs-toggle=\"dropdown\"&gt;\r\n\r\n\u00a0 \u00a0 \u00a0 Small Button\r\n\r\n\u00a0 \u00a0 &lt;\/button&gt;\r\n\r\n\u00a0 \u00a0 &lt;ul class=\"dropdown-menu\"&gt;\r\n\r\n\u00a0 \u00a0 \u00a0 &lt;li&gt;&lt;a class=\"dropdown-item\" href=\"https:\/\/www.jquery-az.com\/bootstrap-tips-tutorials\/\"&gt;Bootstrap 3&lt;\/a&gt;&lt;\/li&gt;\r\n\r\n\u00a0 \u00a0 \u00a0 &lt;li&gt;&lt;a class=\"dropdown-item\" href=\"https:\/\/www.jquery-az.com\/bootstrap-4\/\"&gt;Bootstrap 4&lt;\/a&gt;&lt;\/li&gt;\r\n\r\n\u00a0 \u00a0 \u00a0 &lt;li&gt;&lt;a class=\"dropdown-item\" href=\"https:\/\/www.jquery-az.com\/bootstrap-5\/\"&gt;Bootstrap 5&lt;\/a&gt;&lt;\/li&gt;\r\n\r\n\u00a0 \u00a0 &lt;\/ul&gt;\r\n\r\n\u00a0 &lt;\/div&gt;\r\n&lt;\/body&gt;\r\n&lt;\/html&gt;<\/pre>\n<h3><img decoding=\"async\" loading=\"lazy\" class=\"aligncenter size-full wp-image-7956\" src=\"https:\/\/www.jquery-az.com\/wp-content\/uploads\/2022\/12\/6-8-dropdown-dropleft.png\" alt=\"dropdown-dropleft\" width=\"662\" height=\"219\" srcset=\"https:\/\/www.jquery-az.com\/wp-content\/uploads\/2022\/12\/6-8-dropdown-dropleft.png 662w, https:\/\/www.jquery-az.com\/wp-content\/uploads\/2022\/12\/6-8-dropdown-dropleft-300x99.png 300w\" sizes=\"(max-width: 662px) 100vw, 662px\" \/><\/h3>\n<h3><strong>Adding dividers in the dropdown example<\/strong><\/h3>\n<p>To differentiate the menu items in the dropdown, you may use the <em><strong>.dropdown-divider<\/strong><\/em> in the &lt;li&gt;. See an example with the code below:<\/p>\n<pre class=\"EnlighterJSRAW\" data-enlighter-language=\"html\">&lt;!DOCTYPE html&gt;\r\n&lt;html&gt;\r\n&lt;head&gt;\r\n\r\n&lt;link href=\"https:\/\/cdn.jsdelivr.net\/npm\/bootstrap@5.0.1\/dist\/css\/bootstrap.min.css\" rel=\"stylesheet\" integrity=\"sha384-+0n0xVW2eSR5OomGNYDnhzAbDsOXxcvSN1TPprVMTNDbiYZCxYbOOl7+AMvyTG2x\" crossorigin=\"anonymous\"&gt;\r\n\r\n&lt;script src=\"https:\/\/cdn.jsdelivr.net\/npm\/bootstrap@5.0.2\/dist\/js\/bootstrap.bundle.min.js\"&gt;&lt;\/script&gt;\r\n\r\n&lt;\/head&gt;\r\n\r\n&lt;body&gt;\r\n\r\n&lt;div class=\"m-4\"&gt;\r\n\r\n\u00a0 &lt;h1&gt;Bootstrap 5 Dropdown Direction&lt;\/h1&gt;\r\n\r\n\u00a0 &lt;div class=\"btn-group\"&gt;\r\n\r\n\u00a0 \u00a0 &lt;button type=\"button\" class=\"btn btn-primary dropdown-toggle\" data-bs-toggle=\"dropdown\"&gt;\r\n\r\n\u00a0 \u00a0 \u00a0 Bootstrap Versions\r\n\r\n\u00a0 \u00a0 &lt;\/button&gt;\r\n\r\n\u00a0 \u00a0 &lt;ul class=\"dropdown-menu\"&gt;\r\n\r\n\u00a0 \u00a0 \u00a0 &lt;li&gt;&lt;a class=\"dropdown-item\" href=\"https:\/\/www.jquery-az.com\/bootstrap-tips-tutorials\/\"&gt;Bootstrap 3&lt;\/a&gt;&lt;\/li&gt;\r\n\r\n\u00a0 \u00a0 \u00a0 &lt;li&gt;&lt;hr class=\"dropdown-divider\"&gt;&lt;\/li&gt;\r\n\r\n\u00a0 \u00a0 \u00a0 &lt;li&gt;&lt;a class=\"dropdown-item\" href=\"https:\/\/www.jquery-az.com\/bootstrap-4\/\"&gt;Bootstrap 4&lt;\/a&gt;&lt;\/li&gt;\r\n\r\n\u00a0 \u00a0 \u00a0 &lt;li&gt;&lt;hr class=\"dropdown-divider\"&gt;&lt;\/li&gt;\r\n\r\n\u00a0 \u00a0 \u00a0 &lt;li&gt;&lt;a class=\"dropdown-item\" href=\"https:\/\/www.jquery-az.com\/bootstrap-5\/\"&gt;Bootstrap 5&lt;\/a&gt;&lt;\/li&gt;\r\n\r\n\u00a0 \u00a0 &lt;\/ul&gt;\r\n\r\n\u00a0 &lt;\/div&gt;\r\n&lt;\/body&gt;\r\n&lt;\/html&gt;<\/pre>\n<h3><strong>Placing text content in a dropdown example<\/strong><\/h3>\n<p>Not only you may place links in the dropdowns but other content like text without links can also be placed. See an example below:<\/p>\n<p><strong>BS 5 code:<\/strong><\/p>\n<pre class=\"EnlighterJSRAW\" data-enlighter-language=\"html\">&lt;!DOCTYPE html&gt;\r\n&lt;html&gt;\r\n\r\n&lt;head&gt;\r\n\r\n&lt;link href=\"https:\/\/cdn.jsdelivr.net\/npm\/bootstrap@5.0.1\/dist\/css\/bootstrap.min.css\" rel=\"stylesheet\" integrity=\"sha384-+0n0xVW2eSR5OomGNYDnhzAbDsOXxcvSN1TPprVMTNDbiYZCxYbOOl7+AMvyTG2x\" crossorigin=\"anonymous\"&gt;\r\n&lt;script src=\"https:\/\/cdn.jsdelivr.net\/npm\/bootstrap@5.0.2\/dist\/js\/bootstrap.bundle.min.js\"&gt;&lt;\/script&gt;\r\n\r\n&lt;\/head&gt;\r\n\r\n&lt;body&gt;\r\n\r\n&lt;div class=\"m-4\"&gt;\r\n\r\n\u00a0 &lt;h1&gt;Bootstrap 5 Dropdown Text&lt;\/h1&gt;\r\n\u00a0 &lt;div class=\"btn-group\"&gt;\r\n\r\n\u00a0 \u00a0 &lt;button type=\"button\" class=\"btn btn-primary dropdown-toggle\" data-bs-toggle=\"dropdown\"&gt;\r\n\r\n\u00a0 \u00a0 \u00a0 Dropdown With Simple text\r\n\r\n\u00a0 \u00a0 &lt;\/button&gt;\r\n\r\n\u00a0 \u00a0 &lt;div class=\"dropdown-menu p-4 text-muted\" style=\"max-width: 200px;\"&gt;\r\n\r\n\u00a0 &lt;p&gt;&lt;strong&gt;Text heading&lt;\/strong&gt;&lt;br&gt;\r\n\r\n\u00a0 \u00a0 Some example text that's free-flowing within the dropdown menu.\r\n\r\n\u00a0 &lt;\/p&gt;\r\n\r\n\u00a0 &lt;p class=\"mb-0\"&gt;\r\n\r\n\u00a0 \u00a0 And this is more example text.\r\n\r\n\u00a0 &lt;\/p&gt;\r\n\r\n&lt;\/div&gt;\r\n\r\n&lt;\/div&gt;\r\n\r\n&lt;\/body&gt;\r\n\r\n&lt;\/html&gt;<\/pre>\n<h3><img decoding=\"async\" loading=\"lazy\" class=\"aligncenter size-full wp-image-7957\" src=\"https:\/\/www.jquery-az.com\/wp-content\/uploads\/2022\/12\/6-10-dropdown-text.png\" alt=\"dropdown-text\" width=\"531\" height=\"342\" srcset=\"https:\/\/www.jquery-az.com\/wp-content\/uploads\/2022\/12\/6-10-dropdown-text.png 531w, https:\/\/www.jquery-az.com\/wp-content\/uploads\/2022\/12\/6-10-dropdown-text-300x193.png 300w\" sizes=\"(max-width: 531px) 100vw, 531px\" \/><\/h3>\n<h3><strong>An example of a dropdown with anchor text<\/strong><\/h3>\n<p>As mentioned earlier, you may use different elements like buttons, links, dropdowns in the navbar etc.<\/p>\n<p>The following example shows creating a dropdown using anchor text by using &lt;a&gt; tag:<\/p>\n<pre class=\"EnlighterJSRAW\" data-enlighter-language=\"html\">&lt;!DOCTYPE html&gt;\r\n\r\n&lt;html&gt;\r\n\r\n&lt;head&gt;\r\n&lt;link href=\"https:\/\/cdn.jsdelivr.net\/npm\/bootstrap@5.0.1\/dist\/css\/bootstrap.min.css\" rel=\"stylesheet\" integrity=\"sha384-+0n0xVW2eSR5OomGNYDnhzAbDsOXxcvSN1TPprVMTNDbiYZCxYbOOl7+AMvyTG2x\" crossorigin=\"anonymous\"&gt;\r\n&lt;script src=\"https:\/\/cdn.jsdelivr.net\/npm\/bootstrap@5.0.2\/dist\/js\/bootstrap.bundle.min.js\"&gt;&lt;\/script&gt;\r\n\r\n&lt;\/head&gt;\r\n&lt;body&gt;\r\n\r\n&lt;div class=\"m-4\"&gt;\r\n\r\n\u00a0 &lt;h1&gt;Bootstrap 5 Dropdown Anchor&lt;\/h1&gt;\r\n\u00a0 &lt;div class=\"m-4\"&gt;\r\n\r\n\u00a0 \u00a0 &lt;div class=\"dropdown\"&gt;\r\n\r\n\u00a0 \u00a0 \u00a0 \u00a0 &lt;a href=\"#\" class=\"dropdown-toggle\" data-bs-toggle=\"dropdown\"&gt;Bootstrap Versions&lt;\/a&gt;\r\n\r\n\u00a0 \u00a0 \u00a0 \u00a0 &lt;div class=\"dropdown-menu\"&gt;\r\n\r\n\u00a0 \u00a0 \u00a0 \u00a0 \u00a0 \u00a0 &lt;a href=\"#\" class=\"dropdown-item\"&gt;Bootstrap 3&lt;\/a&gt;\r\n\r\n\u00a0 \u00a0 \u00a0 \u00a0 \u00a0 \u00a0 &lt;a href=\"#\" class=\"dropdown-item\"&gt;Bootstrap 4&lt;\/a&gt;\r\n\r\n\u00a0 \u00a0 \u00a0 \u00a0 \u00a0 \u00a0 &lt;a href=\"#\" class=\"dropdown-item\"&gt;Bootstrap 5&lt;\/a&gt;\r\n\r\n\u00a0 \u00a0 \u00a0 \u00a0 &lt;\/div&gt;\r\n\r\n\u00a0 \u00a0 &lt;\/div&gt;\r\n\r\n&lt;\/div&gt;\r\n&lt;\/body&gt;\r\n\r\n&lt;\/html&gt;<\/pre>\n<h3><img decoding=\"async\" loading=\"lazy\" class=\"aligncenter size-full wp-image-7958\" src=\"https:\/\/www.jquery-az.com\/wp-content\/uploads\/2022\/12\/6-11-dropdown-anchor.png\" alt=\"dropdown-anchor\" width=\"587\" height=\"240\" srcset=\"https:\/\/www.jquery-az.com\/wp-content\/uploads\/2022\/12\/6-11-dropdown-anchor.png 587w, https:\/\/www.jquery-az.com\/wp-content\/uploads\/2022\/12\/6-11-dropdown-anchor-300x123.png 300w\" sizes=\"(max-width: 587px) 100vw, 587px\" \/><\/h3>\n<h3><strong>Dropdown in navbar example<\/strong><\/h3>\n<p>The following example shows using a dropdown in the navbar. For that, we have different menus, and the dropdown menu is created twice in the example.<\/p>\n<pre class=\"EnlighterJSRAW\" data-enlighter-language=\"html\">&lt;!DOCTYPE html&gt;\r\n\r\n&lt;html&gt;\r\n\r\n&lt;head&gt;\r\n\r\n&lt;link href=\"https:\/\/cdn.jsdelivr.net\/npm\/bootstrap@5.0.1\/dist\/css\/bootstrap.min.css\" rel=\"stylesheet\" integrity=\"sha384-+0n0xVW2eSR5OomGNYDnhzAbDsOXxcvSN1TPprVMTNDbiYZCxYbOOl7+AMvyTG2x\" crossorigin=\"anonymous\"&gt;\r\n\r\n&lt;script src=\"https:\/\/cdn.jsdelivr.net\/npm\/bootstrap@5.0.2\/dist\/js\/bootstrap.bundle.min.js\"&gt;&lt;\/script&gt;\r\n\r\n&lt;\/head&gt;\r\n&lt;body&gt;\r\n\r\n&lt;div class=\"m-4\"&gt;\r\n\r\n\u00a0 \u00a0 &lt;nav class=\"navbar navbar-expand-sm navbar-light bg-light\"&gt;\r\n\r\n\u00a0 \u00a0 \u00a0 \u00a0 &lt;div class=\"container-fluid\"&gt;\r\n\r\n\u00a0 \u00a0 \u00a0 \u00a0 \u00a0 \u00a0 &lt;a href=\"#\" class=\"navbar-brand\"&gt;Company\/Website Name&lt;\/a&gt;\r\n\r\n\u00a0 \u00a0 \u00a0 \u00a0 \u00a0 \u00a0 &lt;button type=\"button\" class=\"navbar-toggler\" data-bs-toggle=\"collapse\" data-bs-target=\"#navbarCollapse\"&gt;\r\n\r\n\u00a0 \u00a0 \u00a0 \u00a0 \u00a0 \u00a0 \u00a0 \u00a0 &lt;span class=\"navbar-toggler-icon\"&gt;&lt;\/span&gt;\r\n\r\n\u00a0 \u00a0 \u00a0 \u00a0 \u00a0 \u00a0 &lt;\/button&gt;\r\n\r\n\u00a0 \u00a0 \u00a0 \u00a0 \u00a0 \u00a0 &lt;div id=\"navbarCollapse\" class=\"collapse navbar-collapse\"&gt;\r\n\r\n\u00a0 \u00a0 \u00a0 \u00a0 \u00a0 \u00a0 \u00a0 \u00a0 &lt;ul class=\"nav navbar-nav\"&gt;\r\n\r\n\u00a0 \u00a0 \u00a0 \u00a0 \u00a0 \u00a0 \u00a0 \u00a0 \u00a0 \u00a0 &lt;li class=\"nav-item\"&gt;\r\n\r\n\u00a0 \u00a0 \u00a0 \u00a0 \u00a0 \u00a0 \u00a0 \u00a0 \u00a0 \u00a0 \u00a0 \u00a0 &lt;a href=\"#\" class=\"nav-link\"&gt;Home&lt;\/a&gt;\r\n\r\n\u00a0 \u00a0 \u00a0 \u00a0 \u00a0 \u00a0 \u00a0 \u00a0 \u00a0 \u00a0 &lt;\/li&gt;\r\n\r\n\u00a0 \u00a0 \u00a0 \u00a0 \u00a0 \u00a0 \u00a0 \u00a0 \u00a0 \u00a0 &lt;li class=\"nav-item\"&gt;\r\n\r\n\u00a0 \u00a0 \u00a0 \u00a0 \u00a0 \u00a0 \u00a0 \u00a0 \u00a0 \u00a0 \u00a0 \u00a0 &lt;a href=\"#\" class=\"nav-link\"&gt;Web&lt;\/a&gt;\r\n\r\n\u00a0 \u00a0 \u00a0 \u00a0 \u00a0 \u00a0 \u00a0 \u00a0 \u00a0 \u00a0 &lt;\/li&gt;\r\n\r\n\u00a0 \u00a0 \u00a0 \u00a0 \u00a0 \u00a0 \u00a0 \u00a0 \u00a0 \u00a0 &lt;li class=\"nav-item dropdown\"&gt;\r\n\r\n\u00a0 \u00a0 \u00a0 \u00a0 \u00a0 \u00a0 \u00a0 \u00a0 \u00a0 \u00a0 \u00a0 \u00a0 &lt;a href=\"#\" class=\"nav-link dropdown-toggle\" data-bs-toggle=\"dropdown\"&gt;Bootstrap&lt;\/a&gt;\r\n\r\n\u00a0 \u00a0 \u00a0 \u00a0 \u00a0 \u00a0 \u00a0 \u00a0 \u00a0 \u00a0 \u00a0 \u00a0 &lt;div class=\"dropdown-menu\"&gt;\r\n\r\n\u00a0 \u00a0 \u00a0 \u00a0 \u00a0 \u00a0 \u00a0 \u00a0 \u00a0 \u00a0 \u00a0 \u00a0 \u00a0 \u00a0 &lt;a href=\"#\" class=\"dropdown-item\"&gt;Bootstrap 3&lt;\/a&gt;\r\n\r\n\u00a0 \u00a0 \u00a0 \u00a0 \u00a0 \u00a0 \u00a0 \u00a0 \u00a0 \u00a0 \u00a0 \u00a0 \u00a0 \u00a0 &lt;a href=\"#\" class=\"dropdown-item\"&gt;Bootstrap 4&lt;\/a&gt;\r\n\r\n\u00a0 \u00a0 \u00a0 \u00a0 \u00a0 \u00a0 \u00a0 \u00a0 \u00a0 \u00a0 \u00a0 \u00a0 \u00a0 \u00a0 &lt;a href=\"#\" class=\"dropdown-item\"&gt;Bootstrap 5&lt;\/a&gt;\r\n\r\n\u00a0 \u00a0 \u00a0 \u00a0 \u00a0 \u00a0 \u00a0 \u00a0 \u00a0 \u00a0 \u00a0 \u00a0 \u00a0 \u00a0 &lt;div class=\"dropdown-divider\"&gt;&lt;\/div&gt;\r\n\r\n\u00a0 \u00a0 \u00a0 \u00a0 \u00a0 \u00a0 \u00a0 \u00a0 \u00a0 \u00a0 \u00a0 \u00a0 \u00a0 \u00a0 &lt;a href=\"#\"class=\"dropdown-item\"&gt;Older&lt;\/a&gt;\r\n\r\n\u00a0 \u00a0 \u00a0 \u00a0 \u00a0 \u00a0 \u00a0 \u00a0 \u00a0 \u00a0 \u00a0 \u00a0 &lt;\/div&gt;\r\n\r\n\u00a0 \u00a0 \u00a0 \u00a0 \u00a0 \u00a0 \u00a0 \u00a0 \u00a0 \u00a0 &lt;\/li&gt;\r\n\r\n\u00a0 \u00a0 \u00a0 \u00a0 \u00a0 \u00a0 \u00a0 \u00a0 &lt;\/ul&gt;\r\n\r\n\u00a0 \u00a0 \u00a0 \u00a0 \u00a0 \u00a0 \u00a0 \u00a0 &lt;ul class=\"nav navbar-nav ms-auto\"&gt;\r\n\r\n\u00a0 \u00a0 \u00a0 \u00a0 \u00a0 \u00a0 \u00a0 \u00a0 \u00a0 \u00a0 &lt;li class=\"nav-item dropdown\"&gt;\r\n\r\n\u00a0 \u00a0 \u00a0 \u00a0 \u00a0 \u00a0 \u00a0 \u00a0 \u00a0 \u00a0 \u00a0 \u00a0 &lt;a href=\"#\" class=\"nav-link dropdown-toggle\" data-bs-toggle=\"dropdown\"&gt;Programming&lt;\/a&gt;\r\n\r\n\u00a0 \u00a0 \u00a0 \u00a0 \u00a0 \u00a0 \u00a0 \u00a0 \u00a0 \u00a0 \u00a0 \u00a0 &lt;div class=\"dropdown-menu dropdown-menu-end\"&gt;\r\n\r\n\u00a0 \u00a0 \u00a0 \u00a0 \u00a0 \u00a0 \u00a0 \u00a0 \u00a0 \u00a0 \u00a0 \u00a0 \u00a0 \u00a0 &lt;a href=\"#\" class=\"dropdown-item\"&gt;Java&lt;\/a&gt;\r\n\r\n\u00a0 \u00a0 \u00a0 \u00a0 \u00a0 \u00a0 \u00a0 \u00a0 \u00a0 \u00a0 \u00a0 \u00a0 \u00a0 \u00a0 &lt;div class=\"dropdown-divider\"&gt;&lt;\/div&gt;\r\n\r\n\u00a0 \u00a0 \u00a0 \u00a0 \u00a0 \u00a0 \u00a0 \u00a0 \u00a0 \u00a0 \u00a0 \u00a0 \u00a0 \u00a0 &lt;a href=\"#\" class=\"dropdown-item\"&gt;Pyhton&lt;\/a&gt;\r\n\r\n\u00a0 \u00a0 \u00a0 \u00a0 \u00a0 \u00a0 \u00a0 \u00a0 \u00a0 \u00a0 \u00a0 \u00a0 \u00a0 \u00a0 &lt;div class=\"dropdown-divider\"&gt;&lt;\/div&gt;\r\n\r\n\u00a0 \u00a0 \u00a0 \u00a0 \u00a0 \u00a0 \u00a0 \u00a0 \u00a0 \u00a0 \u00a0 \u00a0 \u00a0 \u00a0 &lt;a href=\"#\" class=\"dropdown-item\"&gt;C#&lt;\/a&gt;\r\n\r\n\u00a0 \u00a0 \u00a0 \u00a0 \u00a0 \u00a0 \u00a0 \u00a0 \u00a0 \u00a0 \u00a0 \u00a0 \u00a0 \u00a0 &lt;div class=\"dropdown-divider\"&gt;&lt;\/div&gt;\r\n\r\n\u00a0 \u00a0 \u00a0 \u00a0 \u00a0 \u00a0 \u00a0 \u00a0 \u00a0 \u00a0 \u00a0 \u00a0 \u00a0 \u00a0 &lt;a href=\"#\" class=\"dropdown-item\"&gt;C++&lt;\/a&gt;\r\n\r\n\u00a0 \u00a0 \u00a0 \u00a0 \u00a0 \u00a0 \u00a0 \u00a0 \u00a0 \u00a0 \u00a0 \u00a0 \u00a0 \u00a0 &lt;div class=\"dropdown-divider\"&gt;&lt;\/div&gt;\r\n\r\n\u00a0 \u00a0 \u00a0 \u00a0 \u00a0 \u00a0 \u00a0 \u00a0 \u00a0 \u00a0 \u00a0 \u00a0 \u00a0 \u00a0 &lt;a href=\"#\" class=\"dropdown-item\"&gt;Kotlin&lt;\/a&gt;\r\n\r\n\u00a0 \u00a0 \u00a0 \u00a0 \u00a0 \u00a0 \u00a0 \u00a0 \u00a0 \u00a0 \u00a0 \u00a0 &lt;\/div&gt;\r\n\r\n\u00a0 \u00a0 \u00a0 \u00a0 \u00a0 \u00a0 \u00a0 \u00a0 \u00a0 \u00a0 &lt;\/li&gt;\r\n\r\n\u00a0 \u00a0 \u00a0 \u00a0 \u00a0 \u00a0 \u00a0 \u00a0 &lt;\/ul&gt;\r\n\r\n\u00a0 \u00a0 \u00a0 \u00a0 \u00a0 \u00a0 &lt;\/div&gt;\r\n\r\n\u00a0 \u00a0 \u00a0 \u00a0 &lt;\/div&gt;\r\n\r\n\u00a0 \u00a0 &lt;\/nav&gt; \u00a0 \u00a0\r\n\r\n&lt;\/div&gt;\r\n&lt;\/body&gt;\r\n\r\n&lt;\/html&gt;<\/pre>\n<p><img decoding=\"async\" loading=\"lazy\" class=\"aligncenter size-full wp-image-7959\" src=\"https:\/\/www.jquery-az.com\/wp-content\/uploads\/2022\/12\/6-12-dropdown-navbar.png\" alt=\"dropdown-navbar\" width=\"806\" height=\"346\" srcset=\"https:\/\/www.jquery-az.com\/wp-content\/uploads\/2022\/12\/6-12-dropdown-navbar.png 806w, https:\/\/www.jquery-az.com\/wp-content\/uploads\/2022\/12\/6-12-dropdown-navbar-300x129.png 300w, https:\/\/www.jquery-az.com\/wp-content\/uploads\/2022\/12\/6-12-dropdown-navbar-768x330.png 768w\" sizes=\"(max-width: 806px) 100vw, 806px\" \/><\/p>\n<p>For the full documentation, please refer to <a href=\"https:\/\/getbootstrap.com\/docs\/5.0\/components\/dropdowns\/\" target=\"_blank\" rel=\"nofollow\">https:\/\/getbootstrap.com\/docs\/5.0\/components\/dropdowns\/<\/a><\/p>\n","protected":false},"excerpt":{"rendered":"<p>Dropdowns are used to display links or other information if the mouse is clicked on an element like a button, link etc. These are contextual overlays or menus that you use in the navbar, tabs, pill nav as well.<\/p>\n","protected":false},"author":1,"featured_media":7954,"comment_status":"closed","ping_status":"closed","sticky":false,"template":"","format":"standard","meta":[],"categories":[136],"tags":[48],"yoast_head":"<!-- This site is optimized with the Yoast SEO plugin v21.5 - https:\/\/yoast.com\/wordpress\/plugins\/seo\/ -->\n<title>12 Examples to Learn Using Bootstrap 5 Dropdown<\/title>\n<meta name=\"description\" content=\"Dropdowns are used to display links or other information if the mouse is clicked on an element like a button, link etc. These are contextual overlays or menus that you use in the navbar, tabs, pill nav as well.\" \/>\n<meta name=\"robots\" content=\"index, follow, max-snippet:-1, max-image-preview:large, max-video-preview:-1\" \/>\n<link rel=\"canonical\" href=\"https:\/\/www.jquery-az.com\/bootstrap-5-dropdown\/\" \/>\n<meta property=\"og:locale\" content=\"en_US\" \/>\n<meta property=\"og:type\" content=\"article\" \/>\n<meta property=\"og:title\" content=\"12 Examples to Learn Using Bootstrap 5 Dropdown\" \/>\n<meta property=\"og:description\" content=\"Dropdowns are used to display links or other information if the mouse is clicked on an element like a button, link etc. These are contextual overlays or menus that you use in the navbar, tabs, pill nav as well.\" \/>\n<meta property=\"og:url\" content=\"https:\/\/www.jquery-az.com\/bootstrap-5-dropdown\/\" \/>\n<meta property=\"article:published_time\" content=\"2022-12-29T15:08:59+00:00\" \/>\n<meta property=\"article:modified_time\" content=\"2023-09-30T09:25:57+00:00\" \/>\n<meta property=\"og:image\" content=\"https:\/\/www.jquery-az.com\/wp-content\/uploads\/2022\/12\/6-6-dropdown-upward.png\" \/>\n\t<meta property=\"og:image:width\" content=\"667\" \/>\n\t<meta property=\"og:image:height\" content=\"233\" \/>\n\t<meta property=\"og:image:type\" content=\"image\/png\" \/>\n<meta name=\"author\" content=\"jqueryaz\" \/>\n<meta name=\"twitter:label1\" content=\"Written by\" \/>\n\t<meta name=\"twitter:data1\" content=\"jqueryaz\" \/>\n\t<meta name=\"twitter:label2\" content=\"Est. reading time\" \/>\n\t<meta name=\"twitter:data2\" content=\"20 minutes\" \/>\n<script type=\"application\/ld+json\" class=\"yoast-schema-graph\">{\"@context\":\"https:\/\/schema.org\",\"@graph\":[{\"@type\":\"WebPage\",\"@id\":\"https:\/\/www.jquery-az.com\/bootstrap-5-dropdown\/\",\"url\":\"https:\/\/www.jquery-az.com\/bootstrap-5-dropdown\/\",\"name\":\"12 Examples to Learn Using Bootstrap 5 Dropdown\",\"isPartOf\":{\"@id\":\"https:\/\/www.jquery-az.com\/#website\"},\"datePublished\":\"2022-12-29T15:08:59+00:00\",\"dateModified\":\"2023-09-30T09:25:57+00:00\",\"author\":{\"@id\":\"https:\/\/www.jquery-az.com\/#\/schema\/person\/c3f75f86b1c65bf0b93fc46f629fcad3\"},\"description\":\"Dropdowns are used to display links or other information if the mouse is clicked on an element like a button, link etc. These are contextual overlays or menus that you use in the navbar, tabs, pill nav as well.\",\"breadcrumb\":{\"@id\":\"https:\/\/www.jquery-az.com\/bootstrap-5-dropdown\/#breadcrumb\"},\"inLanguage\":\"en-US\",\"potentialAction\":[{\"@type\":\"ReadAction\",\"target\":[\"https:\/\/www.jquery-az.com\/bootstrap-5-dropdown\/\"]}]},{\"@type\":\"BreadcrumbList\",\"@id\":\"https:\/\/www.jquery-az.com\/bootstrap-5-dropdown\/#breadcrumb\",\"itemListElement\":[{\"@type\":\"ListItem\",\"position\":1,\"name\":\"Home\",\"item\":\"https:\/\/www.jquery-az.com\/\"},{\"@type\":\"ListItem\",\"position\":2,\"name\":\"12 Examples to Learn Using Bootstrap 5 Dropdown\"}]},{\"@type\":\"WebSite\",\"@id\":\"https:\/\/www.jquery-az.com\/#website\",\"url\":\"https:\/\/www.jquery-az.com\/\",\"name\":\"\",\"description\":\"PHP, Bootstrap, jQuery, CSS, Python, Java and others\",\"potentialAction\":[{\"@type\":\"SearchAction\",\"target\":{\"@type\":\"EntryPoint\",\"urlTemplate\":\"https:\/\/www.jquery-az.com\/?s={search_term_string}\"},\"query-input\":\"required name=search_term_string\"}],\"inLanguage\":\"en-US\"},{\"@type\":\"Person\",\"@id\":\"https:\/\/www.jquery-az.com\/#\/schema\/person\/c3f75f86b1c65bf0b93fc46f629fcad3\",\"name\":\"jqueryaz\",\"image\":{\"@type\":\"ImageObject\",\"inLanguage\":\"en-US\",\"@id\":\"https:\/\/www.jquery-az.com\/#\/schema\/person\/image\/\",\"url\":\"https:\/\/secure.gravatar.com\/avatar\/e2a3743b4da71bd52984e02bd5c3280c?s=96&d=mm&r=g\",\"contentUrl\":\"https:\/\/secure.gravatar.com\/avatar\/e2a3743b4da71bd52984e02bd5c3280c?s=96&d=mm&r=g\",\"caption\":\"jqueryaz\"}}]}<\/script>\n<!-- \/ Yoast SEO plugin. -->","yoast_head_json":{"title":"12 Examples to Learn Using Bootstrap 5 Dropdown","description":"Dropdowns are used to display links or other information if the mouse is clicked on an element like a button, link etc. These are contextual overlays or menus that you use in the navbar, tabs, pill nav as well.","robots":{"index":"index","follow":"follow","max-snippet":"max-snippet:-1","max-image-preview":"max-image-preview:large","max-video-preview":"max-video-preview:-1"},"canonical":"https:\/\/www.jquery-az.com\/bootstrap-5-dropdown\/","og_locale":"en_US","og_type":"article","og_title":"12 Examples to Learn Using Bootstrap 5 Dropdown","og_description":"Dropdowns are used to display links or other information if the mouse is clicked on an element like a button, link etc. These are contextual overlays or menus that you use in the navbar, tabs, pill nav as well.","og_url":"https:\/\/www.jquery-az.com\/bootstrap-5-dropdown\/","article_published_time":"2022-12-29T15:08:59+00:00","article_modified_time":"2023-09-30T09:25:57+00:00","og_image":[{"width":667,"height":233,"url":"https:\/\/www.jquery-az.com\/wp-content\/uploads\/2022\/12\/6-6-dropdown-upward.png","type":"image\/png"}],"author":"jqueryaz","twitter_misc":{"Written by":"jqueryaz","Est. reading time":"20 minutes"},"schema":{"@context":"https:\/\/schema.org","@graph":[{"@type":"WebPage","@id":"https:\/\/www.jquery-az.com\/bootstrap-5-dropdown\/","url":"https:\/\/www.jquery-az.com\/bootstrap-5-dropdown\/","name":"12 Examples to Learn Using Bootstrap 5 Dropdown","isPartOf":{"@id":"https:\/\/www.jquery-az.com\/#website"},"datePublished":"2022-12-29T15:08:59+00:00","dateModified":"2023-09-30T09:25:57+00:00","author":{"@id":"https:\/\/www.jquery-az.com\/#\/schema\/person\/c3f75f86b1c65bf0b93fc46f629fcad3"},"description":"Dropdowns are used to display links or other information if the mouse is clicked on an element like a button, link etc. These are contextual overlays or menus that you use in the navbar, tabs, pill nav as well.","breadcrumb":{"@id":"https:\/\/www.jquery-az.com\/bootstrap-5-dropdown\/#breadcrumb"},"inLanguage":"en-US","potentialAction":[{"@type":"ReadAction","target":["https:\/\/www.jquery-az.com\/bootstrap-5-dropdown\/"]}]},{"@type":"BreadcrumbList","@id":"https:\/\/www.jquery-az.com\/bootstrap-5-dropdown\/#breadcrumb","itemListElement":[{"@type":"ListItem","position":1,"name":"Home","item":"https:\/\/www.jquery-az.com\/"},{"@type":"ListItem","position":2,"name":"12 Examples to Learn Using Bootstrap 5 Dropdown"}]},{"@type":"WebSite","@id":"https:\/\/www.jquery-az.com\/#website","url":"https:\/\/www.jquery-az.com\/","name":"","description":"PHP, Bootstrap, jQuery, CSS, Python, Java and others","potentialAction":[{"@type":"SearchAction","target":{"@type":"EntryPoint","urlTemplate":"https:\/\/www.jquery-az.com\/?s={search_term_string}"},"query-input":"required name=search_term_string"}],"inLanguage":"en-US"},{"@type":"Person","@id":"https:\/\/www.jquery-az.com\/#\/schema\/person\/c3f75f86b1c65bf0b93fc46f629fcad3","name":"jqueryaz","image":{"@type":"ImageObject","inLanguage":"en-US","@id":"https:\/\/www.jquery-az.com\/#\/schema\/person\/image\/","url":"https:\/\/secure.gravatar.com\/avatar\/e2a3743b4da71bd52984e02bd5c3280c?s=96&d=mm&r=g","contentUrl":"https:\/\/secure.gravatar.com\/avatar\/e2a3743b4da71bd52984e02bd5c3280c?s=96&d=mm&r=g","caption":"jqueryaz"}}]}},"_links":{"self":[{"href":"https:\/\/www.jquery-az.com\/wp-json\/wp\/v2\/posts\/7948"}],"collection":[{"href":"https:\/\/www.jquery-az.com\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/www.jquery-az.com\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/www.jquery-az.com\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/www.jquery-az.com\/wp-json\/wp\/v2\/comments?post=7948"}],"version-history":[{"count":19,"href":"https:\/\/www.jquery-az.com\/wp-json\/wp\/v2\/posts\/7948\/revisions"}],"predecessor-version":[{"id":9990,"href":"https:\/\/www.jquery-az.com\/wp-json\/wp\/v2\/posts\/7948\/revisions\/9990"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/www.jquery-az.com\/wp-json\/wp\/v2\/media\/7954"}],"wp:attachment":[{"href":"https:\/\/www.jquery-az.com\/wp-json\/wp\/v2\/media?parent=7948"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/www.jquery-az.com\/wp-json\/wp\/v2\/categories?post=7948"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/www.jquery-az.com\/wp-json\/wp\/v2\/tags?post=7948"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}