[FEATURE] Add responsive tab navigation as dropdown

Resources/Private/Templates/Bootstrap5/Standard/Tabs.html

-<ul class="nav nav-pills bg-light p-2 rounded" id="pills-tab-df-tabs" role="tablist">
+<ul class="nav nav-pills bg-light p-2 rounded d-none d-sm-flex" id="pills-tab-df-tabs" role="tablist">
     <f:for each="{tabElements}" as="data_item" iteration="iterator">
         <li class="nav-item" role="presentation">
             <button class="nav-link {f:if(condition: iterator.isFirst, then: 'active')}"
@@ -11,6 +11,27 @@
         </li>
     </f:for>
 </ul>
+<div class="nav nav-pills dropdown d-block d-sm-none" role="tablist">
+    <a class="btn btn-light dropdown-toggle dropdown-toggle--no-caret w-100" data-toggle="dropdown" href="#" aria-expanded="false">
+        <span class="dropdown-text">
+            {tabElements.0.title -> f:format.raw()}
+        </span>
+        <span class="caret"></span>
+    </a>
+    <ul class="dropdown-menu w-100">
+        <f:for each="{tabElements}" as="data_item" iteration="iterator">
+            <li>
+                <button class="dropdown-item {f:if(condition: iterator.isFirst, then: 'active')}"
+                    id="pills-{data_item.record}-{iterator.index}-tab" data-bs-toggle="pill"
+                    data-bs-target="#pills-{data_item.record}-{iterator.index}" type="button" role="tab"
+                    aria-controls="pills-{data_item.record}-{iterator.index}"
+                    aria-selected="{f:if(condition: iterator.isFirst, then: 'true', else: 'false')}">
+                    {data_item.title -> f:format.raw()}
+                </button>
+            </li>
+        </f:for>
+    </ul>
+</div>
 <div class="tab-content pt-4">
     <f:for each="{tabElements}" as="data_item" iteration="iterator">
         <div class="tab-pane fade {f:if(condition: iterator.isFirst, then: 'show active')}"