From 77c5adbe4deba3427b1b7f0cf8f91c58be4fca25 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?=E4=BA=8C=E8=B4=A7=E6=9C=BA=E5=99=A8=E4=BA=BA?=
 <smith3816@gmail.com>
Date: Sat, 30 May 2020 18:28:25 +0800
Subject: [PATCH] feat: New Tabs (#24552)

* init style

* support size

* editable

* add shadow

* update demo

* fix nest style

* update rtl

* update snapshot

* bump

* fix hover

* fix test case

* fix style lint

* clean up

* updat docs

* add onTabScroll

* upgrade rc-dropdown

* update snapshot

* clean snapshot

* clean up

Co-authored-by: afc163 <afc163@gmail.com>
---
 .../__tests__/__snapshots__/demo.test.js.snap |  415 +-
 .../__snapshots__/components.test.js.snap     |  906 ++-
 .../__tests__/__snapshots__/demo.test.js.snap |  184 +-
 components/style/themes/default.less          |    1 +
 components/tabs/TabBar.tsx                    |   91 -
 .../__tests__/__snapshots__/demo.test.js.snap | 5358 ++++++++---------
 .../__snapshots__/index.test.js.snap          |  319 +-
 components/tabs/__tests__/index.test.js       |   14 +-
 components/tabs/demo/basic.md                 |    7 +-
 components/tabs/demo/card-top.md              |   38 +-
 components/tabs/demo/slide.md                 |    2 +-
 components/tabs/index.en-US.md                |   37 +-
 components/tabs/index.tsx                     |  240 +-
 components/tabs/index.zh-CN.md                |   37 +-
 components/tabs/style/card-style.less         |  181 -
 components/tabs/style/card.less               |   90 +
 components/tabs/style/dropdown.less           |   59 +
 components/tabs/style/index.less              |  497 +-
 components/tabs/style/position.less           |  186 +
 components/tabs/style/rtl.less                |   96 +-
 components/tabs/style/size.less               |   41 +
 components/typography/Base.tsx                |   10 +-
 package.json                                  |    4 +-
 site/theme/static/template.html               |   10 +-
 site/theme/template/Home/MorePage.tsx         |    6 +-
 25 files changed, 3795 insertions(+), 5034 deletions(-)
 delete mode 100644 components/tabs/TabBar.tsx
 delete mode 100644 components/tabs/style/card-style.less
 create mode 100644 components/tabs/style/card.less
 create mode 100644 components/tabs/style/dropdown.less
 create mode 100644 components/tabs/style/position.less
 create mode 100644 components/tabs/style/size.less

diff --git a/components/card/__tests__/__snapshots__/demo.test.js.snap b/components/card/__tests__/__snapshots__/demo.test.js.snap
index 076e34a278cd..54390765a11d 100644
--- a/components/card/__tests__/__snapshots__/demo.test.js.snap
+++ b/components/card/__tests__/__snapshots__/demo.test.js.snap
@@ -839,133 +839,99 @@ exports[`renders ./components/card/demo/tabs.md correctly 1`] = `
         </div>
       </div>
       <div
-        class="ant-tabs ant-tabs-top ant-card-head-tabs ant-tabs-large ant-tabs-line"
+        class="ant-tabs ant-tabs-top ant-card-head-tabs ant-tabs-large"
       >
         <div
-          class="ant-tabs-bar ant-tabs-top-bar ant-tabs-large-bar"
+          class="ant-tabs-nav"
           role="tablist"
-          tabindex="-1"
         >
           <div
-            class="ant-tabs-nav-container"
+            class="ant-tabs-nav-wrap"
           >
-            <span
-              class="ant-tabs-tab-prev ant-tabs-tab-btn-disabled"
-              unselectable="unselectable"
+            <div
+              class="ant-tabs-nav-list"
+              style="transform:translate(0px, 0px)"
             >
-              <span
-                class="ant-tabs-tab-prev-icon"
+              <button
+                aria-selected="true"
+                class="ant-tabs-tab ant-tabs-tab-active"
+                role="tab"
+                tabindex="0"
+                type="button"
               >
-                <span
-                  aria-label="left"
-                  class="anticon anticon-left ant-tabs-tab-prev-icon-target"
-                  role="img"
-                >
-                  <svg
-                    aria-hidden="true"
-                    class=""
-                    data-icon="left"
-                    fill="currentColor"
-                    focusable="false"
-                    height="1em"
-                    viewBox="64 64 896 896"
-                    width="1em"
-                  >
-                    <path
-                      d="M724 218.3V141c0-6.7-7.7-10.4-12.9-6.3L260.3 486.8a31.86 31.86 0 000 50.3l450.8 352.1c5.3 4.1 12.9.4 12.9-6.3v-77.3c0-4.9-2.3-9.6-6.1-12.6l-360-281 360-281.1c3.8-3 6.1-7.7 6.1-12.6z"
-                    />
-                  </svg>
-                </span>
-              </span>
-            </span>
-            <span
-              class="ant-tabs-tab-next ant-tabs-tab-btn-disabled"
-              unselectable="unselectable"
-            >
-              <span
-                class="ant-tabs-tab-next-icon"
+                tab1
+              </button>
+              <button
+                aria-selected="false"
+                class="ant-tabs-tab"
+                role="tab"
+                tabindex="0"
+                type="button"
               >
-                <span
-                  aria-label="right"
-                  class="anticon anticon-right ant-tabs-tab-next-icon-target"
-                  role="img"
-                >
-                  <svg
-                    aria-hidden="true"
-                    class=""
-                    data-icon="right"
-                    fill="currentColor"
-                    focusable="false"
-                    height="1em"
-                    viewBox="64 64 896 896"
-                    width="1em"
-                  >
-                    <path
-                      d="M765.7 486.8L314.9 134.7A7.97 7.97 0 00302 141v77.3c0 4.9 2.3 9.6 6.1 12.6l360 281.1-360 281.1c-3.9 3-6.1 7.7-6.1 12.6V883c0 6.7 7.7 10.4 12.9 6.3l450.8-352.1a31.96 31.96 0 000-50.4z"
-                    />
-                  </svg>
-                </span>
-              </span>
-            </span>
-            <div
-              class="ant-tabs-nav-wrap"
-            >
+                tab2
+              </button>
               <div
-                class="ant-tabs-nav-scroll"
+                class="ant-tabs-ink-bar ant-tabs-ink-bar-animated"
+              />
+            </div>
+          </div>
+          <div
+            class="ant-tabs-nav-operations ant-tabs-nav-operations-hidden"
+          >
+            <button
+              aria-controls="null-more-popup"
+              aria-expanded="false"
+              aria-haspopup="listbox"
+              aria-hidden="true"
+              class="ant-tabs-nav-more"
+              id="null-more"
+              style="visibility:hidden;order:1"
+              tabindex="-1"
+              type="button"
+            >
+              <span
+                aria-label="ellipsis"
+                class="anticon anticon-ellipsis"
+                role="img"
               >
-                <div
-                  class="ant-tabs-nav ant-tabs-nav-animated"
+                <svg
+                  aria-hidden="true"
+                  class=""
+                  data-icon="ellipsis"
+                  fill="currentColor"
+                  focusable="false"
+                  height="1em"
+                  viewBox="64 64 896 896"
+                  width="1em"
                 >
-                  <div>
-                    <div
-                      aria-controls="tabpane-tab1"
-                      aria-disabled="false"
-                      aria-selected="true"
-                      class="ant-tabs-tab-active ant-tabs-tab"
-                      id="tab-tab1"
-                      role="tab"
-                      tabindex="0"
-                    >
-                      tab1
-                    </div>
-                    <div
-                      aria-controls="tabpane-tab2"
-                      aria-disabled="false"
-                      aria-selected="false"
-                      class=" ant-tabs-tab"
-                      id="tab-tab2"
-                      role="tab"
-                      tabindex="-1"
-                    >
-                      tab2
-                    </div>
-                  </div>
-                  <div
-                    class="ant-tabs-ink-bar ant-tabs-ink-bar-animated"
+                  <path
+                    d="M176 511a56 56 0 10112 0 56 56 0 10-112 0zm280 0a56 56 0 10112 0 56 56 0 10-112 0zm280 0a56 56 0 10112 0 56 56 0 10-112 0z"
                   />
-                </div>
-              </div>
-            </div>
+                </svg>
+              </span>
+            </button>
           </div>
         </div>
         <div
-          class="ant-tabs-content ant-tabs-content-animated ant-tabs-top-content"
-          style="margin-left:0%"
+          class="ant-tabs-content-holder"
         >
           <div
-            aria-hidden="false"
-            class="ant-tabs-tabpane ant-tabs-tabpane-active"
-            role="tabpanel"
-            style="visibility:visible"
-            tabindex="0"
-          />
-          <div
-            aria-hidden="true"
-            class="ant-tabs-tabpane ant-tabs-tabpane-inactive"
-            role="tabpanel"
-            style="visibility:hidden"
-            tabindex="-1"
-          />
+            class="ant-tabs-content ant-tabs-content-top"
+          >
+            <div
+              aria-hidden="false"
+              class="ant-tabs-tabpane ant-tabs-tabpane-active"
+              role="tabpanel"
+              tabindex="0"
+            />
+            <div
+              aria-hidden="true"
+              class="ant-tabs-tabpane"
+              role="tabpanel"
+              style="display:none"
+              tabindex="-1"
+            />
+          </div>
         </div>
       </div>
     </div>
@@ -990,161 +956,124 @@ exports[`renders ./components/card/demo/tabs.md correctly 1`] = `
         class="ant-card-head-wrapper"
       />
       <div
-        class="ant-tabs ant-tabs-top ant-card-head-tabs ant-tabs-large ant-tabs-line"
+        class="ant-tabs ant-tabs-top ant-card-head-tabs ant-tabs-large"
       >
         <div
-          class="ant-tabs-bar ant-tabs-top-bar ant-tabs-large-bar"
+          class="ant-tabs-nav"
           role="tablist"
-          tabindex="-1"
         >
           <div
-            class="ant-tabs-extra-content"
-            style="float:right"
+            class="ant-tabs-nav-wrap"
           >
-            <a
-              href="#"
+            <div
+              class="ant-tabs-nav-list"
+              style="transform:translate(0px, 0px)"
             >
-              More
-            </a>
+              <button
+                aria-selected="false"
+                class="ant-tabs-tab"
+                role="tab"
+                tabindex="0"
+                type="button"
+              >
+                article
+              </button>
+              <button
+                aria-selected="true"
+                class="ant-tabs-tab ant-tabs-tab-active"
+                role="tab"
+                tabindex="0"
+                type="button"
+              >
+                app
+              </button>
+              <button
+                aria-selected="false"
+                class="ant-tabs-tab"
+                role="tab"
+                tabindex="0"
+                type="button"
+              >
+                project
+              </button>
+              <div
+                class="ant-tabs-ink-bar ant-tabs-ink-bar-animated"
+              />
+            </div>
           </div>
           <div
-            class="ant-tabs-nav-container"
+            class="ant-tabs-nav-operations ant-tabs-nav-operations-hidden"
           >
-            <span
-              class="ant-tabs-tab-prev ant-tabs-tab-btn-disabled"
-              unselectable="unselectable"
-            >
-              <span
-                class="ant-tabs-tab-prev-icon"
-              >
-                <span
-                  aria-label="left"
-                  class="anticon anticon-left ant-tabs-tab-prev-icon-target"
-                  role="img"
-                >
-                  <svg
-                    aria-hidden="true"
-                    class=""
-                    data-icon="left"
-                    fill="currentColor"
-                    focusable="false"
-                    height="1em"
-                    viewBox="64 64 896 896"
-                    width="1em"
-                  >
-                    <path
-                      d="M724 218.3V141c0-6.7-7.7-10.4-12.9-6.3L260.3 486.8a31.86 31.86 0 000 50.3l450.8 352.1c5.3 4.1 12.9.4 12.9-6.3v-77.3c0-4.9-2.3-9.6-6.1-12.6l-360-281 360-281.1c3.8-3 6.1-7.7 6.1-12.6z"
-                    />
-                  </svg>
-                </span>
-              </span>
-            </span>
-            <span
-              class="ant-tabs-tab-next ant-tabs-tab-btn-disabled"
-              unselectable="unselectable"
+            <button
+              aria-controls="null-more-popup"
+              aria-expanded="false"
+              aria-haspopup="listbox"
+              aria-hidden="true"
+              class="ant-tabs-nav-more"
+              id="null-more"
+              style="visibility:hidden;order:1"
+              tabindex="-1"
+              type="button"
             >
               <span
-                class="ant-tabs-tab-next-icon"
+                aria-label="ellipsis"
+                class="anticon anticon-ellipsis"
+                role="img"
               >
-                <span
-                  aria-label="right"
-                  class="anticon anticon-right ant-tabs-tab-next-icon-target"
-                  role="img"
+                <svg
+                  aria-hidden="true"
+                  class=""
+                  data-icon="ellipsis"
+                  fill="currentColor"
+                  focusable="false"
+                  height="1em"
+                  viewBox="64 64 896 896"
+                  width="1em"
                 >
-                  <svg
-                    aria-hidden="true"
-                    class=""
-                    data-icon="right"
-                    fill="currentColor"
-                    focusable="false"
-                    height="1em"
-                    viewBox="64 64 896 896"
-                    width="1em"
-                  >
-                    <path
-                      d="M765.7 486.8L314.9 134.7A7.97 7.97 0 00302 141v77.3c0 4.9 2.3 9.6 6.1 12.6l360 281.1-360 281.1c-3.9 3-6.1 7.7-6.1 12.6V883c0 6.7 7.7 10.4 12.9 6.3l450.8-352.1a31.96 31.96 0 000-50.4z"
-                    />
-                  </svg>
-                </span>
+                  <path
+                    d="M176 511a56 56 0 10112 0 56 56 0 10-112 0zm280 0a56 56 0 10112 0 56 56 0 10-112 0zm280 0a56 56 0 10112 0 56 56 0 10-112 0z"
+                  />
+                </svg>
               </span>
-            </span>
-            <div
-              class="ant-tabs-nav-wrap"
+            </button>
+          </div>
+          <div
+            class="ant-tabs-extra-content"
+          >
+            <a
+              href="#"
             >
-              <div
-                class="ant-tabs-nav-scroll"
-              >
-                <div
-                  class="ant-tabs-nav ant-tabs-nav-animated"
-                >
-                  <div>
-                    <div
-                      aria-controls="tabpane-article"
-                      aria-disabled="false"
-                      aria-selected="false"
-                      class=" ant-tabs-tab"
-                      id="tab-article"
-                      role="tab"
-                      tabindex="-1"
-                    >
-                      article
-                    </div>
-                    <div
-                      aria-controls="tabpane-app"
-                      aria-disabled="false"
-                      aria-selected="true"
-                      class="ant-tabs-tab-active ant-tabs-tab"
-                      id="tab-app"
-                      role="tab"
-                      tabindex="0"
-                    >
-                      app
-                    </div>
-                    <div
-                      aria-controls="tabpane-project"
-                      aria-disabled="false"
-                      aria-selected="false"
-                      class=" ant-tabs-tab"
-                      id="tab-project"
-                      role="tab"
-                      tabindex="-1"
-                    >
-                      project
-                    </div>
-                  </div>
-                  <div
-                    class="ant-tabs-ink-bar ant-tabs-ink-bar-animated"
-                  />
-                </div>
-              </div>
-            </div>
+              More
+            </a>
           </div>
         </div>
         <div
-          class="ant-tabs-content ant-tabs-content-animated ant-tabs-top-content"
-          style="margin-left:-100%"
+          class="ant-tabs-content-holder"
         >
           <div
-            aria-hidden="true"
-            class="ant-tabs-tabpane ant-tabs-tabpane-inactive"
-            role="tabpanel"
-            style="visibility:hidden"
-            tabindex="-1"
-          />
-          <div
-            aria-hidden="false"
-            class="ant-tabs-tabpane ant-tabs-tabpane-active"
-            role="tabpanel"
-            style="visibility:visible"
-            tabindex="0"
-          />
-          <div
-            aria-hidden="true"
-            class="ant-tabs-tabpane ant-tabs-tabpane-inactive"
-            role="tabpanel"
-            style="visibility:hidden"
-            tabindex="-1"
-          />
+            class="ant-tabs-content ant-tabs-content-top"
+          >
+            <div
+              aria-hidden="true"
+              class="ant-tabs-tabpane"
+              role="tabpanel"
+              style="display:none"
+              tabindex="-1"
+            />
+            <div
+              aria-hidden="false"
+              class="ant-tabs-tabpane ant-tabs-tabpane-active"
+              role="tabpanel"
+              tabindex="0"
+            />
+            <div
+              aria-hidden="true"
+              class="ant-tabs-tabpane"
+              role="tabpanel"
+              style="display:none"
+              tabindex="-1"
+            />
+          </div>
         </div>
       </div>
     </div>
diff --git a/components/config-provider/__tests__/__snapshots__/components.test.js.snap b/components/config-provider/__tests__/__snapshots__/components.test.js.snap
index a6be5c0058a3..5ceeba228f53 100644
--- a/components/config-provider/__tests__/__snapshots__/components.test.js.snap
+++ b/components/config-provider/__tests__/__snapshots__/components.test.js.snap
@@ -25178,690 +25178,504 @@ exports[`ConfigProvider components Table prefixCls 1`] = `
 
 exports[`ConfigProvider components Tabs configProvider 1`] = `
 <div
-  class="config-tabs config-tabs-top config-tabs-line"
+  class="config-tabs config-tabs-top"
 >
   <div
-    class="config-tabs-bar config-tabs-top-bar"
+    class="config-tabs-nav"
     role="tablist"
-    tabindex="-1"
   >
     <div
-      class="config-tabs-nav-container"
+      class="config-tabs-nav-wrap"
     >
-      <span
-        class="config-tabs-tab-prev config-tabs-tab-btn-disabled"
-        unselectable="unselectable"
+      <div
+        class="config-tabs-nav-list"
+        style="transform:translate(0px, 0px)"
       >
-        <span
-          class="config-tabs-tab-prev-icon"
+        <button
+          aria-selected="false"
+          class="config-tabs-tab"
+          role="tab"
+          tabindex="0"
+          type="button"
         >
-          <span
-            aria-label="left"
-            class="anticon anticon-left config-tabs-tab-prev-icon-target"
-            role="img"
-          >
-            <svg
-              aria-hidden="true"
-              class=""
-              data-icon="left"
-              fill="currentColor"
-              focusable="false"
-              height="1em"
-              viewBox="64 64 896 896"
-              width="1em"
-            >
-              <path
-                d="M724 218.3V141c0-6.7-7.7-10.4-12.9-6.3L260.3 486.8a31.86 31.86 0 000 50.3l450.8 352.1c5.3 4.1 12.9.4 12.9-6.3v-77.3c0-4.9-2.3-9.6-6.1-12.6l-360-281 360-281.1c3.8-3 6.1-7.7 6.1-12.6z"
-              />
-            </svg>
-          </span>
-        </span>
-      </span>
-      <span
-        class="config-tabs-tab-next config-tabs-tab-btn-disabled"
-        unselectable="unselectable"
+          Bamboo
+        </button>
+        <div
+          class="config-tabs-ink-bar config-tabs-ink-bar-animated"
+        />
+      </div>
+    </div>
+    <div
+      class="config-tabs-nav-operations config-tabs-nav-operations-hidden"
+    >
+      <button
+        aria-controls="null-more-popup"
+        aria-expanded="false"
+        aria-haspopup="listbox"
+        aria-hidden="true"
+        class="config-tabs-nav-more"
+        id="null-more"
+        style="visibility:hidden;order:1"
+        tabindex="-1"
+        type="button"
       >
         <span
-          class="config-tabs-tab-next-icon"
-        >
-          <span
-            aria-label="right"
-            class="anticon anticon-right config-tabs-tab-next-icon-target"
-            role="img"
-          >
-            <svg
-              aria-hidden="true"
-              class=""
-              data-icon="right"
-              fill="currentColor"
-              focusable="false"
-              height="1em"
-              viewBox="64 64 896 896"
-              width="1em"
-            >
-              <path
-                d="M765.7 486.8L314.9 134.7A7.97 7.97 0 00302 141v77.3c0 4.9 2.3 9.6 6.1 12.6l360 281.1-360 281.1c-3.9 3-6.1 7.7-6.1 12.6V883c0 6.7 7.7 10.4 12.9 6.3l450.8-352.1a31.96 31.96 0 000-50.4z"
-              />
-            </svg>
-          </span>
-        </span>
-      </span>
-      <div
-        class="config-tabs-nav-wrap"
-      >
-        <div
-          class="config-tabs-nav-scroll"
+          aria-label="ellipsis"
+          class="anticon anticon-ellipsis"
+          role="img"
         >
-          <div
-            class="config-tabs-nav config-tabs-nav-animated"
+          <svg
+            aria-hidden="true"
+            class=""
+            data-icon="ellipsis"
+            fill="currentColor"
+            focusable="false"
+            height="1em"
+            viewBox="64 64 896 896"
+            width="1em"
           >
-            <div>
-              <div
-                aria-controls="tabpane-Light"
-                aria-disabled="false"
-                aria-selected="true"
-                class="config-tabs-tab-active config-tabs-tab"
-                id="tab-Light"
-                role="tab"
-                tabindex="0"
-              >
-                Bamboo
-              </div>
-            </div>
-            <div
-              class="config-tabs-ink-bar config-tabs-ink-bar-animated"
+            <path
+              d="M176 511a56 56 0 10112 0 56 56 0 10-112 0zm280 0a56 56 0 10112 0 56 56 0 10-112 0zm280 0a56 56 0 10112 0 56 56 0 10-112 0z"
             />
-          </div>
-        </div>
-      </div>
+          </svg>
+        </span>
+      </button>
     </div>
   </div>
   <div
-    class="config-tabs-content config-tabs-content-animated config-tabs-top-content"
-    style="margin-left:0%"
+    class="config-tabs-content-holder"
   >
     <div
-      aria-hidden="false"
-      class="config-tabs-tabpane config-tabs-tabpane-active"
-      role="tabpanel"
-      style="visibility:visible"
-      tabindex="0"
-    />
+      class="config-tabs-content config-tabs-content-top"
+    >
+      <div
+        aria-hidden="true"
+        class="config-tabs-tabpane"
+        role="tabpanel"
+        style="display:none"
+        tabindex="-1"
+      />
+    </div>
   </div>
 </div>
 `;
 
 exports[`ConfigProvider components Tabs configProvider componentSize large 1`] = `
 <div
-  class="config-tabs config-tabs-top config-tabs-line"
+  class="config-tabs config-tabs-top"
 >
   <div
-    class="config-tabs-bar config-tabs-top-bar"
+    class="config-tabs-nav"
     role="tablist"
-    tabindex="-1"
   >
     <div
-      class="config-tabs-nav-container"
+      class="config-tabs-nav-wrap"
     >
-      <span
-        class="config-tabs-tab-prev config-tabs-tab-btn-disabled"
-        unselectable="unselectable"
+      <div
+        class="config-tabs-nav-list"
+        style="transform:translate(0px, 0px)"
       >
-        <span
-          class="config-tabs-tab-prev-icon"
+        <button
+          aria-selected="false"
+          class="config-tabs-tab"
+          role="tab"
+          tabindex="0"
+          type="button"
         >
-          <span
-            aria-label="left"
-            class="anticon anticon-left config-tabs-tab-prev-icon-target"
-            role="img"
-          >
-            <svg
-              aria-hidden="true"
-              class=""
-              data-icon="left"
-              fill="currentColor"
-              focusable="false"
-              height="1em"
-              viewBox="64 64 896 896"
-              width="1em"
-            >
-              <path
-                d="M724 218.3V141c0-6.7-7.7-10.4-12.9-6.3L260.3 486.8a31.86 31.86 0 000 50.3l450.8 352.1c5.3 4.1 12.9.4 12.9-6.3v-77.3c0-4.9-2.3-9.6-6.1-12.6l-360-281 360-281.1c3.8-3 6.1-7.7 6.1-12.6z"
-              />
-            </svg>
-          </span>
-        </span>
-      </span>
-      <span
-        class="config-tabs-tab-next config-tabs-tab-btn-disabled"
-        unselectable="unselectable"
+          Bamboo
+        </button>
+        <div
+          class="config-tabs-ink-bar config-tabs-ink-bar-animated"
+        />
+      </div>
+    </div>
+    <div
+      class="config-tabs-nav-operations config-tabs-nav-operations-hidden"
+    >
+      <button
+        aria-controls="null-more-popup"
+        aria-expanded="false"
+        aria-haspopup="listbox"
+        aria-hidden="true"
+        class="config-tabs-nav-more"
+        id="null-more"
+        style="visibility:hidden;order:1"
+        tabindex="-1"
+        type="button"
       >
         <span
-          class="config-tabs-tab-next-icon"
-        >
-          <span
-            aria-label="right"
-            class="anticon anticon-right config-tabs-tab-next-icon-target"
-            role="img"
-          >
-            <svg
-              aria-hidden="true"
-              class=""
-              data-icon="right"
-              fill="currentColor"
-              focusable="false"
-              height="1em"
-              viewBox="64 64 896 896"
-              width="1em"
-            >
-              <path
-                d="M765.7 486.8L314.9 134.7A7.97 7.97 0 00302 141v77.3c0 4.9 2.3 9.6 6.1 12.6l360 281.1-360 281.1c-3.9 3-6.1 7.7-6.1 12.6V883c0 6.7 7.7 10.4 12.9 6.3l450.8-352.1a31.96 31.96 0 000-50.4z"
-              />
-            </svg>
-          </span>
-        </span>
-      </span>
-      <div
-        class="config-tabs-nav-wrap"
-      >
-        <div
-          class="config-tabs-nav-scroll"
+          aria-label="ellipsis"
+          class="anticon anticon-ellipsis"
+          role="img"
         >
-          <div
-            class="config-tabs-nav config-tabs-nav-animated"
+          <svg
+            aria-hidden="true"
+            class=""
+            data-icon="ellipsis"
+            fill="currentColor"
+            focusable="false"
+            height="1em"
+            viewBox="64 64 896 896"
+            width="1em"
           >
-            <div>
-              <div
-                aria-controls="tabpane-Light"
-                aria-disabled="false"
-                aria-selected="true"
-                class="config-tabs-tab-active config-tabs-tab"
-                id="tab-Light"
-                role="tab"
-                tabindex="0"
-              >
-                Bamboo
-              </div>
-            </div>
-            <div
-              class="config-tabs-ink-bar config-tabs-ink-bar-animated"
+            <path
+              d="M176 511a56 56 0 10112 0 56 56 0 10-112 0zm280 0a56 56 0 10112 0 56 56 0 10-112 0zm280 0a56 56 0 10112 0 56 56 0 10-112 0z"
             />
-          </div>
-        </div>
-      </div>
+          </svg>
+        </span>
+      </button>
     </div>
   </div>
   <div
-    class="config-tabs-content config-tabs-content-animated config-tabs-top-content"
-    style="margin-left:0%"
+    class="config-tabs-content-holder"
   >
     <div
-      aria-hidden="false"
-      class="config-tabs-tabpane config-tabs-tabpane-active"
-      role="tabpanel"
-      style="visibility:visible"
-      tabindex="0"
-    />
+      class="config-tabs-content config-tabs-content-top"
+    >
+      <div
+        aria-hidden="true"
+        class="config-tabs-tabpane"
+        role="tabpanel"
+        style="display:none"
+        tabindex="-1"
+      />
+    </div>
   </div>
 </div>
 `;
 
 exports[`ConfigProvider components Tabs configProvider componentSize middle 1`] = `
 <div
-  class="config-tabs config-tabs-top config-tabs-line"
+  class="config-tabs config-tabs-top"
 >
   <div
-    class="config-tabs-bar config-tabs-top-bar"
+    class="config-tabs-nav"
     role="tablist"
-    tabindex="-1"
   >
     <div
-      class="config-tabs-nav-container"
+      class="config-tabs-nav-wrap"
     >
-      <span
-        class="config-tabs-tab-prev config-tabs-tab-btn-disabled"
-        unselectable="unselectable"
+      <div
+        class="config-tabs-nav-list"
+        style="transform:translate(0px, 0px)"
       >
-        <span
-          class="config-tabs-tab-prev-icon"
+        <button
+          aria-selected="false"
+          class="config-tabs-tab"
+          role="tab"
+          tabindex="0"
+          type="button"
         >
-          <span
-            aria-label="left"
-            class="anticon anticon-left config-tabs-tab-prev-icon-target"
-            role="img"
-          >
-            <svg
-              aria-hidden="true"
-              class=""
-              data-icon="left"
-              fill="currentColor"
-              focusable="false"
-              height="1em"
-              viewBox="64 64 896 896"
-              width="1em"
-            >
-              <path
-                d="M724 218.3V141c0-6.7-7.7-10.4-12.9-6.3L260.3 486.8a31.86 31.86 0 000 50.3l450.8 352.1c5.3 4.1 12.9.4 12.9-6.3v-77.3c0-4.9-2.3-9.6-6.1-12.6l-360-281 360-281.1c3.8-3 6.1-7.7 6.1-12.6z"
-              />
-            </svg>
-          </span>
-        </span>
-      </span>
-      <span
-        class="config-tabs-tab-next config-tabs-tab-btn-disabled"
-        unselectable="unselectable"
+          Bamboo
+        </button>
+        <div
+          class="config-tabs-ink-bar config-tabs-ink-bar-animated"
+        />
+      </div>
+    </div>
+    <div
+      class="config-tabs-nav-operations config-tabs-nav-operations-hidden"
+    >
+      <button
+        aria-controls="null-more-popup"
+        aria-expanded="false"
+        aria-haspopup="listbox"
+        aria-hidden="true"
+        class="config-tabs-nav-more"
+        id="null-more"
+        style="visibility:hidden;order:1"
+        tabindex="-1"
+        type="button"
       >
         <span
-          class="config-tabs-tab-next-icon"
-        >
-          <span
-            aria-label="right"
-            class="anticon anticon-right config-tabs-tab-next-icon-target"
-            role="img"
-          >
-            <svg
-              aria-hidden="true"
-              class=""
-              data-icon="right"
-              fill="currentColor"
-              focusable="false"
-              height="1em"
-              viewBox="64 64 896 896"
-              width="1em"
-            >
-              <path
-                d="M765.7 486.8L314.9 134.7A7.97 7.97 0 00302 141v77.3c0 4.9 2.3 9.6 6.1 12.6l360 281.1-360 281.1c-3.9 3-6.1 7.7-6.1 12.6V883c0 6.7 7.7 10.4 12.9 6.3l450.8-352.1a31.96 31.96 0 000-50.4z"
-              />
-            </svg>
-          </span>
-        </span>
-      </span>
-      <div
-        class="config-tabs-nav-wrap"
-      >
-        <div
-          class="config-tabs-nav-scroll"
+          aria-label="ellipsis"
+          class="anticon anticon-ellipsis"
+          role="img"
         >
-          <div
-            class="config-tabs-nav config-tabs-nav-animated"
+          <svg
+            aria-hidden="true"
+            class=""
+            data-icon="ellipsis"
+            fill="currentColor"
+            focusable="false"
+            height="1em"
+            viewBox="64 64 896 896"
+            width="1em"
           >
-            <div>
-              <div
-                aria-controls="tabpane-Light"
-                aria-disabled="false"
-                aria-selected="true"
-                class="config-tabs-tab-active config-tabs-tab"
-                id="tab-Light"
-                role="tab"
-                tabindex="0"
-              >
-                Bamboo
-              </div>
-            </div>
-            <div
-              class="config-tabs-ink-bar config-tabs-ink-bar-animated"
+            <path
+              d="M176 511a56 56 0 10112 0 56 56 0 10-112 0zm280 0a56 56 0 10112 0 56 56 0 10-112 0zm280 0a56 56 0 10112 0 56 56 0 10-112 0z"
             />
-          </div>
-        </div>
-      </div>
+          </svg>
+        </span>
+      </button>
     </div>
   </div>
   <div
-    class="config-tabs-content config-tabs-content-animated config-tabs-top-content"
-    style="margin-left:0%"
+    class="config-tabs-content-holder"
   >
     <div
-      aria-hidden="false"
-      class="config-tabs-tabpane config-tabs-tabpane-active"
-      role="tabpanel"
-      style="visibility:visible"
-      tabindex="0"
-    />
+      class="config-tabs-content config-tabs-content-top"
+    >
+      <div
+        aria-hidden="true"
+        class="config-tabs-tabpane"
+        role="tabpanel"
+        style="display:none"
+        tabindex="-1"
+      />
+    </div>
   </div>
 </div>
 `;
 
 exports[`ConfigProvider components Tabs configProvider virtual and dropdownMatchSelectWidth 1`] = `
 <div
-  class="ant-tabs ant-tabs-top ant-tabs-line"
+  class="ant-tabs ant-tabs-top"
 >
   <div
-    class="ant-tabs-bar ant-tabs-top-bar"
+    class="ant-tabs-nav"
     role="tablist"
-    tabindex="-1"
   >
     <div
-      class="ant-tabs-nav-container"
+      class="ant-tabs-nav-wrap"
     >
-      <span
-        class="ant-tabs-tab-prev ant-tabs-tab-btn-disabled"
-        unselectable="unselectable"
+      <div
+        class="ant-tabs-nav-list"
+        style="transform:translate(0px, 0px)"
       >
-        <span
-          class="ant-tabs-tab-prev-icon"
+        <button
+          aria-selected="false"
+          class="ant-tabs-tab"
+          role="tab"
+          tabindex="0"
+          type="button"
         >
-          <span
-            aria-label="left"
-            class="anticon anticon-left ant-tabs-tab-prev-icon-target"
-            role="img"
-          >
-            <svg
-              aria-hidden="true"
-              class=""
-              data-icon="left"
-              fill="currentColor"
-              focusable="false"
-              height="1em"
-              viewBox="64 64 896 896"
-              width="1em"
-            >
-              <path
-                d="M724 218.3V141c0-6.7-7.7-10.4-12.9-6.3L260.3 486.8a31.86 31.86 0 000 50.3l450.8 352.1c5.3 4.1 12.9.4 12.9-6.3v-77.3c0-4.9-2.3-9.6-6.1-12.6l-360-281 360-281.1c3.8-3 6.1-7.7 6.1-12.6z"
-              />
-            </svg>
-          </span>
-        </span>
-      </span>
-      <span
-        class="ant-tabs-tab-next ant-tabs-tab-btn-disabled"
-        unselectable="unselectable"
+          Bamboo
+        </button>
+        <div
+          class="ant-tabs-ink-bar ant-tabs-ink-bar-animated"
+        />
+      </div>
+    </div>
+    <div
+      class="ant-tabs-nav-operations ant-tabs-nav-operations-hidden"
+    >
+      <button
+        aria-controls="null-more-popup"
+        aria-expanded="false"
+        aria-haspopup="listbox"
+        aria-hidden="true"
+        class="ant-tabs-nav-more"
+        id="null-more"
+        style="visibility:hidden;order:1"
+        tabindex="-1"
+        type="button"
       >
         <span
-          class="ant-tabs-tab-next-icon"
-        >
-          <span
-            aria-label="right"
-            class="anticon anticon-right ant-tabs-tab-next-icon-target"
-            role="img"
-          >
-            <svg
-              aria-hidden="true"
-              class=""
-              data-icon="right"
-              fill="currentColor"
-              focusable="false"
-              height="1em"
-              viewBox="64 64 896 896"
-              width="1em"
-            >
-              <path
-                d="M765.7 486.8L314.9 134.7A7.97 7.97 0 00302 141v77.3c0 4.9 2.3 9.6 6.1 12.6l360 281.1-360 281.1c-3.9 3-6.1 7.7-6.1 12.6V883c0 6.7 7.7 10.4 12.9 6.3l450.8-352.1a31.96 31.96 0 000-50.4z"
-              />
-            </svg>
-          </span>
-        </span>
-      </span>
-      <div
-        class="ant-tabs-nav-wrap"
-      >
-        <div
-          class="ant-tabs-nav-scroll"
+          aria-label="ellipsis"
+          class="anticon anticon-ellipsis"
+          role="img"
         >
-          <div
-            class="ant-tabs-nav ant-tabs-nav-animated"
+          <svg
+            aria-hidden="true"
+            class=""
+            data-icon="ellipsis"
+            fill="currentColor"
+            focusable="false"
+            height="1em"
+            viewBox="64 64 896 896"
+            width="1em"
           >
-            <div>
-              <div
-                aria-controls="tabpane-Light"
-                aria-disabled="false"
-                aria-selected="true"
-                class="ant-tabs-tab-active ant-tabs-tab"
-                id="tab-Light"
-                role="tab"
-                tabindex="0"
-              >
-                Bamboo
-              </div>
-            </div>
-            <div
-              class="ant-tabs-ink-bar ant-tabs-ink-bar-animated"
+            <path
+              d="M176 511a56 56 0 10112 0 56 56 0 10-112 0zm280 0a56 56 0 10112 0 56 56 0 10-112 0zm280 0a56 56 0 10112 0 56 56 0 10-112 0z"
             />
-          </div>
-        </div>
-      </div>
+          </svg>
+        </span>
+      </button>
     </div>
   </div>
   <div
-    class="ant-tabs-content ant-tabs-content-animated ant-tabs-top-content"
-    style="margin-left:0%"
+    class="ant-tabs-content-holder"
   >
     <div
-      aria-hidden="false"
-      class="ant-tabs-tabpane ant-tabs-tabpane-active"
-      role="tabpanel"
-      style="visibility:visible"
-      tabindex="0"
-    />
+      class="ant-tabs-content ant-tabs-content-top"
+    >
+      <div
+        aria-hidden="true"
+        class="ant-tabs-tabpane"
+        role="tabpanel"
+        style="display:none"
+        tabindex="-1"
+      />
+    </div>
   </div>
 </div>
 `;
 
 exports[`ConfigProvider components Tabs normal 1`] = `
 <div
-  class="ant-tabs ant-tabs-top ant-tabs-line"
+  class="ant-tabs ant-tabs-top"
 >
   <div
-    class="ant-tabs-bar ant-tabs-top-bar"
+    class="ant-tabs-nav"
     role="tablist"
-    tabindex="-1"
   >
     <div
-      class="ant-tabs-nav-container"
+      class="ant-tabs-nav-wrap"
     >
-      <span
-        class="ant-tabs-tab-prev ant-tabs-tab-btn-disabled"
-        unselectable="unselectable"
+      <div
+        class="ant-tabs-nav-list"
+        style="transform:translate(0px, 0px)"
       >
-        <span
-          class="ant-tabs-tab-prev-icon"
+        <button
+          aria-selected="false"
+          class="ant-tabs-tab"
+          role="tab"
+          tabindex="0"
+          type="button"
         >
-          <span
-            aria-label="left"
-            class="anticon anticon-left ant-tabs-tab-prev-icon-target"
-            role="img"
-          >
-            <svg
-              aria-hidden="true"
-              class=""
-              data-icon="left"
-              fill="currentColor"
-              focusable="false"
-              height="1em"
-              viewBox="64 64 896 896"
-              width="1em"
-            >
-              <path
-                d="M724 218.3V141c0-6.7-7.7-10.4-12.9-6.3L260.3 486.8a31.86 31.86 0 000 50.3l450.8 352.1c5.3 4.1 12.9.4 12.9-6.3v-77.3c0-4.9-2.3-9.6-6.1-12.6l-360-281 360-281.1c3.8-3 6.1-7.7 6.1-12.6z"
-              />
-            </svg>
-          </span>
-        </span>
-      </span>
-      <span
-        class="ant-tabs-tab-next ant-tabs-tab-btn-disabled"
-        unselectable="unselectable"
+          Bamboo
+        </button>
+        <div
+          class="ant-tabs-ink-bar ant-tabs-ink-bar-animated"
+        />
+      </div>
+    </div>
+    <div
+      class="ant-tabs-nav-operations ant-tabs-nav-operations-hidden"
+    >
+      <button
+        aria-controls="null-more-popup"
+        aria-expanded="false"
+        aria-haspopup="listbox"
+        aria-hidden="true"
+        class="ant-tabs-nav-more"
+        id="null-more"
+        style="visibility:hidden;order:1"
+        tabindex="-1"
+        type="button"
       >
         <span
-          class="ant-tabs-tab-next-icon"
-        >
-          <span
-            aria-label="right"
-            class="anticon anticon-right ant-tabs-tab-next-icon-target"
-            role="img"
-          >
-            <svg
-              aria-hidden="true"
-              class=""
-              data-icon="right"
-              fill="currentColor"
-              focusable="false"
-              height="1em"
-              viewBox="64 64 896 896"
-              width="1em"
-            >
-              <path
-                d="M765.7 486.8L314.9 134.7A7.97 7.97 0 00302 141v77.3c0 4.9 2.3 9.6 6.1 12.6l360 281.1-360 281.1c-3.9 3-6.1 7.7-6.1 12.6V883c0 6.7 7.7 10.4 12.9 6.3l450.8-352.1a31.96 31.96 0 000-50.4z"
-              />
-            </svg>
-          </span>
-        </span>
-      </span>
-      <div
-        class="ant-tabs-nav-wrap"
-      >
-        <div
-          class="ant-tabs-nav-scroll"
+          aria-label="ellipsis"
+          class="anticon anticon-ellipsis"
+          role="img"
         >
-          <div
-            class="ant-tabs-nav ant-tabs-nav-animated"
+          <svg
+            aria-hidden="true"
+            class=""
+            data-icon="ellipsis"
+            fill="currentColor"
+            focusable="false"
+            height="1em"
+            viewBox="64 64 896 896"
+            width="1em"
           >
-            <div>
-              <div
-                aria-controls="tabpane-Light"
-                aria-disabled="false"
-                aria-selected="true"
-                class="ant-tabs-tab-active ant-tabs-tab"
-                id="tab-Light"
-                role="tab"
-                tabindex="0"
-              >
-                Bamboo
-              </div>
-            </div>
-            <div
-              class="ant-tabs-ink-bar ant-tabs-ink-bar-animated"
+            <path
+              d="M176 511a56 56 0 10112 0 56 56 0 10-112 0zm280 0a56 56 0 10112 0 56 56 0 10-112 0zm280 0a56 56 0 10112 0 56 56 0 10-112 0z"
             />
-          </div>
-        </div>
-      </div>
+          </svg>
+        </span>
+      </button>
     </div>
   </div>
   <div
-    class="ant-tabs-content ant-tabs-content-animated ant-tabs-top-content"
-    style="margin-left:0%"
+    class="ant-tabs-content-holder"
   >
     <div
-      aria-hidden="false"
-      class="ant-tabs-tabpane ant-tabs-tabpane-active"
-      role="tabpanel"
-      style="visibility:visible"
-      tabindex="0"
-    />
+      class="ant-tabs-content ant-tabs-content-top"
+    >
+      <div
+        aria-hidden="true"
+        class="ant-tabs-tabpane"
+        role="tabpanel"
+        style="display:none"
+        tabindex="-1"
+      />
+    </div>
   </div>
 </div>
 `;
 
 exports[`ConfigProvider components Tabs prefixCls 1`] = `
 <div
-  class="prefix-Tabs prefix-Tabs-top prefix-Tabs-line"
+  class="prefix-Tabs prefix-Tabs-top"
 >
   <div
-    class="prefix-Tabs-bar prefix-Tabs-top-bar"
+    class="prefix-Tabs-nav"
     role="tablist"
-    tabindex="-1"
   >
     <div
-      class="prefix-Tabs-nav-container"
+      class="prefix-Tabs-nav-wrap"
     >
-      <span
-        class="prefix-Tabs-tab-prev prefix-Tabs-tab-btn-disabled"
-        unselectable="unselectable"
+      <div
+        class="prefix-Tabs-nav-list"
+        style="transform:translate(0px, 0px)"
       >
-        <span
-          class="prefix-Tabs-tab-prev-icon"
+        <button
+          aria-selected="false"
+          class="prefix-Tabs-tab"
+          role="tab"
+          tabindex="0"
+          type="button"
         >
-          <span
-            aria-label="left"
-            class="anticon anticon-left prefix-Tabs-tab-prev-icon-target"
-            role="img"
-          >
-            <svg
-              aria-hidden="true"
-              class=""
-              data-icon="left"
-              fill="currentColor"
-              focusable="false"
-              height="1em"
-              viewBox="64 64 896 896"
-              width="1em"
-            >
-              <path
-                d="M724 218.3V141c0-6.7-7.7-10.4-12.9-6.3L260.3 486.8a31.86 31.86 0 000 50.3l450.8 352.1c5.3 4.1 12.9.4 12.9-6.3v-77.3c0-4.9-2.3-9.6-6.1-12.6l-360-281 360-281.1c3.8-3 6.1-7.7 6.1-12.6z"
-              />
-            </svg>
-          </span>
-        </span>
-      </span>
-      <span
-        class="prefix-Tabs-tab-next prefix-Tabs-tab-btn-disabled"
-        unselectable="unselectable"
+          Bamboo
+        </button>
+        <div
+          class="prefix-Tabs-ink-bar prefix-Tabs-ink-bar-animated"
+        />
+      </div>
+    </div>
+    <div
+      class="prefix-Tabs-nav-operations prefix-Tabs-nav-operations-hidden"
+    >
+      <button
+        aria-controls="null-more-popup"
+        aria-expanded="false"
+        aria-haspopup="listbox"
+        aria-hidden="true"
+        class="prefix-Tabs-nav-more"
+        id="null-more"
+        style="visibility:hidden;order:1"
+        tabindex="-1"
+        type="button"
       >
         <span
-          class="prefix-Tabs-tab-next-icon"
-        >
-          <span
-            aria-label="right"
-            class="anticon anticon-right prefix-Tabs-tab-next-icon-target"
-            role="img"
-          >
-            <svg
-              aria-hidden="true"
-              class=""
-              data-icon="right"
-              fill="currentColor"
-              focusable="false"
-              height="1em"
-              viewBox="64 64 896 896"
-              width="1em"
-            >
-              <path
-                d="M765.7 486.8L314.9 134.7A7.97 7.97 0 00302 141v77.3c0 4.9 2.3 9.6 6.1 12.6l360 281.1-360 281.1c-3.9 3-6.1 7.7-6.1 12.6V883c0 6.7 7.7 10.4 12.9 6.3l450.8-352.1a31.96 31.96 0 000-50.4z"
-              />
-            </svg>
-          </span>
-        </span>
-      </span>
-      <div
-        class="prefix-Tabs-nav-wrap"
-      >
-        <div
-          class="prefix-Tabs-nav-scroll"
+          aria-label="ellipsis"
+          class="anticon anticon-ellipsis"
+          role="img"
         >
-          <div
-            class="prefix-Tabs-nav prefix-Tabs-nav-animated"
+          <svg
+            aria-hidden="true"
+            class=""
+            data-icon="ellipsis"
+            fill="currentColor"
+            focusable="false"
+            height="1em"
+            viewBox="64 64 896 896"
+            width="1em"
           >
-            <div>
-              <div
-                aria-controls="tabpane-Light"
-                aria-disabled="false"
-                aria-selected="true"
-                class="prefix-Tabs-tab-active prefix-Tabs-tab"
-                id="tab-Light"
-                role="tab"
-                tabindex="0"
-              >
-                Bamboo
-              </div>
-            </div>
-            <div
-              class="prefix-Tabs-ink-bar prefix-Tabs-ink-bar-animated"
+            <path
+              d="M176 511a56 56 0 10112 0 56 56 0 10-112 0zm280 0a56 56 0 10112 0 56 56 0 10-112 0zm280 0a56 56 0 10112 0 56 56 0 10-112 0z"
             />
-          </div>
-        </div>
-      </div>
+          </svg>
+        </span>
+      </button>
     </div>
   </div>
   <div
-    class="prefix-Tabs-content prefix-Tabs-content-animated prefix-Tabs-top-content"
-    style="margin-left:0%"
+    class="prefix-Tabs-content-holder"
   >
     <div
-      aria-hidden="false"
-      class="prefix-Tabs-tabpane prefix-Tabs-tabpane-active"
-      role="tabpanel"
-      style="visibility:visible"
-      tabindex="0"
-    />
+      class="prefix-Tabs-content prefix-Tabs-content-top"
+    >
+      <div
+        aria-hidden="true"
+        class="prefix-Tabs-tabpane"
+        role="tabpanel"
+        style="display:none"
+        tabindex="-1"
+      />
+    </div>
   </div>
 </div>
 `;
diff --git a/components/page-header/__tests__/__snapshots__/demo.test.js.snap b/components/page-header/__tests__/__snapshots__/demo.test.js.snap
index a3593ff8cb59..26e68fc08db3 100644
--- a/components/page-header/__tests__/__snapshots__/demo.test.js.snap
+++ b/components/page-header/__tests__/__snapshots__/demo.test.js.snap
@@ -1175,133 +1175,99 @@ exports[`renders ./components/page-header/demo/responsive.md correctly 1`] = `
       class="ant-page-header-footer"
     >
       <div
-        class="ant-tabs ant-tabs-top ant-tabs-line"
+        class="ant-tabs ant-tabs-top"
       >
         <div
-          class="ant-tabs-bar ant-tabs-top-bar"
+          class="ant-tabs-nav"
           role="tablist"
-          tabindex="-1"
         >
           <div
-            class="ant-tabs-nav-container"
+            class="ant-tabs-nav-wrap"
           >
-            <span
-              class="ant-tabs-tab-prev ant-tabs-tab-btn-disabled"
-              unselectable="unselectable"
+            <div
+              class="ant-tabs-nav-list"
+              style="transform:translate(0px, 0px)"
             >
-              <span
-                class="ant-tabs-tab-prev-icon"
+              <button
+                aria-selected="true"
+                class="ant-tabs-tab ant-tabs-tab-active"
+                role="tab"
+                tabindex="0"
+                type="button"
               >
-                <span
-                  aria-label="left"
-                  class="anticon anticon-left ant-tabs-tab-prev-icon-target"
-                  role="img"
-                >
-                  <svg
-                    aria-hidden="true"
-                    class=""
-                    data-icon="left"
-                    fill="currentColor"
-                    focusable="false"
-                    height="1em"
-                    viewBox="64 64 896 896"
-                    width="1em"
-                  >
-                    <path
-                      d="M724 218.3V141c0-6.7-7.7-10.4-12.9-6.3L260.3 486.8a31.86 31.86 0 000 50.3l450.8 352.1c5.3 4.1 12.9.4 12.9-6.3v-77.3c0-4.9-2.3-9.6-6.1-12.6l-360-281 360-281.1c3.8-3 6.1-7.7 6.1-12.6z"
-                    />
-                  </svg>
-                </span>
-              </span>
-            </span>
-            <span
-              class="ant-tabs-tab-next ant-tabs-tab-btn-disabled"
-              unselectable="unselectable"
-            >
-              <span
-                class="ant-tabs-tab-next-icon"
+                Details
+              </button>
+              <button
+                aria-selected="false"
+                class="ant-tabs-tab"
+                role="tab"
+                tabindex="0"
+                type="button"
               >
-                <span
-                  aria-label="right"
-                  class="anticon anticon-right ant-tabs-tab-next-icon-target"
-                  role="img"
-                >
-                  <svg
-                    aria-hidden="true"
-                    class=""
-                    data-icon="right"
-                    fill="currentColor"
-                    focusable="false"
-                    height="1em"
-                    viewBox="64 64 896 896"
-                    width="1em"
-                  >
-                    <path
-                      d="M765.7 486.8L314.9 134.7A7.97 7.97 0 00302 141v77.3c0 4.9 2.3 9.6 6.1 12.6l360 281.1-360 281.1c-3.9 3-6.1 7.7-6.1 12.6V883c0 6.7 7.7 10.4 12.9 6.3l450.8-352.1a31.96 31.96 0 000-50.4z"
-                    />
-                  </svg>
-                </span>
-              </span>
-            </span>
-            <div
-              class="ant-tabs-nav-wrap"
-            >
+                Rule
+              </button>
               <div
-                class="ant-tabs-nav-scroll"
+                class="ant-tabs-ink-bar ant-tabs-ink-bar-animated"
+              />
+            </div>
+          </div>
+          <div
+            class="ant-tabs-nav-operations ant-tabs-nav-operations-hidden"
+          >
+            <button
+              aria-controls="null-more-popup"
+              aria-expanded="false"
+              aria-haspopup="listbox"
+              aria-hidden="true"
+              class="ant-tabs-nav-more"
+              id="null-more"
+              style="visibility:hidden;order:1"
+              tabindex="-1"
+              type="button"
+            >
+              <span
+                aria-label="ellipsis"
+                class="anticon anticon-ellipsis"
+                role="img"
               >
-                <div
-                  class="ant-tabs-nav ant-tabs-nav-animated"
+                <svg
+                  aria-hidden="true"
+                  class=""
+                  data-icon="ellipsis"
+                  fill="currentColor"
+                  focusable="false"
+                  height="1em"
+                  viewBox="64 64 896 896"
+                  width="1em"
                 >
-                  <div>
-                    <div
-                      aria-controls="tabpane-1"
-                      aria-disabled="false"
-                      aria-selected="true"
-                      class="ant-tabs-tab-active ant-tabs-tab"
-                      id="tab-1"
-                      role="tab"
-                      tabindex="0"
-                    >
-                      Details
-                    </div>
-                    <div
-                      aria-controls="tabpane-2"
-                      aria-disabled="false"
-                      aria-selected="false"
-                      class=" ant-tabs-tab"
-                      id="tab-2"
-                      role="tab"
-                      tabindex="-1"
-                    >
-                      Rule
-                    </div>
-                  </div>
-                  <div
-                    class="ant-tabs-ink-bar ant-tabs-ink-bar-animated"
+                  <path
+                    d="M176 511a56 56 0 10112 0 56 56 0 10-112 0zm280 0a56 56 0 10112 0 56 56 0 10-112 0zm280 0a56 56 0 10112 0 56 56 0 10-112 0z"
                   />
-                </div>
-              </div>
-            </div>
+                </svg>
+              </span>
+            </button>
           </div>
         </div>
         <div
-          class="ant-tabs-content ant-tabs-content-animated ant-tabs-top-content"
-          style="margin-left:0%"
+          class="ant-tabs-content-holder"
         >
           <div
-            aria-hidden="false"
-            class="ant-tabs-tabpane ant-tabs-tabpane-active"
-            role="tabpanel"
-            style="visibility:visible"
-            tabindex="0"
-          />
-          <div
-            aria-hidden="true"
-            class="ant-tabs-tabpane ant-tabs-tabpane-inactive"
-            role="tabpanel"
-            style="visibility:hidden"
-            tabindex="-1"
-          />
+            class="ant-tabs-content ant-tabs-content-top"
+          >
+            <div
+              aria-hidden="false"
+              class="ant-tabs-tabpane ant-tabs-tabpane-active"
+              role="tabpanel"
+              tabindex="0"
+            />
+            <div
+              aria-hidden="true"
+              class="ant-tabs-tabpane"
+              role="tabpanel"
+              style="display:none"
+              tabindex="-1"
+            />
+          </div>
         </div>
       </div>
     </div>
diff --git a/components/style/themes/default.less b/components/style/themes/default.less
index cb7e5dbd760b..5ddaac196938 100644
--- a/components/style/themes/default.less
+++ b/components/style/themes/default.less
@@ -684,6 +684,7 @@
 @tabs-card-horizontal-padding: (@tabs-card-height - floor(@font-size-base * @line-height-base)) / 2 -
   @border-width-base @padding-md;
 @tabs-card-horizontal-padding-sm: 6px @padding-md;
+@tabs-card-horizontal-padding-lg: 7px @padding-md 6px;
 @tabs-title-font-size: @font-size-base;
 @tabs-title-font-size-lg: @font-size-lg;
 @tabs-title-font-size-sm: @font-size-base;
diff --git a/components/tabs/TabBar.tsx b/components/tabs/TabBar.tsx
deleted file mode 100644
index 379b3ee8908b..000000000000
--- a/components/tabs/TabBar.tsx
+++ /dev/null
@@ -1,91 +0,0 @@
-import * as React from 'react';
-import ScrollableInkTabBar from 'rc-tabs/lib/ScrollableInkTabBar';
-import classNames from 'classnames';
-import UpOutlined from '@ant-design/icons/UpOutlined';
-import LeftOutlined from '@ant-design/icons/LeftOutlined';
-import DownOutlined from '@ant-design/icons/DownOutlined';
-import RightOutlined from '@ant-design/icons/RightOutlined';
-
-import { TabsProps } from './index';
-import { ConfigConsumerProps, ConfigConsumer } from '../config-provider';
-import { cloneElement } from '../_util/reactNode';
-
-export default class TabBar extends React.Component<TabsProps> {
-  static defaultProps = {
-    animated: true,
-    type: 'line' as TabsProps['type'],
-  };
-
-  renderTabBar = ({ direction }: ConfigConsumerProps) => {
-    const {
-      tabBarStyle,
-      animated,
-      renderTabBar,
-      tabBarExtraContent,
-      tabPosition,
-      prefixCls,
-      className,
-      size,
-      type,
-    } = this.props;
-    const inkBarAnimated = typeof animated === 'object' ? animated.inkBar : animated;
-
-    const isVertical = tabPosition === 'left' || tabPosition === 'right';
-    let prevIconComponent = isVertical ? UpOutlined : LeftOutlined;
-    let nextIconComponent = isVertical ? DownOutlined : RightOutlined;
-
-    if (direction === 'rtl' && !isVertical) {
-      prevIconComponent = RightOutlined;
-      nextIconComponent = LeftOutlined;
-    }
-    const prevIcon = (
-      <span className={`${prefixCls}-tab-prev-icon`}>
-        {React.createElement(prevIconComponent, {
-          className: `${prefixCls}-tab-prev-icon-target`,
-        })}
-      </span>
-    );
-    const nextIcon = (
-      <span className={`${prefixCls}-tab-next-icon`}>
-        {React.createElement(nextIconComponent, {
-          className: `${prefixCls}-tab-next-icon-target`,
-        })}
-      </span>
-    );
-
-    // Additional className for style usage
-    const cls: string = classNames(
-      `${prefixCls}-${tabPosition}-bar`,
-      {
-        [`${prefixCls}-${size}-bar`]: !!size,
-        [`${prefixCls}-card-bar`]: type && type.indexOf('card') >= 0,
-      },
-      className,
-    );
-
-    const renderProps = {
-      ...this.props,
-      children: null,
-      inkBarAnimated,
-      extraContent: tabBarExtraContent,
-      style: tabBarStyle,
-      prevIcon,
-      nextIcon,
-      className: cls,
-    };
-
-    let RenderTabBar: React.ReactElement<any>;
-
-    if (renderTabBar) {
-      RenderTabBar = renderTabBar(renderProps, ScrollableInkTabBar);
-    } else {
-      RenderTabBar = <ScrollableInkTabBar {...renderProps} />;
-    }
-
-    return cloneElement(RenderTabBar);
-  };
-
-  render() {
-    return <ConfigConsumer>{this.renderTabBar}</ConfigConsumer>;
-  }
-}
diff --git a/components/tabs/__tests__/__snapshots__/demo.test.js.snap b/components/tabs/__tests__/__snapshots__/demo.test.js.snap
index 13de1b07d5e8..503a9c728577 100644
--- a/components/tabs/__tests__/__snapshots__/demo.test.js.snap
+++ b/components/tabs/__tests__/__snapshots__/demo.test.js.snap
@@ -2,214 +2,310 @@
 
 exports[`renders ./components/tabs/demo/basic.md correctly 1`] = `
 <div
-  class="ant-tabs ant-tabs-top ant-tabs-line"
+  class="ant-tabs ant-tabs-top"
 >
   <div
-    class="ant-tabs-bar ant-tabs-top-bar"
+    class="ant-tabs-nav"
     role="tablist"
-    tabindex="-1"
   >
     <div
-      class="ant-tabs-nav-container"
+      class="ant-tabs-nav-wrap"
     >
-      <span
-        class="ant-tabs-tab-prev ant-tabs-tab-btn-disabled"
-        unselectable="unselectable"
+      <div
+        class="ant-tabs-nav-list"
+        style="transform:translate(0px, 0px)"
       >
-        <span
-          class="ant-tabs-tab-prev-icon"
+        <button
+          aria-selected="true"
+          class="ant-tabs-tab ant-tabs-tab-active"
+          role="tab"
+          tabindex="0"
+          type="button"
         >
-          <span
-            aria-label="left"
-            class="anticon anticon-left ant-tabs-tab-prev-icon-target"
-            role="img"
-          >
-            <svg
-              aria-hidden="true"
-              class=""
-              data-icon="left"
-              fill="currentColor"
-              focusable="false"
-              height="1em"
-              viewBox="64 64 896 896"
-              width="1em"
-            >
-              <path
-                d="M724 218.3V141c0-6.7-7.7-10.4-12.9-6.3L260.3 486.8a31.86 31.86 0 000 50.3l450.8 352.1c5.3 4.1 12.9.4 12.9-6.3v-77.3c0-4.9-2.3-9.6-6.1-12.6l-360-281 360-281.1c3.8-3 6.1-7.7 6.1-12.6z"
-              />
-            </svg>
-          </span>
-        </span>
-      </span>
-      <span
-        class="ant-tabs-tab-next ant-tabs-tab-btn-disabled"
-        unselectable="unselectable"
+          Tab 1
+        </button>
+        <button
+          aria-selected="false"
+          class="ant-tabs-tab"
+          role="tab"
+          tabindex="0"
+          type="button"
+        >
+          Tab 2
+        </button>
+        <button
+          aria-selected="false"
+          class="ant-tabs-tab"
+          role="tab"
+          tabindex="0"
+          type="button"
+        >
+          Tab 3
+        </button>
+        <div
+          class="ant-tabs-ink-bar ant-tabs-ink-bar-animated"
+        />
+      </div>
+    </div>
+    <div
+      class="ant-tabs-nav-operations ant-tabs-nav-operations-hidden"
+    >
+      <button
+        aria-controls="null-more-popup"
+        aria-expanded="false"
+        aria-haspopup="listbox"
+        aria-hidden="true"
+        class="ant-tabs-nav-more"
+        id="null-more"
+        style="visibility:hidden;order:1"
+        tabindex="-1"
+        type="button"
       >
         <span
-          class="ant-tabs-tab-next-icon"
+          aria-label="ellipsis"
+          class="anticon anticon-ellipsis"
+          role="img"
         >
-          <span
-            aria-label="right"
-            class="anticon anticon-right ant-tabs-tab-next-icon-target"
-            role="img"
+          <svg
+            aria-hidden="true"
+            class=""
+            data-icon="ellipsis"
+            fill="currentColor"
+            focusable="false"
+            height="1em"
+            viewBox="64 64 896 896"
+            width="1em"
           >
-            <svg
-              aria-hidden="true"
-              class=""
-              data-icon="right"
-              fill="currentColor"
-              focusable="false"
-              height="1em"
-              viewBox="64 64 896 896"
-              width="1em"
-            >
-              <path
-                d="M765.7 486.8L314.9 134.7A7.97 7.97 0 00302 141v77.3c0 4.9 2.3 9.6 6.1 12.6l360 281.1-360 281.1c-3.9 3-6.1 7.7-6.1 12.6V883c0 6.7 7.7 10.4 12.9 6.3l450.8-352.1a31.96 31.96 0 000-50.4z"
-              />
-            </svg>
-          </span>
+            <path
+              d="M176 511a56 56 0 10112 0 56 56 0 10-112 0zm280 0a56 56 0 10112 0 56 56 0 10-112 0zm280 0a56 56 0 10112 0 56 56 0 10-112 0z"
+            />
+          </svg>
         </span>
-      </span>
+      </button>
+    </div>
+  </div>
+  <div
+    class="ant-tabs-content-holder"
+  >
+    <div
+      class="ant-tabs-content ant-tabs-content-top"
+    >
       <div
-        class="ant-tabs-nav-wrap"
+        aria-hidden="false"
+        class="ant-tabs-tabpane ant-tabs-tabpane-active"
+        role="tabpanel"
+        tabindex="0"
+      >
+        Content of Tab Pane 1
+      </div>
+      <div
+        aria-hidden="true"
+        class="ant-tabs-tabpane"
+        role="tabpanel"
+        style="display:none"
+        tabindex="-1"
+      />
+      <div
+        aria-hidden="true"
+        class="ant-tabs-tabpane"
+        role="tabpanel"
+        style="display:none"
+        tabindex="-1"
+      />
+    </div>
+  </div>
+</div>
+`;
+
+exports[`renders ./components/tabs/demo/card.md correctly 1`] = `
+<div
+  class="ant-tabs ant-tabs-top ant-tabs-card"
+>
+  <div
+    class="ant-tabs-nav"
+    role="tablist"
+  >
+    <div
+      class="ant-tabs-nav-wrap"
+    >
+      <div
+        class="ant-tabs-nav-list"
+        style="transform:translate(0px, 0px)"
       >
+        <button
+          aria-selected="false"
+          class="ant-tabs-tab"
+          role="tab"
+          tabindex="0"
+          type="button"
+        >
+          Tab 1
+        </button>
+        <button
+          aria-selected="false"
+          class="ant-tabs-tab"
+          role="tab"
+          tabindex="0"
+          type="button"
+        >
+          Tab 2
+        </button>
+        <button
+          aria-selected="false"
+          class="ant-tabs-tab"
+          role="tab"
+          tabindex="0"
+          type="button"
+        >
+          Tab 3
+        </button>
         <div
-          class="ant-tabs-nav-scroll"
+          class="ant-tabs-ink-bar ant-tabs-ink-bar-animated"
+        />
+      </div>
+    </div>
+    <div
+      class="ant-tabs-nav-operations ant-tabs-nav-operations-hidden"
+    >
+      <button
+        aria-controls="null-more-popup"
+        aria-expanded="false"
+        aria-haspopup="listbox"
+        aria-hidden="true"
+        class="ant-tabs-nav-more"
+        id="null-more"
+        style="visibility:hidden;order:1"
+        tabindex="-1"
+        type="button"
+      >
+        <span
+          aria-label="ellipsis"
+          class="anticon anticon-ellipsis"
+          role="img"
         >
-          <div
-            class="ant-tabs-nav ant-tabs-nav-animated"
+          <svg
+            aria-hidden="true"
+            class=""
+            data-icon="ellipsis"
+            fill="currentColor"
+            focusable="false"
+            height="1em"
+            viewBox="64 64 896 896"
+            width="1em"
           >
-            <div>
-              <div
-                aria-controls="tabpane-1"
-                aria-disabled="false"
-                aria-selected="true"
-                class="ant-tabs-tab-active ant-tabs-tab"
-                id="tab-1"
-                role="tab"
-                tabindex="0"
-              >
-                Tab 1
-              </div>
-              <div
-                aria-controls="tabpane-2"
-                aria-disabled="false"
-                aria-selected="false"
-                class=" ant-tabs-tab"
-                id="tab-2"
-                role="tab"
-                tabindex="-1"
-              >
-                Tab 2
-              </div>
-              <div
-                aria-controls="tabpane-3"
-                aria-disabled="false"
-                aria-selected="false"
-                class=" ant-tabs-tab"
-                id="tab-3"
-                role="tab"
-                tabindex="-1"
-              >
-                Tab 3
-              </div>
-            </div>
-            <div
-              class="ant-tabs-ink-bar ant-tabs-ink-bar-animated"
+            <path
+              d="M176 511a56 56 0 10112 0 56 56 0 10-112 0zm280 0a56 56 0 10112 0 56 56 0 10-112 0zm280 0a56 56 0 10112 0 56 56 0 10-112 0z"
             />
-          </div>
-        </div>
-      </div>
+          </svg>
+        </span>
+      </button>
     </div>
   </div>
   <div
-    class="ant-tabs-content ant-tabs-content-animated ant-tabs-top-content"
-    style="margin-left:0%"
+    class="ant-tabs-content-holder"
   >
     <div
-      aria-hidden="false"
-      class="ant-tabs-tabpane ant-tabs-tabpane-active"
-      role="tabpanel"
-      style="visibility:visible"
-      tabindex="0"
+      class="ant-tabs-content ant-tabs-content-top"
     >
-      Content of Tab Pane 1
+      <div
+        aria-hidden="true"
+        class="ant-tabs-tabpane"
+        role="tabpanel"
+        style="display:none"
+        tabindex="-1"
+      />
+      <div
+        aria-hidden="true"
+        class="ant-tabs-tabpane"
+        role="tabpanel"
+        style="display:none"
+        tabindex="-1"
+      />
+      <div
+        aria-hidden="true"
+        class="ant-tabs-tabpane"
+        role="tabpanel"
+        style="display:none"
+        tabindex="-1"
+      />
     </div>
-    <div
-      aria-hidden="true"
-      class="ant-tabs-tabpane ant-tabs-tabpane-inactive"
-      role="tabpanel"
-      style="visibility:hidden"
-      tabindex="-1"
-    />
-    <div
-      aria-hidden="true"
-      class="ant-tabs-tabpane ant-tabs-tabpane-inactive"
-      role="tabpanel"
-      style="visibility:hidden"
-      tabindex="-1"
-    />
   </div>
 </div>
 `;
 
-exports[`renders ./components/tabs/demo/card.md correctly 1`] = `
+exports[`renders ./components/tabs/demo/card-top.md correctly 1`] = `
 <div
-  class="ant-tabs ant-tabs-top ant-tabs-card ant-tabs-no-animation"
+  class="card-container"
 >
   <div
-    class="ant-tabs-bar ant-tabs-top-bar ant-tabs-card-bar"
-    role="tablist"
-    tabindex="-1"
+    class="ant-tabs ant-tabs-top ant-tabs-card"
   >
     <div
-      class="ant-tabs-nav-container"
+      class="ant-tabs-nav"
+      role="tablist"
     >
-      <span
-        class="ant-tabs-tab-prev ant-tabs-tab-btn-disabled"
-        unselectable="unselectable"
+      <div
+        class="ant-tabs-nav-wrap"
       >
-        <span
-          class="ant-tabs-tab-prev-icon"
+        <div
+          class="ant-tabs-nav-list"
+          style="transform:translate(0px, 0px)"
         >
-          <span
-            aria-label="left"
-            class="anticon anticon-left ant-tabs-tab-prev-icon-target"
-            role="img"
+          <button
+            aria-selected="false"
+            class="ant-tabs-tab"
+            role="tab"
+            tabindex="0"
+            type="button"
           >
-            <svg
-              aria-hidden="true"
-              class=""
-              data-icon="left"
-              fill="currentColor"
-              focusable="false"
-              height="1em"
-              viewBox="64 64 896 896"
-              width="1em"
-            >
-              <path
-                d="M724 218.3V141c0-6.7-7.7-10.4-12.9-6.3L260.3 486.8a31.86 31.86 0 000 50.3l450.8 352.1c5.3 4.1 12.9.4 12.9-6.3v-77.3c0-4.9-2.3-9.6-6.1-12.6l-360-281 360-281.1c3.8-3 6.1-7.7 6.1-12.6z"
-              />
-            </svg>
-          </span>
-        </span>
-      </span>
-      <span
-        class="ant-tabs-tab-next ant-tabs-tab-btn-disabled"
-        unselectable="unselectable"
+            Tab Title 1
+          </button>
+          <button
+            aria-selected="false"
+            class="ant-tabs-tab"
+            role="tab"
+            tabindex="0"
+            type="button"
+          >
+            Tab Title 2
+          </button>
+          <button
+            aria-selected="false"
+            class="ant-tabs-tab"
+            role="tab"
+            tabindex="0"
+            type="button"
+          >
+            Tab Title 3
+          </button>
+          <div
+            class="ant-tabs-ink-bar ant-tabs-ink-bar-animated"
+          />
+        </div>
+      </div>
+      <div
+        class="ant-tabs-nav-operations ant-tabs-nav-operations-hidden"
       >
-        <span
-          class="ant-tabs-tab-next-icon"
+        <button
+          aria-controls="null-more-popup"
+          aria-expanded="false"
+          aria-haspopup="listbox"
+          aria-hidden="true"
+          class="ant-tabs-nav-more"
+          id="null-more"
+          style="visibility:hidden;order:1"
+          tabindex="-1"
+          type="button"
         >
           <span
-            aria-label="right"
-            class="anticon anticon-right ant-tabs-tab-next-icon-target"
+            aria-label="ellipsis"
+            class="anticon anticon-ellipsis"
             role="img"
           >
             <svg
               aria-hidden="true"
               class=""
-              data-icon="right"
+              data-icon="ellipsis"
               fill="currentColor"
               focusable="false"
               height="1em"
@@ -217,328 +313,348 @@ exports[`renders ./components/tabs/demo/card.md correctly 1`] = `
               width="1em"
             >
               <path
-                d="M765.7 486.8L314.9 134.7A7.97 7.97 0 00302 141v77.3c0 4.9 2.3 9.6 6.1 12.6l360 281.1-360 281.1c-3.9 3-6.1 7.7-6.1 12.6V883c0 6.7 7.7 10.4 12.9 6.3l450.8-352.1a31.96 31.96 0 000-50.4z"
+                d="M176 511a56 56 0 10112 0 56 56 0 10-112 0zm280 0a56 56 0 10112 0 56 56 0 10-112 0zm280 0a56 56 0 10112 0 56 56 0 10-112 0z"
               />
             </svg>
           </span>
-        </span>
-      </span>
-      <div
-        class="ant-tabs-nav-wrap"
-      >
-        <div
-          class="ant-tabs-nav-scroll"
-        >
-          <div
-            class="ant-tabs-nav ant-tabs-nav-animated"
-          >
-            <div>
-              <div
-                aria-controls="tabpane-1"
-                aria-disabled="false"
-                aria-selected="true"
-                class="ant-tabs-tab-active ant-tabs-tab"
-                id="tab-1"
-                role="tab"
-                tabindex="0"
-              >
-                Tab 1
-              </div>
-              <div
-                aria-controls="tabpane-2"
-                aria-disabled="false"
-                aria-selected="false"
-                class=" ant-tabs-tab"
-                id="tab-2"
-                role="tab"
-                tabindex="-1"
-              >
-                Tab 2
-              </div>
-              <div
-                aria-controls="tabpane-3"
-                aria-disabled="false"
-                aria-selected="false"
-                class=" ant-tabs-tab"
-                id="tab-3"
-                role="tab"
-                tabindex="-1"
-              >
-                Tab 3
-              </div>
-            </div>
-            <div
-              class="ant-tabs-ink-bar ant-tabs-ink-bar-animated"
-            />
-          </div>
-        </div>
+        </button>
       </div>
     </div>
-  </div>
-  <div
-    class="ant-tabs-content ant-tabs-content-no-animated ant-tabs-top-content ant-tabs-card-content"
-  >
     <div
-      aria-hidden="false"
-      class="ant-tabs-tabpane ant-tabs-tabpane-active"
-      role="tabpanel"
-      style="visibility:visible"
-      tabindex="0"
+      class="ant-tabs-content-holder"
     >
-      Content of Tab Pane 1
+      <div
+        class="ant-tabs-content ant-tabs-content-top"
+      >
+        <div
+          aria-hidden="true"
+          class="ant-tabs-tabpane"
+          role="tabpanel"
+          style="display:none"
+          tabindex="-1"
+        />
+        <div
+          aria-hidden="true"
+          class="ant-tabs-tabpane"
+          role="tabpanel"
+          style="display:none"
+          tabindex="-1"
+        />
+        <div
+          aria-hidden="true"
+          class="ant-tabs-tabpane"
+          role="tabpanel"
+          style="display:none"
+          tabindex="-1"
+        />
+      </div>
     </div>
-    <div
-      aria-hidden="true"
-      class="ant-tabs-tabpane ant-tabs-tabpane-inactive"
-      role="tabpanel"
-      style="visibility:hidden"
-      tabindex="-1"
-    />
-    <div
-      aria-hidden="true"
-      class="ant-tabs-tabpane ant-tabs-tabpane-inactive"
-      role="tabpanel"
-      style="visibility:hidden"
-      tabindex="-1"
-    />
   </div>
 </div>
 `;
 
-exports[`renders ./components/tabs/demo/card-top.md correctly 1`] = `
-<div
-  class="card-container"
->
+exports[`renders ./components/tabs/demo/custom-add-trigger.md correctly 1`] = `
+<div>
   <div
-    class="ant-tabs ant-tabs-top ant-tabs-card ant-tabs-no-animation"
+    style="margin-bottom:16px"
   >
-    <div
-      class="ant-tabs-bar ant-tabs-top-bar ant-tabs-card-bar"
+    <button
+      class="ant-btn"
+      type="button"
+    >
+      <span>
+        ADD
+      </span>
+    </button>
+  </div>
+  <div
+    class="ant-tabs ant-tabs-top ant-tabs-editable ant-tabs-card ant-tabs-editable-card"
+  >
+    <div
+      class="ant-tabs-nav"
       role="tablist"
-      tabindex="-1"
     >
       <div
-        class="ant-tabs-nav-container"
+        class="ant-tabs-nav-wrap"
       >
-        <span
-          class="ant-tabs-tab-prev ant-tabs-tab-btn-disabled"
-          unselectable="unselectable"
+        <div
+          class="ant-tabs-nav-list"
+          style="transform:translate(0px, 0px)"
         >
-          <span
-            class="ant-tabs-tab-prev-icon"
+          <button
+            aria-selected="true"
+            class="ant-tabs-tab ant-tabs-tab-with-remove ant-tabs-tab-active"
+            role="tab"
+            tabindex="0"
+            type="button"
           >
+            Tab 1
             <span
-              aria-label="left"
-              class="anticon anticon-left ant-tabs-tab-prev-icon-target"
-              role="img"
+              aria-label="remove"
+              class="ant-tabs-tab-remove"
+              role="button"
+              tabindex="0"
             >
-              <svg
-                aria-hidden="true"
-                class=""
-                data-icon="left"
-                fill="currentColor"
-                focusable="false"
-                height="1em"
-                viewBox="64 64 896 896"
-                width="1em"
+              <span
+                aria-label="close"
+                class="anticon anticon-close"
+                role="img"
               >
-                <path
-                  d="M724 218.3V141c0-6.7-7.7-10.4-12.9-6.3L260.3 486.8a31.86 31.86 0 000 50.3l450.8 352.1c5.3 4.1 12.9.4 12.9-6.3v-77.3c0-4.9-2.3-9.6-6.1-12.6l-360-281 360-281.1c3.8-3 6.1-7.7 6.1-12.6z"
-                />
-              </svg>
+                <svg
+                  aria-hidden="true"
+                  class=""
+                  data-icon="close"
+                  fill="currentColor"
+                  focusable="false"
+                  height="1em"
+                  viewBox="64 64 896 896"
+                  width="1em"
+                >
+                  <path
+                    d="M563.8 512l262.5-312.9c4.4-5.2.7-13.1-6.1-13.1h-79.8c-4.7 0-9.2 2.1-12.3 5.7L511.6 449.8 295.1 191.7c-3-3.6-7.5-5.7-12.3-5.7H203c-6.8 0-10.5 7.9-6.1 13.1L459.4 512 196.9 824.9A7.95 7.95 0 00203 838h79.8c4.7 0 9.2-2.1 12.3-5.7l216.5-258.1 216.5 258.1c3 3.6 7.5 5.7 12.3 5.7h79.8c6.8 0 10.5-7.9 6.1-13.1L563.8 512z"
+                  />
+                </svg>
+              </span>
             </span>
-          </span>
-        </span>
-        <span
-          class="ant-tabs-tab-next ant-tabs-tab-btn-disabled"
-          unselectable="unselectable"
-        >
-          <span
-            class="ant-tabs-tab-next-icon"
+          </button>
+          <button
+            aria-selected="false"
+            class="ant-tabs-tab ant-tabs-tab-with-remove"
+            role="tab"
+            tabindex="0"
+            type="button"
+          >
+            Tab 2
+            <span
+              aria-label="remove"
+              class="ant-tabs-tab-remove"
+              role="button"
+              tabindex="0"
+            >
+              <span
+                aria-label="close"
+                class="anticon anticon-close"
+                role="img"
+              >
+                <svg
+                  aria-hidden="true"
+                  class=""
+                  data-icon="close"
+                  fill="currentColor"
+                  focusable="false"
+                  height="1em"
+                  viewBox="64 64 896 896"
+                  width="1em"
+                >
+                  <path
+                    d="M563.8 512l262.5-312.9c4.4-5.2.7-13.1-6.1-13.1h-79.8c-4.7 0-9.2 2.1-12.3 5.7L511.6 449.8 295.1 191.7c-3-3.6-7.5-5.7-12.3-5.7H203c-6.8 0-10.5 7.9-6.1 13.1L459.4 512 196.9 824.9A7.95 7.95 0 00203 838h79.8c4.7 0 9.2-2.1 12.3-5.7l216.5-258.1 216.5 258.1c3 3.6 7.5 5.7 12.3 5.7h79.8c6.8 0 10.5-7.9 6.1-13.1L563.8 512z"
+                  />
+                </svg>
+              </span>
+            </span>
+          </button>
+          <button
+            aria-label="Add tab"
+            class="ant-tabs-nav-add"
+            type="button"
           >
             <span
-              aria-label="right"
-              class="anticon anticon-right ant-tabs-tab-next-icon-target"
+              aria-label="plus"
+              class="anticon anticon-plus"
               role="img"
             >
               <svg
                 aria-hidden="true"
                 class=""
-                data-icon="right"
+                data-icon="plus"
                 fill="currentColor"
                 focusable="false"
                 height="1em"
                 viewBox="64 64 896 896"
                 width="1em"
               >
+                <defs />
+                <path
+                  d="M482 152h60q8 0 8 8v704q0 8-8 8h-60q-8 0-8-8V160q0-8 8-8z"
+                />
                 <path
-                  d="M765.7 486.8L314.9 134.7A7.97 7.97 0 00302 141v77.3c0 4.9 2.3 9.6 6.1 12.6l360 281.1-360 281.1c-3.9 3-6.1 7.7-6.1 12.6V883c0 6.7 7.7 10.4 12.9 6.3l450.8-352.1a31.96 31.96 0 000-50.4z"
+                  d="M176 474h672q8 0 8 8v60q0 8-8 8H176q-8 0-8-8v-60q0-8 8-8z"
                 />
               </svg>
             </span>
+          </button>
+          <div
+            class="ant-tabs-ink-bar ant-tabs-ink-bar-animated"
+          />
+        </div>
+      </div>
+      <div
+        class="ant-tabs-nav-operations ant-tabs-nav-operations-hidden"
+      >
+        <button
+          aria-controls="null-more-popup"
+          aria-expanded="false"
+          aria-haspopup="listbox"
+          aria-hidden="true"
+          class="ant-tabs-nav-more"
+          id="null-more"
+          style="visibility:hidden;order:1"
+          tabindex="-1"
+          type="button"
+        >
+          <span
+            aria-label="ellipsis"
+            class="anticon anticon-ellipsis"
+            role="img"
+          >
+            <svg
+              aria-hidden="true"
+              class=""
+              data-icon="ellipsis"
+              fill="currentColor"
+              focusable="false"
+              height="1em"
+              viewBox="64 64 896 896"
+              width="1em"
+            >
+              <path
+                d="M176 511a56 56 0 10112 0 56 56 0 10-112 0zm280 0a56 56 0 10112 0 56 56 0 10-112 0zm280 0a56 56 0 10112 0 56 56 0 10-112 0z"
+              />
+            </svg>
           </span>
-        </span>
-        <div
-          class="ant-tabs-nav-wrap"
+        </button>
+        <button
+          aria-label="Add tab"
+          class="ant-tabs-nav-add"
+          type="button"
         >
-          <div
-            class="ant-tabs-nav-scroll"
+          <span
+            aria-label="plus"
+            class="anticon anticon-plus"
+            role="img"
           >
-            <div
-              class="ant-tabs-nav ant-tabs-nav-animated"
+            <svg
+              aria-hidden="true"
+              class=""
+              data-icon="plus"
+              fill="currentColor"
+              focusable="false"
+              height="1em"
+              viewBox="64 64 896 896"
+              width="1em"
             >
-              <div>
-                <div
-                  aria-controls="tabpane-1"
-                  aria-disabled="false"
-                  aria-selected="true"
-                  class="ant-tabs-tab-active ant-tabs-tab"
-                  id="tab-1"
-                  role="tab"
-                  tabindex="0"
-                >
-                  Tab Title 1
-                </div>
-                <div
-                  aria-controls="tabpane-2"
-                  aria-disabled="false"
-                  aria-selected="false"
-                  class=" ant-tabs-tab"
-                  id="tab-2"
-                  role="tab"
-                  tabindex="-1"
-                >
-                  Tab Title 2
-                </div>
-                <div
-                  aria-controls="tabpane-3"
-                  aria-disabled="false"
-                  aria-selected="false"
-                  class=" ant-tabs-tab"
-                  id="tab-3"
-                  role="tab"
-                  tabindex="-1"
-                >
-                  Tab Title 3
-                </div>
-              </div>
-              <div
-                class="ant-tabs-ink-bar ant-tabs-ink-bar-animated"
+              <defs />
+              <path
+                d="M482 152h60q8 0 8 8v704q0 8-8 8h-60q-8 0-8-8V160q0-8 8-8z"
               />
-            </div>
-          </div>
-        </div>
+              <path
+                d="M176 474h672q8 0 8 8v60q0 8-8 8H176q-8 0-8-8v-60q0-8 8-8z"
+              />
+            </svg>
+          </span>
+        </button>
       </div>
     </div>
     <div
-      class="ant-tabs-content ant-tabs-content-no-animated ant-tabs-top-content ant-tabs-card-content"
+      class="ant-tabs-content-holder"
     >
       <div
-        aria-hidden="false"
-        class="ant-tabs-tabpane ant-tabs-tabpane-active"
-        role="tabpanel"
-        style="visibility:visible"
-        tabindex="0"
+        class="ant-tabs-content ant-tabs-content-top"
       >
-        <p>
-          Content of Tab Pane 1
-        </p>
-        <p>
-          Content of Tab Pane 1
-        </p>
-        <p>
+        <div
+          aria-hidden="false"
+          class="ant-tabs-tabpane ant-tabs-tabpane-active"
+          role="tabpanel"
+          tabindex="0"
+        >
           Content of Tab Pane 1
-        </p>
+        </div>
+        <div
+          aria-hidden="true"
+          class="ant-tabs-tabpane"
+          role="tabpanel"
+          style="display:none"
+          tabindex="-1"
+        />
       </div>
-      <div
-        aria-hidden="true"
-        class="ant-tabs-tabpane ant-tabs-tabpane-inactive"
-        role="tabpanel"
-        style="visibility:hidden"
-        tabindex="-1"
-      />
-      <div
-        aria-hidden="true"
-        class="ant-tabs-tabpane ant-tabs-tabpane-inactive"
-        role="tabpanel"
-        style="visibility:hidden"
-        tabindex="-1"
-      />
     </div>
   </div>
 </div>
 `;
 
-exports[`renders ./components/tabs/demo/custom-add-trigger.md correctly 1`] = `
+exports[`renders ./components/tabs/demo/custom-tab-bar.md correctly 1`] = `
 <div>
   <div
-    style="margin-bottom:16px"
-  >
-    <button
-      class="ant-btn"
-      type="button"
-    >
-      <span>
-        ADD
-      </span>
-    </button>
-  </div>
-  <div
-    class="ant-tabs ant-tabs-top ant-tabs-card ant-tabs-editable-card ant-tabs-no-animation"
+    class="ant-tabs ant-tabs-top"
   >
-    <div
-      class="ant-tabs-bar ant-tabs-top-bar ant-tabs-card-bar"
-      role="tablist"
-      tabindex="-1"
-    >
+    <div>
+      <div />
       <div
-        class="ant-tabs-nav-container"
+        class="ant-tabs-nav site-custom-tab-bar"
+        role="tablist"
       >
-        <span
-          class="ant-tabs-tab-prev ant-tabs-tab-btn-disabled"
-          unselectable="unselectable"
+        <div
+          class="ant-tabs-nav-wrap"
         >
-          <span
-            class="ant-tabs-tab-prev-icon"
+          <div
+            class="ant-tabs-nav-list"
+            style="transform:translate(0px, 0px)"
           >
-            <span
-              aria-label="left"
-              class="anticon anticon-left ant-tabs-tab-prev-icon-target"
-              role="img"
+            <button
+              aria-selected="true"
+              class="ant-tabs-tab ant-tabs-tab-active"
+              role="tab"
+              tabindex="0"
+              type="button"
             >
-              <svg
-                aria-hidden="true"
-                class=""
-                data-icon="left"
-                fill="currentColor"
-                focusable="false"
-                height="1em"
-                viewBox="64 64 896 896"
-                width="1em"
-              >
-                <path
-                  d="M724 218.3V141c0-6.7-7.7-10.4-12.9-6.3L260.3 486.8a31.86 31.86 0 000 50.3l450.8 352.1c5.3 4.1 12.9.4 12.9-6.3v-77.3c0-4.9-2.3-9.6-6.1-12.6l-360-281 360-281.1c3.8-3 6.1-7.7 6.1-12.6z"
-                />
-              </svg>
-            </span>
-          </span>
-        </span>
-        <span
-          class="ant-tabs-tab-next ant-tabs-tab-btn-disabled"
-          unselectable="unselectable"
+              Tab 1
+            </button>
+            <button
+              aria-selected="false"
+              class="ant-tabs-tab"
+              role="tab"
+              tabindex="0"
+              type="button"
+            >
+              Tab 2
+            </button>
+            <button
+              aria-selected="false"
+              class="ant-tabs-tab"
+              role="tab"
+              tabindex="0"
+              type="button"
+            >
+              Tab 3
+            </button>
+            <div
+              class="ant-tabs-ink-bar ant-tabs-ink-bar-animated"
+            />
+          </div>
+        </div>
+        <div
+          class="ant-tabs-nav-operations ant-tabs-nav-operations-hidden"
         >
-          <span
-            class="ant-tabs-tab-next-icon"
+          <button
+            aria-controls="null-more-popup"
+            aria-expanded="false"
+            aria-haspopup="listbox"
+            aria-hidden="true"
+            class="ant-tabs-nav-more"
+            id="null-more"
+            style="visibility:hidden;order:1"
+            tabindex="-1"
+            type="button"
           >
             <span
-              aria-label="right"
-              class="anticon anticon-right ant-tabs-tab-next-icon-target"
+              aria-label="ellipsis"
+              class="anticon anticon-ellipsis"
               role="img"
             >
               <svg
                 aria-hidden="true"
                 class=""
-                data-icon="right"
+                data-icon="ellipsis"
                 fill="currentColor"
                 focusable="false"
                 height="1em"
@@ -546,274 +662,158 @@ exports[`renders ./components/tabs/demo/custom-add-trigger.md correctly 1`] = `
                 width="1em"
               >
                 <path
-                  d="M765.7 486.8L314.9 134.7A7.97 7.97 0 00302 141v77.3c0 4.9 2.3 9.6 6.1 12.6l360 281.1-360 281.1c-3.9 3-6.1 7.7-6.1 12.6V883c0 6.7 7.7 10.4 12.9 6.3l450.8-352.1a31.96 31.96 0 000-50.4z"
+                  d="M176 511a56 56 0 10112 0 56 56 0 10-112 0zm280 0a56 56 0 10112 0 56 56 0 10-112 0zm280 0a56 56 0 10112 0 56 56 0 10-112 0z"
                 />
               </svg>
             </span>
-          </span>
-        </span>
-        <div
-          class="ant-tabs-nav-wrap"
-        >
-          <div
-            class="ant-tabs-nav-scroll"
-          >
-            <div
-              class="ant-tabs-nav ant-tabs-nav-animated"
-            >
-              <div>
-                <div
-                  aria-controls="tabpane-1"
-                  aria-disabled="false"
-                  aria-selected="true"
-                  class="ant-tabs-tab-active ant-tabs-tab"
-                  id="tab-1"
-                  role="tab"
-                  tabindex="0"
-                >
-                  <div>
-                    Tab 1
-                    <span
-                      aria-label="close"
-                      class="anticon anticon-close ant-tabs-close-x"
-                      role="img"
-                      tabindex="-1"
-                    >
-                      <svg
-                        aria-hidden="true"
-                        class=""
-                        data-icon="close"
-                        fill="currentColor"
-                        focusable="false"
-                        height="1em"
-                        viewBox="64 64 896 896"
-                        width="1em"
-                      >
-                        <path
-                          d="M563.8 512l262.5-312.9c4.4-5.2.7-13.1-6.1-13.1h-79.8c-4.7 0-9.2 2.1-12.3 5.7L511.6 449.8 295.1 191.7c-3-3.6-7.5-5.7-12.3-5.7H203c-6.8 0-10.5 7.9-6.1 13.1L459.4 512 196.9 824.9A7.95 7.95 0 00203 838h79.8c4.7 0 9.2-2.1 12.3-5.7l216.5-258.1 216.5 258.1c3 3.6 7.5 5.7 12.3 5.7h79.8c6.8 0 10.5-7.9 6.1-13.1L563.8 512z"
-                        />
-                      </svg>
-                    </span>
-                  </div>
-                </div>
-                <div
-                  aria-controls="tabpane-2"
-                  aria-disabled="false"
-                  aria-selected="false"
-                  class=" ant-tabs-tab"
-                  id="tab-2"
-                  role="tab"
-                  tabindex="-1"
-                >
-                  <div>
-                    Tab 2
-                    <span
-                      aria-label="close"
-                      class="anticon anticon-close ant-tabs-close-x"
-                      role="img"
-                      tabindex="-1"
-                    >
-                      <svg
-                        aria-hidden="true"
-                        class=""
-                        data-icon="close"
-                        fill="currentColor"
-                        focusable="false"
-                        height="1em"
-                        viewBox="64 64 896 896"
-                        width="1em"
-                      >
-                        <path
-                          d="M563.8 512l262.5-312.9c4.4-5.2.7-13.1-6.1-13.1h-79.8c-4.7 0-9.2 2.1-12.3 5.7L511.6 449.8 295.1 191.7c-3-3.6-7.5-5.7-12.3-5.7H203c-6.8 0-10.5 7.9-6.1 13.1L459.4 512 196.9 824.9A7.95 7.95 0 00203 838h79.8c4.7 0 9.2-2.1 12.3-5.7l216.5-258.1 216.5 258.1c3 3.6 7.5 5.7 12.3 5.7h79.8c6.8 0 10.5-7.9 6.1-13.1L563.8 512z"
-                        />
-                      </svg>
-                    </span>
-                  </div>
-                </div>
-              </div>
-              <div
-                class="ant-tabs-ink-bar ant-tabs-ink-bar-animated"
-              />
-            </div>
-          </div>
+          </button>
         </div>
       </div>
     </div>
     <div
-      class="ant-tabs-content ant-tabs-content-no-animated ant-tabs-top-content ant-tabs-card-content"
+      class="ant-tabs-content-holder"
     >
       <div
-        aria-hidden="false"
-        class="ant-tabs-tabpane ant-tabs-tabpane-active"
-        role="tabpanel"
-        style="visibility:visible"
-        tabindex="0"
+        class="ant-tabs-content ant-tabs-content-top"
       >
-        Content of Tab Pane 1
-      </div>
-      <div
-        aria-hidden="true"
-        class="ant-tabs-tabpane ant-tabs-tabpane-inactive"
-        role="tabpanel"
-        style="visibility:hidden"
-        tabindex="-1"
-      />
-    </div>
-  </div>
-</div>
-`;
-
-exports[`renders ./components/tabs/demo/custom-tab-bar.md correctly 1`] = `
-<div>
+        <div
+          aria-hidden="false"
+          class="ant-tabs-tabpane ant-tabs-tabpane-active"
+          role="tabpanel"
+          style="height:200px"
+          tabindex="0"
+        >
+          Content of Tab Pane 1
+        </div>
+        <div
+          aria-hidden="true"
+          class="ant-tabs-tabpane"
+          role="tabpanel"
+          style="display:none"
+          tabindex="-1"
+        />
+        <div
+          aria-hidden="true"
+          class="ant-tabs-tabpane"
+          role="tabpanel"
+          style="display:none"
+          tabindex="-1"
+        />
+      </div>
+    </div>
+  </div>
+</div>
+`;
+
+exports[`renders ./components/tabs/demo/custom-tab-bar-node.md correctly 1`] = `
+<div
+  class="ant-tabs ant-tabs-top"
+>
   <div
-    class="ant-tabs ant-tabs-top ant-tabs-line"
+    class="ant-tabs-nav"
+    role="tablist"
   >
-    <div>
-      <div />
+    <div
+      class="ant-tabs-nav-wrap"
+    >
       <div
-        class="ant-tabs-bar site-custom-tab-bar"
-        role="tablist"
-        tabindex="-1"
+        class="ant-tabs-nav-list"
+        style="transform:translate(0px, 0px)"
       >
+        <button
+          aria-selected="false"
+          class="ant-tabs-tab"
+          role="tab"
+          tabindex="0"
+          type="button"
+        >
+          tab 1
+        </button>
+        <button
+          aria-selected="false"
+          class="ant-tabs-tab"
+          role="tab"
+          tabindex="0"
+          type="button"
+        >
+          tab 2
+        </button>
+        <button
+          aria-selected="false"
+          class="ant-tabs-tab"
+          role="tab"
+          tabindex="0"
+          type="button"
+        >
+          tab 3
+        </button>
         <div
-          class="ant-tabs-nav-container"
+          class="ant-tabs-ink-bar ant-tabs-ink-bar-animated"
+        />
+      </div>
+    </div>
+    <div
+      class="ant-tabs-nav-operations ant-tabs-nav-operations-hidden"
+    >
+      <button
+        aria-controls="null-more-popup"
+        aria-expanded="false"
+        aria-haspopup="listbox"
+        aria-hidden="true"
+        class="ant-tabs-nav-more"
+        id="null-more"
+        style="visibility:hidden;order:1"
+        tabindex="-1"
+        type="button"
+      >
+        <span
+          aria-label="ellipsis"
+          class="anticon anticon-ellipsis"
+          role="img"
         >
-          <span
-            class="ant-tabs-tab-prev ant-tabs-tab-btn-disabled"
-            unselectable="unselectable"
-          >
-            <span
-              class="ant-tabs-tab-prev-icon"
-            >
-              <span
-                aria-label="left"
-                class="anticon anticon-left ant-tabs-tab-prev-icon-target"
-                role="img"
-              >
-                <svg
-                  aria-hidden="true"
-                  class=""
-                  data-icon="left"
-                  fill="currentColor"
-                  focusable="false"
-                  height="1em"
-                  viewBox="64 64 896 896"
-                  width="1em"
-                >
-                  <path
-                    d="M724 218.3V141c0-6.7-7.7-10.4-12.9-6.3L260.3 486.8a31.86 31.86 0 000 50.3l450.8 352.1c5.3 4.1 12.9.4 12.9-6.3v-77.3c0-4.9-2.3-9.6-6.1-12.6l-360-281 360-281.1c3.8-3 6.1-7.7 6.1-12.6z"
-                  />
-                </svg>
-              </span>
-            </span>
-          </span>
-          <span
-            class="ant-tabs-tab-next ant-tabs-tab-btn-disabled"
-            unselectable="unselectable"
-          >
-            <span
-              class="ant-tabs-tab-next-icon"
-            >
-              <span
-                aria-label="right"
-                class="anticon anticon-right ant-tabs-tab-next-icon-target"
-                role="img"
-              >
-                <svg
-                  aria-hidden="true"
-                  class=""
-                  data-icon="right"
-                  fill="currentColor"
-                  focusable="false"
-                  height="1em"
-                  viewBox="64 64 896 896"
-                  width="1em"
-                >
-                  <path
-                    d="M765.7 486.8L314.9 134.7A7.97 7.97 0 00302 141v77.3c0 4.9 2.3 9.6 6.1 12.6l360 281.1-360 281.1c-3.9 3-6.1 7.7-6.1 12.6V883c0 6.7 7.7 10.4 12.9 6.3l450.8-352.1a31.96 31.96 0 000-50.4z"
-                  />
-                </svg>
-              </span>
-            </span>
-          </span>
-          <div
-            class="ant-tabs-nav-wrap"
+          <svg
+            aria-hidden="true"
+            class=""
+            data-icon="ellipsis"
+            fill="currentColor"
+            focusable="false"
+            height="1em"
+            viewBox="64 64 896 896"
+            width="1em"
           >
-            <div
-              class="ant-tabs-nav-scroll"
-            >
-              <div
-                class="ant-tabs-nav ant-tabs-nav-animated"
-              >
-                <div>
-                  <div
-                    aria-controls="tabpane-1"
-                    aria-disabled="false"
-                    aria-selected="true"
-                    class="ant-tabs-tab-active ant-tabs-tab"
-                    id="tab-1"
-                    role="tab"
-                    tabindex="0"
-                  >
-                    Tab 1
-                  </div>
-                  <div
-                    aria-controls="tabpane-2"
-                    aria-disabled="false"
-                    aria-selected="false"
-                    class=" ant-tabs-tab"
-                    id="tab-2"
-                    role="tab"
-                    tabindex="-1"
-                  >
-                    Tab 2
-                  </div>
-                  <div
-                    aria-controls="tabpane-3"
-                    aria-disabled="false"
-                    aria-selected="false"
-                    class=" ant-tabs-tab"
-                    id="tab-3"
-                    role="tab"
-                    tabindex="-1"
-                  >
-                    Tab 3
-                  </div>
-                </div>
-                <div
-                  class="ant-tabs-ink-bar ant-tabs-ink-bar-animated"
-                />
-              </div>
-            </div>
-          </div>
-        </div>
-      </div>
+            <path
+              d="M176 511a56 56 0 10112 0 56 56 0 10-112 0zm280 0a56 56 0 10112 0 56 56 0 10-112 0zm280 0a56 56 0 10112 0 56 56 0 10-112 0z"
+            />
+          </svg>
+        </span>
+      </button>
     </div>
+  </div>
+  <div
+    class="ant-tabs-content-holder"
+  >
     <div
-      class="ant-tabs-content ant-tabs-content-animated ant-tabs-top-content"
-      style="margin-left:0%"
+      class="ant-tabs-content ant-tabs-content-top"
     >
       <div
-        aria-hidden="false"
-        class="ant-tabs-tabpane ant-tabs-tabpane-active"
+        aria-hidden="true"
+        class="ant-tabs-tabpane"
         role="tabpanel"
-        style="height:200px;visibility:visible"
-        tabindex="0"
-      >
-        Content of Tab Pane 1
-      </div>
+        style="display:none"
+        tabindex="-1"
+      />
       <div
         aria-hidden="true"
-        class="ant-tabs-tabpane ant-tabs-tabpane-inactive"
+        class="ant-tabs-tabpane"
         role="tabpanel"
-        style="visibility:hidden"
+        style="display:none"
         tabindex="-1"
       />
       <div
         aria-hidden="true"
-        class="ant-tabs-tabpane ant-tabs-tabpane-inactive"
+        class="ant-tabs-tabpane"
         role="tabpanel"
-        style="visibility:hidden"
+        style="display:none"
         tabindex="-1"
       />
     </div>
@@ -821,908 +821,639 @@ exports[`renders ./components/tabs/demo/custom-tab-bar.md correctly 1`] = `
 </div>
 `;
 
-exports[`renders ./components/tabs/demo/custom-tab-bar-node.md correctly 1`] = `
+exports[`renders ./components/tabs/demo/disabled.md correctly 1`] = `
 <div
-  class="ant-tabs ant-tabs-top ant-tabs-line"
+  class="ant-tabs ant-tabs-top"
 >
   <div
-    class="ant-tabs-bar ant-tabs-top-bar"
+    class="ant-tabs-nav"
     role="tablist"
-    tabindex="-1"
   >
     <div
-      class="ant-tabs-nav-container"
+      class="ant-tabs-nav-wrap"
     >
-      <span
-        class="ant-tabs-tab-prev ant-tabs-tab-btn-disabled"
-        unselectable="unselectable"
+      <div
+        class="ant-tabs-nav-list"
+        style="transform:translate(0px, 0px)"
       >
-        <span
-          class="ant-tabs-tab-prev-icon"
+        <button
+          aria-selected="true"
+          class="ant-tabs-tab ant-tabs-tab-active"
+          role="tab"
+          tabindex="0"
+          type="button"
         >
-          <span
-            aria-label="left"
-            class="anticon anticon-left ant-tabs-tab-prev-icon-target"
-            role="img"
-          >
-            <svg
-              aria-hidden="true"
-              class=""
-              data-icon="left"
-              fill="currentColor"
-              focusable="false"
-              height="1em"
-              viewBox="64 64 896 896"
-              width="1em"
-            >
-              <path
-                d="M724 218.3V141c0-6.7-7.7-10.4-12.9-6.3L260.3 486.8a31.86 31.86 0 000 50.3l450.8 352.1c5.3 4.1 12.9.4 12.9-6.3v-77.3c0-4.9-2.3-9.6-6.1-12.6l-360-281 360-281.1c3.8-3 6.1-7.7 6.1-12.6z"
-              />
-            </svg>
-          </span>
-        </span>
-      </span>
-      <span
-        class="ant-tabs-tab-next ant-tabs-tab-btn-disabled"
-        unselectable="unselectable"
-      >
-        <span
-          class="ant-tabs-tab-next-icon"
+          Tab 1
+        </button>
+        <button
+          aria-selected="false"
+          class="ant-tabs-tab ant-tabs-tab-disabled"
+          disabled=""
+          role="tab"
+          tabindex="0"
+          type="button"
         >
-          <span
-            aria-label="right"
-            class="anticon anticon-right ant-tabs-tab-next-icon-target"
-            role="img"
-          >
-            <svg
-              aria-hidden="true"
-              class=""
-              data-icon="right"
-              fill="currentColor"
-              focusable="false"
-              height="1em"
-              viewBox="64 64 896 896"
-              width="1em"
-            >
-              <path
-                d="M765.7 486.8L314.9 134.7A7.97 7.97 0 00302 141v77.3c0 4.9 2.3 9.6 6.1 12.6l360 281.1-360 281.1c-3.9 3-6.1 7.7-6.1 12.6V883c0 6.7 7.7 10.4 12.9 6.3l450.8-352.1a31.96 31.96 0 000-50.4z"
-              />
-            </svg>
-          </span>
-        </span>
-      </span>
-      <div
-        class="ant-tabs-nav-wrap"
-      >
+          Tab 2
+        </button>
+        <button
+          aria-selected="false"
+          class="ant-tabs-tab"
+          role="tab"
+          tabindex="0"
+          type="button"
+        >
+          Tab 3
+        </button>
         <div
-          class="ant-tabs-nav-scroll"
+          class="ant-tabs-ink-bar ant-tabs-ink-bar-animated"
+        />
+      </div>
+    </div>
+    <div
+      class="ant-tabs-nav-operations ant-tabs-nav-operations-hidden"
+    >
+      <button
+        aria-controls="null-more-popup"
+        aria-expanded="false"
+        aria-haspopup="listbox"
+        aria-hidden="true"
+        class="ant-tabs-nav-more"
+        id="null-more"
+        style="visibility:hidden;order:1"
+        tabindex="-1"
+        type="button"
+      >
+        <span
+          aria-label="ellipsis"
+          class="anticon anticon-ellipsis"
+          role="img"
         >
-          <div
-            class="ant-tabs-nav ant-tabs-nav-animated"
+          <svg
+            aria-hidden="true"
+            class=""
+            data-icon="ellipsis"
+            fill="currentColor"
+            focusable="false"
+            height="1em"
+            viewBox="64 64 896 896"
+            width="1em"
           >
-            <div>
-              <div
-                aria-controls="tabpane-1"
-                aria-disabled="false"
-                aria-selected="true"
-                class="ant-tabs-tab-active ant-tabs-tab"
-                id="tab-1"
-                role="tab"
-                tabindex="0"
-              >
-                tab 1
-              </div>
-              <div
-                aria-controls="tabpane-2"
-                aria-disabled="false"
-                aria-selected="false"
-                class=" ant-tabs-tab"
-                id="tab-2"
-                role="tab"
-                tabindex="-1"
-              >
-                tab 2
-              </div>
-              <div
-                aria-controls="tabpane-3"
-                aria-disabled="false"
-                aria-selected="false"
-                class=" ant-tabs-tab"
-                id="tab-3"
-                role="tab"
-                tabindex="-1"
-              >
-                tab 3
-              </div>
-            </div>
-            <div
-              class="ant-tabs-ink-bar ant-tabs-ink-bar-animated"
+            <path
+              d="M176 511a56 56 0 10112 0 56 56 0 10-112 0zm280 0a56 56 0 10112 0 56 56 0 10-112 0zm280 0a56 56 0 10112 0 56 56 0 10-112 0z"
             />
-          </div>
-        </div>
-      </div>
+          </svg>
+        </span>
+      </button>
     </div>
   </div>
   <div
-    class="ant-tabs-content ant-tabs-content-animated ant-tabs-top-content"
-    style="margin-left:0%"
+    class="ant-tabs-content-holder"
   >
     <div
-      aria-hidden="false"
-      class="ant-tabs-tabpane ant-tabs-tabpane-active"
-      role="tabpanel"
-      style="visibility:visible"
-      tabindex="0"
+      class="ant-tabs-content ant-tabs-content-top"
     >
-      Content of Tab Pane 1
+      <div
+        aria-hidden="false"
+        class="ant-tabs-tabpane ant-tabs-tabpane-active"
+        role="tabpanel"
+        tabindex="0"
+      >
+        Tab 1
+      </div>
+      <div
+        aria-hidden="true"
+        class="ant-tabs-tabpane"
+        role="tabpanel"
+        style="display:none"
+        tabindex="-1"
+      />
+      <div
+        aria-hidden="true"
+        class="ant-tabs-tabpane"
+        role="tabpanel"
+        style="display:none"
+        tabindex="-1"
+      />
     </div>
-    <div
-      aria-hidden="true"
-      class="ant-tabs-tabpane ant-tabs-tabpane-inactive"
-      role="tabpanel"
-      style="visibility:hidden"
-      tabindex="-1"
-    />
-    <div
-      aria-hidden="true"
-      class="ant-tabs-tabpane ant-tabs-tabpane-inactive"
-      role="tabpanel"
-      style="visibility:hidden"
-      tabindex="-1"
-    />
   </div>
 </div>
 `;
 
-exports[`renders ./components/tabs/demo/disabled.md correctly 1`] = `
+exports[`renders ./components/tabs/demo/editable-card.md correctly 1`] = `
 <div
-  class="ant-tabs ant-tabs-top ant-tabs-line"
+  class="ant-tabs ant-tabs-top ant-tabs-editable ant-tabs-card ant-tabs-editable-card"
 >
   <div
-    class="ant-tabs-bar ant-tabs-top-bar"
+    class="ant-tabs-nav"
     role="tablist"
-    tabindex="-1"
   >
     <div
-      class="ant-tabs-nav-container"
+      class="ant-tabs-nav-wrap"
     >
-      <span
-        class="ant-tabs-tab-prev ant-tabs-tab-btn-disabled"
-        unselectable="unselectable"
+      <div
+        class="ant-tabs-nav-list"
+        style="transform:translate(0px, 0px)"
       >
-        <span
-          class="ant-tabs-tab-prev-icon"
+        <button
+          aria-selected="true"
+          class="ant-tabs-tab ant-tabs-tab-with-remove ant-tabs-tab-active"
+          role="tab"
+          tabindex="0"
+          type="button"
         >
+          Tab 1
           <span
-            aria-label="left"
-            class="anticon anticon-left ant-tabs-tab-prev-icon-target"
-            role="img"
+            aria-label="remove"
+            class="ant-tabs-tab-remove"
+            role="button"
+            tabindex="0"
           >
-            <svg
-              aria-hidden="true"
-              class=""
-              data-icon="left"
-              fill="currentColor"
-              focusable="false"
-              height="1em"
-              viewBox="64 64 896 896"
-              width="1em"
+            <span
+              aria-label="close"
+              class="anticon anticon-close"
+              role="img"
             >
-              <path
-                d="M724 218.3V141c0-6.7-7.7-10.4-12.9-6.3L260.3 486.8a31.86 31.86 0 000 50.3l450.8 352.1c5.3 4.1 12.9.4 12.9-6.3v-77.3c0-4.9-2.3-9.6-6.1-12.6l-360-281 360-281.1c3.8-3 6.1-7.7 6.1-12.6z"
-              />
-            </svg>
+              <svg
+                aria-hidden="true"
+                class=""
+                data-icon="close"
+                fill="currentColor"
+                focusable="false"
+                height="1em"
+                viewBox="64 64 896 896"
+                width="1em"
+              >
+                <path
+                  d="M563.8 512l262.5-312.9c4.4-5.2.7-13.1-6.1-13.1h-79.8c-4.7 0-9.2 2.1-12.3 5.7L511.6 449.8 295.1 191.7c-3-3.6-7.5-5.7-12.3-5.7H203c-6.8 0-10.5 7.9-6.1 13.1L459.4 512 196.9 824.9A7.95 7.95 0 00203 838h79.8c4.7 0 9.2-2.1 12.3-5.7l216.5-258.1 216.5 258.1c3 3.6 7.5 5.7 12.3 5.7h79.8c6.8 0 10.5-7.9 6.1-13.1L563.8 512z"
+                />
+              </svg>
+            </span>
           </span>
-        </span>
-      </span>
-      <span
-        class="ant-tabs-tab-next ant-tabs-tab-btn-disabled"
-        unselectable="unselectable"
-      >
-        <span
-          class="ant-tabs-tab-next-icon"
+        </button>
+        <button
+          aria-selected="false"
+          class="ant-tabs-tab ant-tabs-tab-with-remove"
+          role="tab"
+          tabindex="0"
+          type="button"
+        >
+          Tab 2
+          <span
+            aria-label="remove"
+            class="ant-tabs-tab-remove"
+            role="button"
+            tabindex="0"
+          >
+            <span
+              aria-label="close"
+              class="anticon anticon-close"
+              role="img"
+            >
+              <svg
+                aria-hidden="true"
+                class=""
+                data-icon="close"
+                fill="currentColor"
+                focusable="false"
+                height="1em"
+                viewBox="64 64 896 896"
+                width="1em"
+              >
+                <path
+                  d="M563.8 512l262.5-312.9c4.4-5.2.7-13.1-6.1-13.1h-79.8c-4.7 0-9.2 2.1-12.3 5.7L511.6 449.8 295.1 191.7c-3-3.6-7.5-5.7-12.3-5.7H203c-6.8 0-10.5 7.9-6.1 13.1L459.4 512 196.9 824.9A7.95 7.95 0 00203 838h79.8c4.7 0 9.2-2.1 12.3-5.7l216.5-258.1 216.5 258.1c3 3.6 7.5 5.7 12.3 5.7h79.8c6.8 0 10.5-7.9 6.1-13.1L563.8 512z"
+                />
+              </svg>
+            </span>
+          </span>
+        </button>
+        <button
+          aria-selected="false"
+          class="ant-tabs-tab"
+          role="tab"
+          tabindex="0"
+          type="button"
+        >
+          Tab 3
+        </button>
+        <button
+          aria-label="Add tab"
+          class="ant-tabs-nav-add"
+          type="button"
         >
           <span
-            aria-label="right"
-            class="anticon anticon-right ant-tabs-tab-next-icon-target"
+            aria-label="plus"
+            class="anticon anticon-plus"
             role="img"
           >
             <svg
               aria-hidden="true"
               class=""
-              data-icon="right"
+              data-icon="plus"
               fill="currentColor"
               focusable="false"
               height="1em"
               viewBox="64 64 896 896"
               width="1em"
             >
+              <defs />
+              <path
+                d="M482 152h60q8 0 8 8v704q0 8-8 8h-60q-8 0-8-8V160q0-8 8-8z"
+              />
               <path
-                d="M765.7 486.8L314.9 134.7A7.97 7.97 0 00302 141v77.3c0 4.9 2.3 9.6 6.1 12.6l360 281.1-360 281.1c-3.9 3-6.1 7.7-6.1 12.6V883c0 6.7 7.7 10.4 12.9 6.3l450.8-352.1a31.96 31.96 0 000-50.4z"
+                d="M176 474h672q8 0 8 8v60q0 8-8 8H176q-8 0-8-8v-60q0-8 8-8z"
               />
             </svg>
           </span>
+        </button>
+        <div
+          class="ant-tabs-ink-bar ant-tabs-ink-bar-animated"
+        />
+      </div>
+    </div>
+    <div
+      class="ant-tabs-nav-operations ant-tabs-nav-operations-hidden"
+    >
+      <button
+        aria-controls="null-more-popup"
+        aria-expanded="false"
+        aria-haspopup="listbox"
+        aria-hidden="true"
+        class="ant-tabs-nav-more"
+        id="null-more"
+        style="visibility:hidden;order:1"
+        tabindex="-1"
+        type="button"
+      >
+        <span
+          aria-label="ellipsis"
+          class="anticon anticon-ellipsis"
+          role="img"
+        >
+          <svg
+            aria-hidden="true"
+            class=""
+            data-icon="ellipsis"
+            fill="currentColor"
+            focusable="false"
+            height="1em"
+            viewBox="64 64 896 896"
+            width="1em"
+          >
+            <path
+              d="M176 511a56 56 0 10112 0 56 56 0 10-112 0zm280 0a56 56 0 10112 0 56 56 0 10-112 0zm280 0a56 56 0 10112 0 56 56 0 10-112 0z"
+            />
+          </svg>
         </span>
-      </span>
-      <div
-        class="ant-tabs-nav-wrap"
+      </button>
+      <button
+        aria-label="Add tab"
+        class="ant-tabs-nav-add"
+        type="button"
       >
-        <div
-          class="ant-tabs-nav-scroll"
+        <span
+          aria-label="plus"
+          class="anticon anticon-plus"
+          role="img"
         >
-          <div
-            class="ant-tabs-nav ant-tabs-nav-animated"
+          <svg
+            aria-hidden="true"
+            class=""
+            data-icon="plus"
+            fill="currentColor"
+            focusable="false"
+            height="1em"
+            viewBox="64 64 896 896"
+            width="1em"
           >
-            <div>
-              <div
-                aria-controls="tabpane-1"
-                aria-disabled="false"
-                aria-selected="true"
-                class="ant-tabs-tab-active ant-tabs-tab"
-                id="tab-1"
-                role="tab"
-                tabindex="0"
-              >
-                Tab 1
-              </div>
-              <div
-                aria-controls="tabpane-2"
-                aria-disabled="true"
-                aria-selected="false"
-                class=" ant-tabs-tab ant-tabs-tab-disabled"
-                id="tab-2"
-                role="tab"
-                tabindex="-1"
-              >
-                Tab 2
-              </div>
-              <div
-                aria-controls="tabpane-3"
-                aria-disabled="false"
-                aria-selected="false"
-                class=" ant-tabs-tab"
-                id="tab-3"
-                role="tab"
-                tabindex="-1"
-              >
-                Tab 3
-              </div>
-            </div>
-            <div
-              class="ant-tabs-ink-bar ant-tabs-ink-bar-animated"
+            <defs />
+            <path
+              d="M482 152h60q8 0 8 8v704q0 8-8 8h-60q-8 0-8-8V160q0-8 8-8z"
             />
-          </div>
-        </div>
-      </div>
+            <path
+              d="M176 474h672q8 0 8 8v60q0 8-8 8H176q-8 0-8-8v-60q0-8 8-8z"
+            />
+          </svg>
+        </span>
+      </button>
     </div>
   </div>
   <div
-    class="ant-tabs-content ant-tabs-content-animated ant-tabs-top-content"
-    style="margin-left:0%"
+    class="ant-tabs-content-holder"
   >
     <div
-      aria-hidden="false"
-      class="ant-tabs-tabpane ant-tabs-tabpane-active"
-      role="tabpanel"
-      style="visibility:visible"
-      tabindex="0"
+      class="ant-tabs-content ant-tabs-content-top"
     >
-      Tab 1
+      <div
+        aria-hidden="false"
+        class="ant-tabs-tabpane ant-tabs-tabpane-active"
+        role="tabpanel"
+        tabindex="0"
+      >
+        Content of Tab 1
+      </div>
+      <div
+        aria-hidden="true"
+        class="ant-tabs-tabpane"
+        role="tabpanel"
+        style="display:none"
+        tabindex="-1"
+      />
+      <div
+        aria-hidden="true"
+        class="ant-tabs-tabpane"
+        role="tabpanel"
+        style="display:none"
+        tabindex="-1"
+      />
     </div>
-    <div
-      aria-hidden="true"
-      class="ant-tabs-tabpane ant-tabs-tabpane-inactive"
-      role="tabpanel"
-      style="visibility:hidden"
-      tabindex="-1"
-    />
-    <div
-      aria-hidden="true"
-      class="ant-tabs-tabpane ant-tabs-tabpane-inactive"
-      role="tabpanel"
-      style="visibility:hidden"
-      tabindex="-1"
-    />
   </div>
 </div>
 `;
 
-exports[`renders ./components/tabs/demo/editable-card.md correctly 1`] = `
+exports[`renders ./components/tabs/demo/extra.md correctly 1`] = `
 <div
-  class="ant-tabs ant-tabs-top ant-tabs-card ant-tabs-editable-card ant-tabs-no-animation"
+  class="ant-tabs ant-tabs-top"
 >
   <div
-    class="ant-tabs-bar ant-tabs-top-bar ant-tabs-card-bar"
+    class="ant-tabs-nav"
     role="tablist"
-    tabindex="-1"
   >
     <div
-      class="ant-tabs-extra-content"
-      style="float:right"
+      class="ant-tabs-nav-wrap"
     >
-      <span>
+      <div
+        class="ant-tabs-nav-list"
+        style="transform:translate(0px, 0px)"
+      >
+        <button
+          aria-selected="false"
+          class="ant-tabs-tab"
+          role="tab"
+          tabindex="0"
+          type="button"
+        >
+          Tab 1
+        </button>
+        <button
+          aria-selected="false"
+          class="ant-tabs-tab"
+          role="tab"
+          tabindex="0"
+          type="button"
+        >
+          Tab 2
+        </button>
+        <button
+          aria-selected="false"
+          class="ant-tabs-tab"
+          role="tab"
+          tabindex="0"
+          type="button"
+        >
+          Tab 3
+        </button>
+        <div
+          class="ant-tabs-ink-bar ant-tabs-ink-bar-animated"
+        />
+      </div>
+    </div>
+    <div
+      class="ant-tabs-nav-operations ant-tabs-nav-operations-hidden"
+    >
+      <button
+        aria-controls="null-more-popup"
+        aria-expanded="false"
+        aria-haspopup="listbox"
+        aria-hidden="true"
+        class="ant-tabs-nav-more"
+        id="null-more"
+        style="visibility:hidden;order:1"
+        tabindex="-1"
+        type="button"
+      >
         <span
-          aria-label="plus"
-          class="anticon anticon-plus ant-tabs-new-tab"
+          aria-label="ellipsis"
+          class="anticon anticon-ellipsis"
           role="img"
-          tabindex="-1"
         >
           <svg
             aria-hidden="true"
             class=""
-            data-icon="plus"
+            data-icon="ellipsis"
             fill="currentColor"
             focusable="false"
             height="1em"
             viewBox="64 64 896 896"
             width="1em"
           >
-            <defs />
             <path
-              d="M482 152h60q8 0 8 8v704q0 8-8 8h-60q-8 0-8-8V160q0-8 8-8z"
-            />
-            <path
-              d="M176 474h672q8 0 8 8v60q0 8-8 8H176q-8 0-8-8v-60q0-8 8-8z"
+              d="M176 511a56 56 0 10112 0 56 56 0 10-112 0zm280 0a56 56 0 10112 0 56 56 0 10-112 0zm280 0a56 56 0 10112 0 56 56 0 10-112 0z"
             />
           </svg>
         </span>
-      </span>
+      </button>
     </div>
     <div
-      class="ant-tabs-nav-container"
+      class="ant-tabs-extra-content"
     >
-      <span
-        class="ant-tabs-tab-prev ant-tabs-tab-btn-disabled"
-        unselectable="unselectable"
+      <button
+        class="ant-btn"
+        type="button"
       >
-        <span
-          class="ant-tabs-tab-prev-icon"
-        >
-          <span
-            aria-label="left"
-            class="anticon anticon-left ant-tabs-tab-prev-icon-target"
-            role="img"
-          >
-            <svg
-              aria-hidden="true"
-              class=""
-              data-icon="left"
-              fill="currentColor"
-              focusable="false"
-              height="1em"
-              viewBox="64 64 896 896"
-              width="1em"
-            >
-              <path
-                d="M724 218.3V141c0-6.7-7.7-10.4-12.9-6.3L260.3 486.8a31.86 31.86 0 000 50.3l450.8 352.1c5.3 4.1 12.9.4 12.9-6.3v-77.3c0-4.9-2.3-9.6-6.1-12.6l-360-281 360-281.1c3.8-3 6.1-7.7 6.1-12.6z"
-              />
-            </svg>
-          </span>
+        <span>
+          Extra Action
         </span>
-      </span>
-      <span
-        class="ant-tabs-tab-next ant-tabs-tab-btn-disabled"
-        unselectable="unselectable"
+      </button>
+    </div>
+  </div>
+  <div
+    class="ant-tabs-content-holder"
+  >
+    <div
+      class="ant-tabs-content ant-tabs-content-top"
+    >
+      <div
+        aria-hidden="true"
+        class="ant-tabs-tabpane"
+        role="tabpanel"
+        style="display:none"
+        tabindex="-1"
+      />
+      <div
+        aria-hidden="true"
+        class="ant-tabs-tabpane"
+        role="tabpanel"
+        style="display:none"
+        tabindex="-1"
+      />
+      <div
+        aria-hidden="true"
+        class="ant-tabs-tabpane"
+        role="tabpanel"
+        style="display:none"
+        tabindex="-1"
+      />
+    </div>
+  </div>
+</div>
+`;
+
+exports[`renders ./components/tabs/demo/icon.md correctly 1`] = `
+<div
+  class="ant-tabs ant-tabs-top"
+>
+  <div
+    class="ant-tabs-nav"
+    role="tablist"
+  >
+    <div
+      class="ant-tabs-nav-wrap"
+    >
+      <div
+        class="ant-tabs-nav-list"
+        style="transform:translate(0px, 0px)"
       >
-        <span
-          class="ant-tabs-tab-next-icon"
+        <button
+          aria-selected="false"
+          class="ant-tabs-tab"
+          role="tab"
+          tabindex="0"
+          type="button"
         >
-          <span
-            aria-label="right"
-            class="anticon anticon-right ant-tabs-tab-next-icon-target"
-            role="img"
-          >
-            <svg
-              aria-hidden="true"
-              class=""
-              data-icon="right"
-              fill="currentColor"
-              focusable="false"
-              height="1em"
-              viewBox="64 64 896 896"
-              width="1em"
+          <span>
+            <span
+              aria-label="apple"
+              class="anticon anticon-apple"
+              role="img"
             >
-              <path
-                d="M765.7 486.8L314.9 134.7A7.97 7.97 0 00302 141v77.3c0 4.9 2.3 9.6 6.1 12.6l360 281.1-360 281.1c-3.9 3-6.1 7.7-6.1 12.6V883c0 6.7 7.7 10.4 12.9 6.3l450.8-352.1a31.96 31.96 0 000-50.4z"
-              />
-            </svg>
+              <svg
+                aria-hidden="true"
+                class=""
+                data-icon="apple"
+                fill="currentColor"
+                focusable="false"
+                height="1em"
+                viewBox="64 64 896 896"
+                width="1em"
+              >
+                <path
+                  d="M747.4 535.7c-.4-68.2 30.5-119.6 92.9-157.5-34.9-50-87.7-77.5-157.3-82.8-65.9-5.2-138 38.4-164.4 38.4-27.9 0-91.7-36.6-141.9-36.6C273.1 298.8 163 379.8 163 544.6c0 48.7 8.9 99 26.7 150.8 23.8 68.2 109.6 235.3 199.1 232.6 46.8-1.1 79.9-33.2 140.8-33.2 59.1 0 89.7 33.2 141.9 33.2 90.3-1.3 167.9-153.2 190.5-221.6-121.1-57.1-114.6-167.2-114.6-170.7zm-10.6 267c-14.3 19.9-28.7 35.6-41.9 45.7-10.5 8-18.6 11.4-24 11.6-9-.1-17.7-2.3-34.7-8.8-1.2-.5-2.5-1-4.2-1.6l-4.4-1.7c-17.4-6.7-27.8-10.3-41.1-13.8-18.6-4.8-37.1-7.4-56.9-7.4-20.2 0-39.2 2.5-58.1 7.2-13.9 3.5-25.6 7.4-42.7 13.8-.7.3-8.1 3.1-10.2 3.9-3.5 1.3-6.2 2.3-8.7 3.2-10.4 3.6-17 5.1-22.9 5.2-.7 0-1.3-.1-1.8-.2-1.1-.2-2.5-.6-4.1-1.3-4.5-1.8-9.9-5.1-16-9.8-14-10.9-29.4-28-45.1-49.9-27.5-38.6-53.5-89.8-66-125.7-15.4-44.8-23-87.7-23-128.6 0-60.2 17.8-106 48.4-137.1 26.3-26.6 61.7-41.5 97.8-42.3 5.9.1 14.5 1.5 25.4 4.5 8.6 2.3 18 5.4 30.7 9.9 3.8 1.4 16.9 6.1 18.5 6.7 7.7 2.8 13.5 4.8 19.2 6.6 18.2 5.8 32.3 9 47.6 9 15.5 0 28.8-3.3 47.7-9.8 7.1-2.4 32.9-12 37.5-13.6 25.6-9.1 44.5-14 60.8-15.2 4.8-.4 9.1-.4 13.2-.1 22.7 1.8 42.1 6.3 58.6 13.8-37.6 43.4-57 96.5-56.9 158.4-.3 14.7.9 31.7 5.1 51.8 6.4 30.5 18.6 60.7 37.9 89 14.7 21.5 32.9 40.9 54.7 57.8-11.5 23.7-25.6 48.2-40.4 68.8zm-94.5-572c50.7-60.2 46.1-115 44.6-134.7-44.8 2.6-96.6 30.5-126.1 64.8-32.5 36.8-51.6 82.3-47.5 133.6 48.4 3.7 92.6-21.2 129-63.7z"
+                />
+              </svg>
+            </span>
+            Tab 1
           </span>
-        </span>
-      </span>
-      <div
-        class="ant-tabs-nav-wrap"
-      >
-        <div
-          class="ant-tabs-nav-scroll"
+        </button>
+        <button
+          aria-selected="true"
+          class="ant-tabs-tab ant-tabs-tab-active"
+          role="tab"
+          tabindex="0"
+          type="button"
         >
-          <div
-            class="ant-tabs-nav ant-tabs-nav-animated"
-          >
-            <div>
-              <div
-                aria-controls="tabpane-1"
-                aria-disabled="false"
-                aria-selected="true"
-                class="ant-tabs-tab-active ant-tabs-tab"
-                id="tab-1"
-                role="tab"
-                tabindex="0"
-              >
-                <div>
-                  Tab 1
-                  <span
-                    aria-label="close-circle"
-                    class="anticon anticon-close-circle ant-tabs-close-x"
-                    role="img"
-                    tabindex="-1"
-                  >
-                    <svg
-                      aria-hidden="true"
-                      class=""
-                      data-icon="close-circle"
-                      fill="currentColor"
-                      focusable="false"
-                      height="1em"
-                      viewBox="64 64 896 896"
-                      width="1em"
-                    >
-                      <path
-                        d="M685.4 354.8c0-4.4-3.6-8-8-8l-66 .3L512 465.6l-99.3-118.4-66.1-.3c-4.4 0-8 3.5-8 8 0 1.9.7 3.7 1.9 5.2l130.1 155L340.5 670a8.32 8.32 0 00-1.9 5.2c0 4.4 3.6 8 8 8l66.1-.3L512 564.4l99.3 118.4 66 .3c4.4 0 8-3.5 8-8 0-1.9-.7-3.7-1.9-5.2L553.5 515l130.1-155c1.2-1.4 1.8-3.3 1.8-5.2z"
-                      />
-                      <path
-                        d="M512 65C264.6 65 64 265.6 64 513s200.6 448 448 448 448-200.6 448-448S759.4 65 512 65zm0 820c-205.4 0-372-166.6-372-372s166.6-372 372-372 372 166.6 372 372-166.6 372-372 372z"
-                      />
-                    </svg>
-                  </span>
-                </div>
-              </div>
-              <div
-                aria-controls="tabpane-2"
-                aria-disabled="false"
-                aria-selected="false"
-                class=" ant-tabs-tab"
-                id="tab-2"
-                role="tab"
-                tabindex="-1"
-              >
-                <div>
-                  Tab 2
-                  <span
-                    aria-label="close-circle"
-                    class="anticon anticon-close-circle ant-tabs-close-x"
-                    role="img"
-                    tabindex="-1"
-                  >
-                    <svg
-                      aria-hidden="true"
-                      class=""
-                      data-icon="close-circle"
-                      fill="currentColor"
-                      focusable="false"
-                      height="1em"
-                      viewBox="64 64 896 896"
-                      width="1em"
-                    >
-                      <path
-                        d="M685.4 354.8c0-4.4-3.6-8-8-8l-66 .3L512 465.6l-99.3-118.4-66.1-.3c-4.4 0-8 3.5-8 8 0 1.9.7 3.7 1.9 5.2l130.1 155L340.5 670a8.32 8.32 0 00-1.9 5.2c0 4.4 3.6 8 8 8l66.1-.3L512 564.4l99.3 118.4 66 .3c4.4 0 8-3.5 8-8 0-1.9-.7-3.7-1.9-5.2L553.5 515l130.1-155c1.2-1.4 1.8-3.3 1.8-5.2z"
-                      />
-                      <path
-                        d="M512 65C264.6 65 64 265.6 64 513s200.6 448 448 448 448-200.6 448-448S759.4 65 512 65zm0 820c-205.4 0-372-166.6-372-372s166.6-372 372-372 372 166.6 372 372-166.6 372-372 372z"
-                      />
-                    </svg>
-                  </span>
-                </div>
-              </div>
-              <div
-                aria-controls="tabpane-3"
-                aria-disabled="false"
-                aria-selected="false"
-                class=" ant-tabs-tab"
-                id="tab-3"
-                role="tab"
-                tabindex="-1"
+          <span>
+            <span
+              aria-label="android"
+              class="anticon anticon-android"
+              role="img"
+            >
+              <svg
+                aria-hidden="true"
+                class=""
+                data-icon="android"
+                fill="currentColor"
+                focusable="false"
+                height="1em"
+                viewBox="64 64 896 896"
+                width="1em"
               >
-                <div
-                  class="ant-tabs-tab-unclosable"
-                >
-                  Tab 3
-                </div>
-              </div>
-            </div>
-            <div
-              class="ant-tabs-ink-bar ant-tabs-ink-bar-animated"
-            />
-          </div>
-        </div>
+                <path
+                  d="M448.3 225.2c-18.6 0-32 13.4-32 31.9s13.5 31.9 32 31.9c18.6 0 32-13.4 32-31.9.1-18.4-13.4-31.9-32-31.9zm393.9 96.4c-13.8-13.8-32.7-21.5-53.2-21.5-3.9 0-7.4.4-10.7 1v-1h-3.6c-5.5-30.6-18.6-60.5-38.1-87.4-18.7-25.7-43-47.9-70.8-64.9l25.1-35.8v-3.3c0-.8.4-2.3.7-3.8.6-2.4 1.4-5.5 1.4-8.9 0-18.5-13.5-31.9-32-31.9-9.8 0-19.5 5.7-25.9 15.4l-29.3 42.1c-30-9.8-62.4-15-93.8-15-31.3 0-63.7 5.2-93.8 15L389 79.4c-6.6-9.6-16.1-15.4-26-15.4-18.6 0-32 13.4-32 31.9 0 6.2 2.5 12.8 6.7 17.4l22.6 32.3c-28.7 17-53.5 39.4-72.2 65.1-19.4 26.9-32 56.8-36.7 87.4h-5.5v1c-3.2-.6-6.7-1-10.7-1-20.3 0-39.2 7.5-53.1 21.3-13.8 13.8-21.5 32.6-21.5 53v235c0 20.3 7.5 39.1 21.4 52.9 13.8 13.8 32.8 21.5 53.2 21.5 3.9 0 7.4-.4 10.7-1v93.5c0 29.2 23.9 53.1 53.2 53.1H331v58.3c0 20.3 7.5 39.1 21.4 52.9 13.8 13.8 32.8 21.5 53.2 21.5 20.3 0 39.2-7.5 53.1-21.3 13.8-13.8 21.5-32.6 21.5-53v-58.2H544v58.1c0 20.3 7.5 39.1 21.4 52.9 13.8 13.8 32.8 21.5 53.2 21.5 20.4 0 39.2-7.5 53.1-21.6 13.8-13.8 21.5-32.6 21.5-53v-58.2h31.9c29.3 0 53.2-23.8 53.2-53.1v-91.4c3.2.6 6.7 1 10.7 1 20.3 0 39.2-7.5 53.1-21.3 13.8-13.8 21.5-32.6 21.5-53v-235c-.1-20.3-7.6-39-21.4-52.9zM246 609.6c0 6.8-3.9 10.6-10.7 10.6-6.8 0-10.7-3.8-10.7-10.6V374.5c0-6.8 3.9-10.6 10.7-10.6 6.8 0 10.7 3.8 10.7 10.6v235.1zm131.1-396.8c37.5-27.3 85.3-42.3 135-42.3s97.5 15.1 135 42.5c32.4 23.7 54.2 54.2 62.7 87.5H314.4c8.5-33.4 30.5-64 62.7-87.7zm39.3 674.7c-.6 5.6-4.4 8.7-10.5 8.7-6.8 0-10.7-3.8-10.7-10.6v-58.2h21.2v60.1zm202.3 8.7c-6.8 0-10.7-3.8-10.7-10.6v-58.2h21.2v60.1c-.6 5.6-4.3 8.7-10.5 8.7zm95.8-132.6H309.9V364h404.6v399.6zm85.2-154c0 6.8-3.9 10.6-10.7 10.6-6.8 0-10.7-3.8-10.7-10.6V374.5c0-6.8 3.9-10.6 10.7-10.6 6.8 0 10.7 3.8 10.7 10.6v235.1zM576.1 225.2c-18.6 0-32 13.4-32 31.9s13.5 31.9 32 31.9c18.6 0 32.1-13.4 32.1-32-.1-18.6-13.4-31.8-32.1-31.8z"
+                />
+              </svg>
+            </span>
+            Tab 2
+          </span>
+        </button>
+        <div
+          class="ant-tabs-ink-bar ant-tabs-ink-bar-animated"
+        />
       </div>
     </div>
-  </div>
-  <div
-    class="ant-tabs-content ant-tabs-content-no-animated ant-tabs-top-content ant-tabs-card-content"
-  >
-    <div
-      aria-hidden="false"
-      class="ant-tabs-tabpane ant-tabs-tabpane-active"
-      role="tabpanel"
-      style="visibility:visible"
-      tabindex="0"
-    >
-      Content of Tab 1
-    </div>
-    <div
-      aria-hidden="true"
-      class="ant-tabs-tabpane ant-tabs-tabpane-inactive"
-      role="tabpanel"
-      style="visibility:hidden"
-      tabindex="-1"
-    />
-    <div
-      aria-hidden="true"
-      class="ant-tabs-tabpane ant-tabs-tabpane-inactive"
-      role="tabpanel"
-      style="visibility:hidden"
-      tabindex="-1"
-    />
-  </div>
-</div>
-`;
-
-exports[`renders ./components/tabs/demo/extra.md correctly 1`] = `
-<div
-  class="ant-tabs ant-tabs-top ant-tabs-line"
->
-  <div
-    class="ant-tabs-bar ant-tabs-top-bar"
-    role="tablist"
-    tabindex="-1"
-  >
     <div
-      class="ant-tabs-extra-content"
-      style="float:right"
+      class="ant-tabs-nav-operations ant-tabs-nav-operations-hidden"
     >
       <button
-        class="ant-btn"
+        aria-controls="null-more-popup"
+        aria-expanded="false"
+        aria-haspopup="listbox"
+        aria-hidden="true"
+        class="ant-tabs-nav-more"
+        id="null-more"
+        style="visibility:hidden;order:1"
+        tabindex="-1"
         type="button"
-      >
-        <span>
-          Extra Action
-        </span>
-      </button>
-    </div>
-    <div
-      class="ant-tabs-nav-container"
-    >
-      <span
-        class="ant-tabs-tab-prev ant-tabs-tab-btn-disabled"
-        unselectable="unselectable"
-      >
-        <span
-          class="ant-tabs-tab-prev-icon"
-        >
-          <span
-            aria-label="left"
-            class="anticon anticon-left ant-tabs-tab-prev-icon-target"
-            role="img"
-          >
-            <svg
-              aria-hidden="true"
-              class=""
-              data-icon="left"
-              fill="currentColor"
-              focusable="false"
-              height="1em"
-              viewBox="64 64 896 896"
-              width="1em"
-            >
-              <path
-                d="M724 218.3V141c0-6.7-7.7-10.4-12.9-6.3L260.3 486.8a31.86 31.86 0 000 50.3l450.8 352.1c5.3 4.1 12.9.4 12.9-6.3v-77.3c0-4.9-2.3-9.6-6.1-12.6l-360-281 360-281.1c3.8-3 6.1-7.7 6.1-12.6z"
-              />
-            </svg>
-          </span>
-        </span>
-      </span>
-      <span
-        class="ant-tabs-tab-next ant-tabs-tab-btn-disabled"
-        unselectable="unselectable"
       >
         <span
-          class="ant-tabs-tab-next-icon"
-        >
-          <span
-            aria-label="right"
-            class="anticon anticon-right ant-tabs-tab-next-icon-target"
-            role="img"
-          >
-            <svg
-              aria-hidden="true"
-              class=""
-              data-icon="right"
-              fill="currentColor"
-              focusable="false"
-              height="1em"
-              viewBox="64 64 896 896"
-              width="1em"
-            >
-              <path
-                d="M765.7 486.8L314.9 134.7A7.97 7.97 0 00302 141v77.3c0 4.9 2.3 9.6 6.1 12.6l360 281.1-360 281.1c-3.9 3-6.1 7.7-6.1 12.6V883c0 6.7 7.7 10.4 12.9 6.3l450.8-352.1a31.96 31.96 0 000-50.4z"
-              />
-            </svg>
-          </span>
-        </span>
-      </span>
-      <div
-        class="ant-tabs-nav-wrap"
-      >
-        <div
-          class="ant-tabs-nav-scroll"
+          aria-label="ellipsis"
+          class="anticon anticon-ellipsis"
+          role="img"
         >
-          <div
-            class="ant-tabs-nav ant-tabs-nav-animated"
+          <svg
+            aria-hidden="true"
+            class=""
+            data-icon="ellipsis"
+            fill="currentColor"
+            focusable="false"
+            height="1em"
+            viewBox="64 64 896 896"
+            width="1em"
           >
-            <div>
-              <div
-                aria-controls="tabpane-1"
-                aria-disabled="false"
-                aria-selected="true"
-                class="ant-tabs-tab-active ant-tabs-tab"
-                id="tab-1"
-                role="tab"
-                tabindex="0"
-              >
-                Tab 1
-              </div>
-              <div
-                aria-controls="tabpane-2"
-                aria-disabled="false"
-                aria-selected="false"
-                class=" ant-tabs-tab"
-                id="tab-2"
-                role="tab"
-                tabindex="-1"
-              >
-                Tab 2
-              </div>
-              <div
-                aria-controls="tabpane-3"
-                aria-disabled="false"
-                aria-selected="false"
-                class=" ant-tabs-tab"
-                id="tab-3"
-                role="tab"
-                tabindex="-1"
-              >
-                Tab 3
-              </div>
-            </div>
-            <div
-              class="ant-tabs-ink-bar ant-tabs-ink-bar-animated"
+            <path
+              d="M176 511a56 56 0 10112 0 56 56 0 10-112 0zm280 0a56 56 0 10112 0 56 56 0 10-112 0zm280 0a56 56 0 10112 0 56 56 0 10-112 0z"
             />
-          </div>
-        </div>
-      </div>
+          </svg>
+        </span>
+      </button>
     </div>
   </div>
   <div
-    class="ant-tabs-content ant-tabs-content-animated ant-tabs-top-content"
-    style="margin-left:0%"
+    class="ant-tabs-content-holder"
   >
     <div
-      aria-hidden="false"
-      class="ant-tabs-tabpane ant-tabs-tabpane-active"
-      role="tabpanel"
-      style="visibility:visible"
-      tabindex="0"
+      class="ant-tabs-content ant-tabs-content-top"
     >
-      Content of tab 1
+      <div
+        aria-hidden="true"
+        class="ant-tabs-tabpane"
+        role="tabpanel"
+        style="display:none"
+        tabindex="-1"
+      />
+      <div
+        aria-hidden="false"
+        class="ant-tabs-tabpane ant-tabs-tabpane-active"
+        role="tabpanel"
+        tabindex="0"
+      >
+        Tab 2
+      </div>
     </div>
-    <div
-      aria-hidden="true"
-      class="ant-tabs-tabpane ant-tabs-tabpane-inactive"
-      role="tabpanel"
-      style="visibility:hidden"
-      tabindex="-1"
-    />
-    <div
-      aria-hidden="true"
-      class="ant-tabs-tabpane ant-tabs-tabpane-inactive"
-      role="tabpanel"
-      style="visibility:hidden"
-      tabindex="-1"
-    />
   </div>
 </div>
 `;
 
-exports[`renders ./components/tabs/demo/icon.md correctly 1`] = `
-<div
-  class="ant-tabs ant-tabs-top ant-tabs-line"
->
+exports[`renders ./components/tabs/demo/nest.md correctly 1`] = `
+<div>
   <div
-    class="ant-tabs-bar ant-tabs-top-bar"
-    role="tablist"
-    tabindex="-1"
+    class="ant-select ant-select-single ant-select-show-arrow"
+    style="width:200px"
   >
     <div
-      class="ant-tabs-nav-container"
+      class="ant-select-selector"
     >
       <span
-        class="ant-tabs-tab-prev ant-tabs-tab-btn-disabled"
-        unselectable="unselectable"
-      >
-        <span
-          class="ant-tabs-tab-prev-icon"
-        >
-          <span
-            aria-label="left"
-            class="anticon anticon-left ant-tabs-tab-prev-icon-target"
-            role="img"
-          >
-            <svg
-              aria-hidden="true"
-              class=""
-              data-icon="left"
-              fill="currentColor"
-              focusable="false"
-              height="1em"
-              viewBox="64 64 896 896"
-              width="1em"
-            >
-              <path
-                d="M724 218.3V141c0-6.7-7.7-10.4-12.9-6.3L260.3 486.8a31.86 31.86 0 000 50.3l450.8 352.1c5.3 4.1 12.9.4 12.9-6.3v-77.3c0-4.9-2.3-9.6-6.1-12.6l-360-281 360-281.1c3.8-3 6.1-7.7 6.1-12.6z"
-              />
-            </svg>
-          </span>
-        </span>
-      </span>
-      <span
-        class="ant-tabs-tab-next ant-tabs-tab-btn-disabled"
-        unselectable="unselectable"
-      >
-        <span
-          class="ant-tabs-tab-next-icon"
-        >
-          <span
-            aria-label="right"
-            class="anticon anticon-right ant-tabs-tab-next-icon-target"
-            role="img"
-          >
-            <svg
-              aria-hidden="true"
-              class=""
-              data-icon="right"
-              fill="currentColor"
-              focusable="false"
-              height="1em"
-              viewBox="64 64 896 896"
-              width="1em"
-            >
-              <path
-                d="M765.7 486.8L314.9 134.7A7.97 7.97 0 00302 141v77.3c0 4.9 2.3 9.6 6.1 12.6l360 281.1-360 281.1c-3.9 3-6.1 7.7-6.1 12.6V883c0 6.7 7.7 10.4 12.9 6.3l450.8-352.1a31.96 31.96 0 000-50.4z"
-              />
-            </svg>
-          </span>
-        </span>
-      </span>
-      <div
-        class="ant-tabs-nav-wrap"
-      >
-        <div
-          class="ant-tabs-nav-scroll"
-        >
-          <div
-            class="ant-tabs-nav ant-tabs-nav-animated"
-          >
-            <div>
-              <div
-                aria-controls="tabpane-1"
-                aria-disabled="false"
-                aria-selected="false"
-                class=" ant-tabs-tab"
-                id="tab-1"
-                role="tab"
-                tabindex="-1"
-              >
-                <span>
-                  <span
-                    aria-label="apple"
-                    class="anticon anticon-apple"
-                    role="img"
-                  >
-                    <svg
-                      aria-hidden="true"
-                      class=""
-                      data-icon="apple"
-                      fill="currentColor"
-                      focusable="false"
-                      height="1em"
-                      viewBox="64 64 896 896"
-                      width="1em"
-                    >
-                      <path
-                        d="M747.4 535.7c-.4-68.2 30.5-119.6 92.9-157.5-34.9-50-87.7-77.5-157.3-82.8-65.9-5.2-138 38.4-164.4 38.4-27.9 0-91.7-36.6-141.9-36.6C273.1 298.8 163 379.8 163 544.6c0 48.7 8.9 99 26.7 150.8 23.8 68.2 109.6 235.3 199.1 232.6 46.8-1.1 79.9-33.2 140.8-33.2 59.1 0 89.7 33.2 141.9 33.2 90.3-1.3 167.9-153.2 190.5-221.6-121.1-57.1-114.6-167.2-114.6-170.7zm-10.6 267c-14.3 19.9-28.7 35.6-41.9 45.7-10.5 8-18.6 11.4-24 11.6-9-.1-17.7-2.3-34.7-8.8-1.2-.5-2.5-1-4.2-1.6l-4.4-1.7c-17.4-6.7-27.8-10.3-41.1-13.8-18.6-4.8-37.1-7.4-56.9-7.4-20.2 0-39.2 2.5-58.1 7.2-13.9 3.5-25.6 7.4-42.7 13.8-.7.3-8.1 3.1-10.2 3.9-3.5 1.3-6.2 2.3-8.7 3.2-10.4 3.6-17 5.1-22.9 5.2-.7 0-1.3-.1-1.8-.2-1.1-.2-2.5-.6-4.1-1.3-4.5-1.8-9.9-5.1-16-9.8-14-10.9-29.4-28-45.1-49.9-27.5-38.6-53.5-89.8-66-125.7-15.4-44.8-23-87.7-23-128.6 0-60.2 17.8-106 48.4-137.1 26.3-26.6 61.7-41.5 97.8-42.3 5.9.1 14.5 1.5 25.4 4.5 8.6 2.3 18 5.4 30.7 9.9 3.8 1.4 16.9 6.1 18.5 6.7 7.7 2.8 13.5 4.8 19.2 6.6 18.2 5.8 32.3 9 47.6 9 15.5 0 28.8-3.3 47.7-9.8 7.1-2.4 32.9-12 37.5-13.6 25.6-9.1 44.5-14 60.8-15.2 4.8-.4 9.1-.4 13.2-.1 22.7 1.8 42.1 6.3 58.6 13.8-37.6 43.4-57 96.5-56.9 158.4-.3 14.7.9 31.7 5.1 51.8 6.4 30.5 18.6 60.7 37.9 89 14.7 21.5 32.9 40.9 54.7 57.8-11.5 23.7-25.6 48.2-40.4 68.8zm-94.5-572c50.7-60.2 46.1-115 44.6-134.7-44.8 2.6-96.6 30.5-126.1 64.8-32.5 36.8-51.6 82.3-47.5 133.6 48.4 3.7 92.6-21.2 129-63.7z"
-                      />
-                    </svg>
-                  </span>
-                  Tab 1
-                </span>
-              </div>
-              <div
-                aria-controls="tabpane-2"
-                aria-disabled="false"
-                aria-selected="true"
-                class="ant-tabs-tab-active ant-tabs-tab"
-                id="tab-2"
-                role="tab"
-                tabindex="0"
-              >
-                <span>
-                  <span
-                    aria-label="android"
-                    class="anticon anticon-android"
-                    role="img"
-                  >
-                    <svg
-                      aria-hidden="true"
-                      class=""
-                      data-icon="android"
-                      fill="currentColor"
-                      focusable="false"
-                      height="1em"
-                      viewBox="64 64 896 896"
-                      width="1em"
-                    >
-                      <path
-                        d="M448.3 225.2c-18.6 0-32 13.4-32 31.9s13.5 31.9 32 31.9c18.6 0 32-13.4 32-31.9.1-18.4-13.4-31.9-32-31.9zm393.9 96.4c-13.8-13.8-32.7-21.5-53.2-21.5-3.9 0-7.4.4-10.7 1v-1h-3.6c-5.5-30.6-18.6-60.5-38.1-87.4-18.7-25.7-43-47.9-70.8-64.9l25.1-35.8v-3.3c0-.8.4-2.3.7-3.8.6-2.4 1.4-5.5 1.4-8.9 0-18.5-13.5-31.9-32-31.9-9.8 0-19.5 5.7-25.9 15.4l-29.3 42.1c-30-9.8-62.4-15-93.8-15-31.3 0-63.7 5.2-93.8 15L389 79.4c-6.6-9.6-16.1-15.4-26-15.4-18.6 0-32 13.4-32 31.9 0 6.2 2.5 12.8 6.7 17.4l22.6 32.3c-28.7 17-53.5 39.4-72.2 65.1-19.4 26.9-32 56.8-36.7 87.4h-5.5v1c-3.2-.6-6.7-1-10.7-1-20.3 0-39.2 7.5-53.1 21.3-13.8 13.8-21.5 32.6-21.5 53v235c0 20.3 7.5 39.1 21.4 52.9 13.8 13.8 32.8 21.5 53.2 21.5 3.9 0 7.4-.4 10.7-1v93.5c0 29.2 23.9 53.1 53.2 53.1H331v58.3c0 20.3 7.5 39.1 21.4 52.9 13.8 13.8 32.8 21.5 53.2 21.5 20.3 0 39.2-7.5 53.1-21.3 13.8-13.8 21.5-32.6 21.5-53v-58.2H544v58.1c0 20.3 7.5 39.1 21.4 52.9 13.8 13.8 32.8 21.5 53.2 21.5 20.4 0 39.2-7.5 53.1-21.6 13.8-13.8 21.5-32.6 21.5-53v-58.2h31.9c29.3 0 53.2-23.8 53.2-53.1v-91.4c3.2.6 6.7 1 10.7 1 20.3 0 39.2-7.5 53.1-21.3 13.8-13.8 21.5-32.6 21.5-53v-235c-.1-20.3-7.6-39-21.4-52.9zM246 609.6c0 6.8-3.9 10.6-10.7 10.6-6.8 0-10.7-3.8-10.7-10.6V374.5c0-6.8 3.9-10.6 10.7-10.6 6.8 0 10.7 3.8 10.7 10.6v235.1zm131.1-396.8c37.5-27.3 85.3-42.3 135-42.3s97.5 15.1 135 42.5c32.4 23.7 54.2 54.2 62.7 87.5H314.4c8.5-33.4 30.5-64 62.7-87.7zm39.3 674.7c-.6 5.6-4.4 8.7-10.5 8.7-6.8 0-10.7-3.8-10.7-10.6v-58.2h21.2v60.1zm202.3 8.7c-6.8 0-10.7-3.8-10.7-10.6v-58.2h21.2v60.1c-.6 5.6-4.3 8.7-10.5 8.7zm95.8-132.6H309.9V364h404.6v399.6zm85.2-154c0 6.8-3.9 10.6-10.7 10.6-6.8 0-10.7-3.8-10.7-10.6V374.5c0-6.8 3.9-10.6 10.7-10.6 6.8 0 10.7 3.8 10.7 10.6v235.1zM576.1 225.2c-18.6 0-32 13.4-32 31.9s13.5 31.9 32 31.9c18.6 0 32.1-13.4 32.1-32-.1-18.6-13.4-31.8-32.1-31.8z"
-                      />
-                    </svg>
-                  </span>
-                  Tab 2
-                </span>
-              </div>
-            </div>
-            <div
-              class="ant-tabs-ink-bar ant-tabs-ink-bar-animated"
-            />
-          </div>
-        </div>
-      </div>
-    </div>
-  </div>
-  <div
-    class="ant-tabs-content ant-tabs-content-animated ant-tabs-top-content"
-    style="margin-left:-100%"
-  >
-    <div
-      aria-hidden="true"
-      class="ant-tabs-tabpane ant-tabs-tabpane-inactive"
-      role="tabpanel"
-      style="visibility:hidden"
-      tabindex="-1"
-    />
-    <div
-      aria-hidden="false"
-      class="ant-tabs-tabpane ant-tabs-tabpane-active"
-      role="tabpanel"
-      style="visibility:visible"
-      tabindex="0"
-    >
-      Tab 2
-    </div>
-  </div>
-</div>
-`;
-
-exports[`renders ./components/tabs/demo/nest.md correctly 1`] = `
-<div>
-  <div
-    class="ant-select ant-select-single ant-select-show-arrow"
-    style="width:200px"
-  >
-    <div
-      class="ant-select-selector"
-    >
-      <span
-        class="ant-select-selection-search"
+        class="ant-select-selection-search"
       >
         <input
           aria-activedescendant="undefined_list_0"
@@ -1943,591 +1674,487 @@ exports[`renders ./components/tabs/demo/nest.md correctly 1`] = `
     </span>
   </div>
   <div
-    class="ant-tabs ant-tabs-top ant-tabs-line"
+    class="ant-tabs ant-tabs-top"
   >
     <div
-      class="ant-tabs-bar ant-tabs-top-bar"
+      class="ant-tabs-nav"
       role="tablist"
-      tabindex="-1"
     >
       <div
-        class="ant-tabs-nav-container"
+        class="ant-tabs-nav-wrap"
       >
-        <span
-          class="ant-tabs-tab-prev ant-tabs-tab-btn-disabled"
-          unselectable="unselectable"
+        <div
+          class="ant-tabs-nav-list"
+          style="transform:translate(0px, 0px)"
         >
-          <span
-            class="ant-tabs-tab-prev-icon"
+          <button
+            aria-selected="true"
+            class="ant-tabs-tab ant-tabs-tab-active"
+            role="tab"
+            tabindex="0"
+            type="button"
           >
-            <span
-              aria-label="left"
-              class="anticon anticon-left ant-tabs-tab-prev-icon-target"
-              role="img"
-            >
-              <svg
-                aria-hidden="true"
-                class=""
-                data-icon="left"
-                fill="currentColor"
-                focusable="false"
-                height="1em"
-                viewBox="64 64 896 896"
-                width="1em"
-              >
-                <path
-                  d="M724 218.3V141c0-6.7-7.7-10.4-12.9-6.3L260.3 486.8a31.86 31.86 0 000 50.3l450.8 352.1c5.3 4.1 12.9.4 12.9-6.3v-77.3c0-4.9-2.3-9.6-6.1-12.6l-360-281 360-281.1c3.8-3 6.1-7.7 6.1-12.6z"
-                />
-              </svg>
-            </span>
-          </span>
-        </span>
-        <span
-          class="ant-tabs-tab-next ant-tabs-tab-btn-disabled"
-          unselectable="unselectable"
-        >
-          <span
-            class="ant-tabs-tab-next-icon"
+            Tab 1
+          </button>
+          <button
+            aria-selected="false"
+            class="ant-tabs-tab"
+            role="tab"
+            tabindex="0"
+            type="button"
           >
-            <span
-              aria-label="right"
-              class="anticon anticon-right ant-tabs-tab-next-icon-target"
-              role="img"
-            >
-              <svg
-                aria-hidden="true"
-                class=""
-                data-icon="right"
-                fill="currentColor"
-                focusable="false"
-                height="1em"
-                viewBox="64 64 896 896"
-                width="1em"
-              >
-                <path
-                  d="M765.7 486.8L314.9 134.7A7.97 7.97 0 00302 141v77.3c0 4.9 2.3 9.6 6.1 12.6l360 281.1-360 281.1c-3.9 3-6.1 7.7-6.1 12.6V883c0 6.7 7.7 10.4 12.9 6.3l450.8-352.1a31.96 31.96 0 000-50.4z"
-                />
-              </svg>
-            </span>
-          </span>
-        </span>
-        <div
-          class="ant-tabs-nav-wrap"
-        >
+            Tab 2
+          </button>
           <div
-            class="ant-tabs-nav-scroll"
+            class="ant-tabs-ink-bar ant-tabs-ink-bar-animated"
+          />
+        </div>
+      </div>
+      <div
+        class="ant-tabs-nav-operations ant-tabs-nav-operations-hidden"
+      >
+        <button
+          aria-controls="null-more-popup"
+          aria-expanded="false"
+          aria-haspopup="listbox"
+          aria-hidden="true"
+          class="ant-tabs-nav-more"
+          id="null-more"
+          style="visibility:hidden;order:1"
+          tabindex="-1"
+          type="button"
+        >
+          <span
+            aria-label="ellipsis"
+            class="anticon anticon-ellipsis"
+            role="img"
           >
-            <div
-              class="ant-tabs-nav ant-tabs-nav-animated"
+            <svg
+              aria-hidden="true"
+              class=""
+              data-icon="ellipsis"
+              fill="currentColor"
+              focusable="false"
+              height="1em"
+              viewBox="64 64 896 896"
+              width="1em"
             >
-              <div>
-                <div
-                  aria-controls="tabpane-1"
-                  aria-disabled="false"
-                  aria-selected="true"
-                  class="ant-tabs-tab-active ant-tabs-tab"
-                  id="tab-1"
-                  role="tab"
-                  tabindex="0"
-                >
-                  Tab 1
-                </div>
-                <div
-                  aria-controls="tabpane-2"
-                  aria-disabled="false"
-                  aria-selected="false"
-                  class=" ant-tabs-tab"
-                  id="tab-2"
-                  role="tab"
-                  tabindex="-1"
-                >
-                  Tab 2
-                </div>
-              </div>
-              <div
-                class="ant-tabs-ink-bar ant-tabs-ink-bar-animated"
+              <path
+                d="M176 511a56 56 0 10112 0 56 56 0 10-112 0zm280 0a56 56 0 10112 0 56 56 0 10-112 0zm280 0a56 56 0 10112 0 56 56 0 10-112 0z"
               />
-            </div>
-          </div>
-        </div>
+            </svg>
+          </span>
+        </button>
       </div>
     </div>
     <div
-      class="ant-tabs-content ant-tabs-content-animated ant-tabs-top-content"
-      style="margin-left:0%"
+      class="ant-tabs-content-holder"
     >
       <div
-        aria-hidden="false"
-        class="ant-tabs-tabpane ant-tabs-tabpane-active"
-        role="tabpanel"
-        style="visibility:visible"
-        tabindex="0"
+        class="ant-tabs-content ant-tabs-content-top"
       >
         <div
-          class="ant-tabs ant-tabs-top ant-tabs-line"
-          style="height:300px"
+          aria-hidden="false"
+          class="ant-tabs-tabpane ant-tabs-tabpane-active"
+          role="tabpanel"
+          tabindex="0"
         >
           <div
-            class="ant-tabs-bar ant-tabs-top-bar"
-            role="tablist"
-            tabindex="-1"
+            class="ant-tabs ant-tabs-top"
+            style="height:300px"
           >
             <div
-              class="ant-tabs-nav-container"
+              class="ant-tabs-nav"
+              role="tablist"
             >
-              <span
-                class="ant-tabs-tab-prev ant-tabs-tab-btn-disabled"
-                unselectable="unselectable"
-              >
-                <span
-                  class="ant-tabs-tab-prev-icon"
-                >
-                  <span
-                    aria-label="left"
-                    class="anticon anticon-left ant-tabs-tab-prev-icon-target"
-                    role="img"
-                  >
-                    <svg
-                      aria-hidden="true"
-                      class=""
-                      data-icon="left"
-                      fill="currentColor"
-                      focusable="false"
-                      height="1em"
-                      viewBox="64 64 896 896"
-                      width="1em"
-                    >
-                      <path
-                        d="M724 218.3V141c0-6.7-7.7-10.4-12.9-6.3L260.3 486.8a31.86 31.86 0 000 50.3l450.8 352.1c5.3 4.1 12.9.4 12.9-6.3v-77.3c0-4.9-2.3-9.6-6.1-12.6l-360-281 360-281.1c3.8-3 6.1-7.7 6.1-12.6z"
-                      />
-                    </svg>
-                  </span>
-                </span>
-              </span>
-              <span
-                class="ant-tabs-tab-next ant-tabs-tab-btn-disabled"
-                unselectable="unselectable"
-              >
-                <span
-                  class="ant-tabs-tab-next-icon"
-                >
-                  <span
-                    aria-label="right"
-                    class="anticon anticon-right ant-tabs-tab-next-icon-target"
-                    role="img"
-                  >
-                    <svg
-                      aria-hidden="true"
-                      class=""
-                      data-icon="right"
-                      fill="currentColor"
-                      focusable="false"
-                      height="1em"
-                      viewBox="64 64 896 896"
-                      width="1em"
-                    >
-                      <path
-                        d="M765.7 486.8L314.9 134.7A7.97 7.97 0 00302 141v77.3c0 4.9 2.3 9.6 6.1 12.6l360 281.1-360 281.1c-3.9 3-6.1 7.7-6.1 12.6V883c0 6.7 7.7 10.4 12.9 6.3l450.8-352.1a31.96 31.96 0 000-50.4z"
-                      />
-                    </svg>
-                  </span>
-                </span>
-              </span>
               <div
                 class="ant-tabs-nav-wrap"
               >
                 <div
-                  class="ant-tabs-nav-scroll"
+                  class="ant-tabs-nav-list"
+                  style="transform:translate(0px, 0px)"
                 >
-                  <div
-                    class="ant-tabs-nav ant-tabs-nav-animated"
+                  <button
+                    aria-selected="false"
+                    class="ant-tabs-tab"
+                    role="tab"
+                    tabindex="0"
+                    type="button"
                   >
-                    <div>
-                      <div
-                        aria-controls="tabpane-0"
-                        aria-disabled="false"
-                        aria-selected="false"
-                        class=" ant-tabs-tab"
-                        id="tab-0"
-                        role="tab"
-                        tabindex="-1"
-                      >
-                        Tab 0
-                      </div>
-                      <div
-                        aria-controls="tabpane-1"
-                        aria-disabled="false"
-                        aria-selected="true"
-                        class="ant-tabs-tab-active ant-tabs-tab"
-                        id="tab-1"
-                        role="tab"
-                        tabindex="0"
-                      >
-                        Tab 1
-                      </div>
-                      <div
-                        aria-controls="tabpane-2"
-                        aria-disabled="false"
-                        aria-selected="false"
-                        class=" ant-tabs-tab"
-                        id="tab-2"
-                        role="tab"
-                        tabindex="-1"
-                      >
-                        Tab 2
-                      </div>
-                      <div
-                        aria-controls="tabpane-3"
-                        aria-disabled="false"
-                        aria-selected="false"
-                        class=" ant-tabs-tab"
-                        id="tab-3"
-                        role="tab"
-                        tabindex="-1"
-                      >
-                        Tab 3
-                      </div>
-                      <div
-                        aria-controls="tabpane-4"
-                        aria-disabled="false"
-                        aria-selected="false"
-                        class=" ant-tabs-tab"
-                        id="tab-4"
-                        role="tab"
-                        tabindex="-1"
-                      >
-                        Tab 4
-                      </div>
-                      <div
-                        aria-controls="tabpane-5"
-                        aria-disabled="false"
-                        aria-selected="false"
-                        class=" ant-tabs-tab"
-                        id="tab-5"
-                        role="tab"
-                        tabindex="-1"
-                      >
-                        Tab 5
-                      </div>
-                      <div
-                        aria-controls="tabpane-6"
-                        aria-disabled="false"
-                        aria-selected="false"
-                        class=" ant-tabs-tab"
-                        id="tab-6"
-                        role="tab"
-                        tabindex="-1"
-                      >
-                        Tab 6
-                      </div>
-                      <div
-                        aria-controls="tabpane-7"
-                        aria-disabled="false"
-                        aria-selected="false"
-                        class=" ant-tabs-tab"
-                        id="tab-7"
-                        role="tab"
-                        tabindex="-1"
-                      >
-                        Tab 7
-                      </div>
-                      <div
-                        aria-controls="tabpane-8"
-                        aria-disabled="false"
-                        aria-selected="false"
-                        class=" ant-tabs-tab"
-                        id="tab-8"
-                        role="tab"
-                        tabindex="-1"
-                      >
-                        Tab 8
-                      </div>
-                      <div
-                        aria-controls="tabpane-9"
-                        aria-disabled="false"
-                        aria-selected="false"
-                        class=" ant-tabs-tab"
-                        id="tab-9"
-                        role="tab"
-                        tabindex="-1"
-                      >
-                        Tab 9
-                      </div>
-                      <div
-                        aria-controls="tabpane-10"
-                        aria-disabled="false"
-                        aria-selected="false"
-                        class=" ant-tabs-tab"
-                        id="tab-10"
-                        role="tab"
-                        tabindex="-1"
-                      >
-                        Tab 10
-                      </div>
-                      <div
-                        aria-controls="tabpane-11"
-                        aria-disabled="false"
-                        aria-selected="false"
-                        class=" ant-tabs-tab"
-                        id="tab-11"
-                        role="tab"
-                        tabindex="-1"
-                      >
-                        Tab 11
-                      </div>
-                      <div
-                        aria-controls="tabpane-12"
-                        aria-disabled="false"
-                        aria-selected="false"
-                        class=" ant-tabs-tab"
-                        id="tab-12"
-                        role="tab"
-                        tabindex="-1"
-                      >
-                        Tab 12
-                      </div>
-                      <div
-                        aria-controls="tabpane-13"
-                        aria-disabled="false"
-                        aria-selected="false"
-                        class=" ant-tabs-tab"
-                        id="tab-13"
-                        role="tab"
-                        tabindex="-1"
-                      >
-                        Tab 13
-                      </div>
-                      <div
-                        aria-controls="tabpane-14"
-                        aria-disabled="false"
-                        aria-selected="false"
-                        class=" ant-tabs-tab"
-                        id="tab-14"
-                        role="tab"
-                        tabindex="-1"
-                      >
-                        Tab 14
-                      </div>
-                      <div
-                        aria-controls="tabpane-15"
-                        aria-disabled="false"
-                        aria-selected="false"
-                        class=" ant-tabs-tab"
-                        id="tab-15"
-                        role="tab"
-                        tabindex="-1"
-                      >
-                        Tab 15
-                      </div>
-                      <div
-                        aria-controls="tabpane-16"
-                        aria-disabled="false"
-                        aria-selected="false"
-                        class=" ant-tabs-tab"
-                        id="tab-16"
-                        role="tab"
-                        tabindex="-1"
-                      >
-                        Tab 16
-                      </div>
-                      <div
-                        aria-controls="tabpane-17"
-                        aria-disabled="false"
-                        aria-selected="false"
-                        class=" ant-tabs-tab"
-                        id="tab-17"
-                        role="tab"
-                        tabindex="-1"
-                      >
-                        Tab 17
-                      </div>
-                      <div
-                        aria-controls="tabpane-18"
-                        aria-disabled="false"
-                        aria-selected="false"
-                        class=" ant-tabs-tab"
-                        id="tab-18"
-                        role="tab"
-                        tabindex="-1"
-                      >
-                        Tab 18
-                      </div>
-                      <div
-                        aria-controls="tabpane-19"
-                        aria-disabled="false"
-                        aria-selected="false"
-                        class=" ant-tabs-tab"
-                        id="tab-19"
-                        role="tab"
-                        tabindex="-1"
-                      >
-                        Tab 19
-                      </div>
-                    </div>
-                    <div
-                      class="ant-tabs-ink-bar ant-tabs-ink-bar-animated"
-                    />
-                  </div>
-                </div>
-              </div>
-            </div>
-          </div>
-          <div
-            class="ant-tabs-content ant-tabs-content-animated ant-tabs-top-content"
-            style="margin-left:-100%"
-          >
-            <div
-              aria-hidden="true"
-              class="ant-tabs-tabpane ant-tabs-tabpane-inactive"
-              role="tabpanel"
-              style="visibility:hidden"
-              tabindex="-1"
-            />
-            <div
-              aria-hidden="false"
-              class="ant-tabs-tabpane ant-tabs-tabpane-active"
-              role="tabpanel"
-              style="visibility:visible"
-              tabindex="0"
-            >
-              TTTT 1
-            </div>
-            <div
-              aria-hidden="true"
-              class="ant-tabs-tabpane ant-tabs-tabpane-inactive"
-              role="tabpanel"
-              style="visibility:hidden"
-              tabindex="-1"
-            />
-            <div
-              aria-hidden="true"
-              class="ant-tabs-tabpane ant-tabs-tabpane-inactive"
-              role="tabpanel"
-              style="visibility:hidden"
-              tabindex="-1"
-            />
-            <div
-              aria-hidden="true"
-              class="ant-tabs-tabpane ant-tabs-tabpane-inactive"
-              role="tabpanel"
-              style="visibility:hidden"
-              tabindex="-1"
-            />
-            <div
-              aria-hidden="true"
-              class="ant-tabs-tabpane ant-tabs-tabpane-inactive"
-              role="tabpanel"
-              style="visibility:hidden"
-              tabindex="-1"
-            />
-            <div
-              aria-hidden="true"
-              class="ant-tabs-tabpane ant-tabs-tabpane-inactive"
-              role="tabpanel"
-              style="visibility:hidden"
-              tabindex="-1"
-            />
-            <div
-              aria-hidden="true"
-              class="ant-tabs-tabpane ant-tabs-tabpane-inactive"
-              role="tabpanel"
-              style="visibility:hidden"
-              tabindex="-1"
-            />
-            <div
-              aria-hidden="true"
-              class="ant-tabs-tabpane ant-tabs-tabpane-inactive"
-              role="tabpanel"
-              style="visibility:hidden"
-              tabindex="-1"
-            />
-            <div
-              aria-hidden="true"
-              class="ant-tabs-tabpane ant-tabs-tabpane-inactive"
-              role="tabpanel"
-              style="visibility:hidden"
-              tabindex="-1"
-            />
-            <div
-              aria-hidden="true"
-              class="ant-tabs-tabpane ant-tabs-tabpane-inactive"
-              role="tabpanel"
-              style="visibility:hidden"
-              tabindex="-1"
-            />
-            <div
-              aria-hidden="true"
-              class="ant-tabs-tabpane ant-tabs-tabpane-inactive"
-              role="tabpanel"
-              style="visibility:hidden"
-              tabindex="-1"
-            />
-            <div
-              aria-hidden="true"
-              class="ant-tabs-tabpane ant-tabs-tabpane-inactive"
-              role="tabpanel"
-              style="visibility:hidden"
-              tabindex="-1"
-            />
-            <div
-              aria-hidden="true"
-              class="ant-tabs-tabpane ant-tabs-tabpane-inactive"
-              role="tabpanel"
-              style="visibility:hidden"
-              tabindex="-1"
-            />
-            <div
-              aria-hidden="true"
-              class="ant-tabs-tabpane ant-tabs-tabpane-inactive"
-              role="tabpanel"
-              style="visibility:hidden"
-              tabindex="-1"
-            />
-            <div
-              aria-hidden="true"
-              class="ant-tabs-tabpane ant-tabs-tabpane-inactive"
-              role="tabpanel"
-              style="visibility:hidden"
-              tabindex="-1"
-            />
-            <div
-              aria-hidden="true"
-              class="ant-tabs-tabpane ant-tabs-tabpane-inactive"
-              role="tabpanel"
-              style="visibility:hidden"
-              tabindex="-1"
-            />
-            <div
-              aria-hidden="true"
-              class="ant-tabs-tabpane ant-tabs-tabpane-inactive"
-              role="tabpanel"
-              style="visibility:hidden"
-              tabindex="-1"
-            />
-            <div
-              aria-hidden="true"
-              class="ant-tabs-tabpane ant-tabs-tabpane-inactive"
-              role="tabpanel"
-              style="visibility:hidden"
-              tabindex="-1"
-            />
+                    Tab 0
+                  </button>
+                  <button
+                    aria-selected="true"
+                    class="ant-tabs-tab ant-tabs-tab-active"
+                    role="tab"
+                    tabindex="0"
+                    type="button"
+                  >
+                    Tab 1
+                  </button>
+                  <button
+                    aria-selected="false"
+                    class="ant-tabs-tab"
+                    role="tab"
+                    tabindex="0"
+                    type="button"
+                  >
+                    Tab 2
+                  </button>
+                  <button
+                    aria-selected="false"
+                    class="ant-tabs-tab"
+                    role="tab"
+                    tabindex="0"
+                    type="button"
+                  >
+                    Tab 3
+                  </button>
+                  <button
+                    aria-selected="false"
+                    class="ant-tabs-tab"
+                    role="tab"
+                    tabindex="0"
+                    type="button"
+                  >
+                    Tab 4
+                  </button>
+                  <button
+                    aria-selected="false"
+                    class="ant-tabs-tab"
+                    role="tab"
+                    tabindex="0"
+                    type="button"
+                  >
+                    Tab 5
+                  </button>
+                  <button
+                    aria-selected="false"
+                    class="ant-tabs-tab"
+                    role="tab"
+                    tabindex="0"
+                    type="button"
+                  >
+                    Tab 6
+                  </button>
+                  <button
+                    aria-selected="false"
+                    class="ant-tabs-tab"
+                    role="tab"
+                    tabindex="0"
+                    type="button"
+                  >
+                    Tab 7
+                  </button>
+                  <button
+                    aria-selected="false"
+                    class="ant-tabs-tab"
+                    role="tab"
+                    tabindex="0"
+                    type="button"
+                  >
+                    Tab 8
+                  </button>
+                  <button
+                    aria-selected="false"
+                    class="ant-tabs-tab"
+                    role="tab"
+                    tabindex="0"
+                    type="button"
+                  >
+                    Tab 9
+                  </button>
+                  <button
+                    aria-selected="false"
+                    class="ant-tabs-tab"
+                    role="tab"
+                    tabindex="0"
+                    type="button"
+                  >
+                    Tab 10
+                  </button>
+                  <button
+                    aria-selected="false"
+                    class="ant-tabs-tab"
+                    role="tab"
+                    tabindex="0"
+                    type="button"
+                  >
+                    Tab 11
+                  </button>
+                  <button
+                    aria-selected="false"
+                    class="ant-tabs-tab"
+                    role="tab"
+                    tabindex="0"
+                    type="button"
+                  >
+                    Tab 12
+                  </button>
+                  <button
+                    aria-selected="false"
+                    class="ant-tabs-tab"
+                    role="tab"
+                    tabindex="0"
+                    type="button"
+                  >
+                    Tab 13
+                  </button>
+                  <button
+                    aria-selected="false"
+                    class="ant-tabs-tab"
+                    role="tab"
+                    tabindex="0"
+                    type="button"
+                  >
+                    Tab 14
+                  </button>
+                  <button
+                    aria-selected="false"
+                    class="ant-tabs-tab"
+                    role="tab"
+                    tabindex="0"
+                    type="button"
+                  >
+                    Tab 15
+                  </button>
+                  <button
+                    aria-selected="false"
+                    class="ant-tabs-tab"
+                    role="tab"
+                    tabindex="0"
+                    type="button"
+                  >
+                    Tab 16
+                  </button>
+                  <button
+                    aria-selected="false"
+                    class="ant-tabs-tab"
+                    role="tab"
+                    tabindex="0"
+                    type="button"
+                  >
+                    Tab 17
+                  </button>
+                  <button
+                    aria-selected="false"
+                    class="ant-tabs-tab"
+                    role="tab"
+                    tabindex="0"
+                    type="button"
+                  >
+                    Tab 18
+                  </button>
+                  <button
+                    aria-selected="false"
+                    class="ant-tabs-tab"
+                    role="tab"
+                    tabindex="0"
+                    type="button"
+                  >
+                    Tab 19
+                  </button>
+                  <div
+                    class="ant-tabs-ink-bar ant-tabs-ink-bar-animated"
+                  />
+                </div>
+              </div>
+              <div
+                class="ant-tabs-nav-operations ant-tabs-nav-operations-hidden"
+              >
+                <button
+                  aria-controls="null-more-popup"
+                  aria-expanded="false"
+                  aria-haspopup="listbox"
+                  aria-hidden="true"
+                  class="ant-tabs-nav-more"
+                  id="null-more"
+                  style="visibility:hidden;order:1"
+                  tabindex="-1"
+                  type="button"
+                >
+                  <span
+                    aria-label="ellipsis"
+                    class="anticon anticon-ellipsis"
+                    role="img"
+                  >
+                    <svg
+                      aria-hidden="true"
+                      class=""
+                      data-icon="ellipsis"
+                      fill="currentColor"
+                      focusable="false"
+                      height="1em"
+                      viewBox="64 64 896 896"
+                      width="1em"
+                    >
+                      <path
+                        d="M176 511a56 56 0 10112 0 56 56 0 10-112 0zm280 0a56 56 0 10112 0 56 56 0 10-112 0zm280 0a56 56 0 10112 0 56 56 0 10-112 0z"
+                      />
+                    </svg>
+                  </span>
+                </button>
+              </div>
+            </div>
             <div
-              aria-hidden="true"
-              class="ant-tabs-tabpane ant-tabs-tabpane-inactive"
-              role="tabpanel"
-              style="visibility:hidden"
-              tabindex="-1"
-            />
+              class="ant-tabs-content-holder"
+            >
+              <div
+                class="ant-tabs-content ant-tabs-content-top"
+              >
+                <div
+                  aria-hidden="true"
+                  class="ant-tabs-tabpane"
+                  role="tabpanel"
+                  style="display:none"
+                  tabindex="-1"
+                />
+                <div
+                  aria-hidden="false"
+                  class="ant-tabs-tabpane ant-tabs-tabpane-active"
+                  role="tabpanel"
+                  tabindex="0"
+                >
+                  TTTT 1
+                </div>
+                <div
+                  aria-hidden="true"
+                  class="ant-tabs-tabpane"
+                  role="tabpanel"
+                  style="display:none"
+                  tabindex="-1"
+                />
+                <div
+                  aria-hidden="true"
+                  class="ant-tabs-tabpane"
+                  role="tabpanel"
+                  style="display:none"
+                  tabindex="-1"
+                />
+                <div
+                  aria-hidden="true"
+                  class="ant-tabs-tabpane"
+                  role="tabpanel"
+                  style="display:none"
+                  tabindex="-1"
+                />
+                <div
+                  aria-hidden="true"
+                  class="ant-tabs-tabpane"
+                  role="tabpanel"
+                  style="display:none"
+                  tabindex="-1"
+                />
+                <div
+                  aria-hidden="true"
+                  class="ant-tabs-tabpane"
+                  role="tabpanel"
+                  style="display:none"
+                  tabindex="-1"
+                />
+                <div
+                  aria-hidden="true"
+                  class="ant-tabs-tabpane"
+                  role="tabpanel"
+                  style="display:none"
+                  tabindex="-1"
+                />
+                <div
+                  aria-hidden="true"
+                  class="ant-tabs-tabpane"
+                  role="tabpanel"
+                  style="display:none"
+                  tabindex="-1"
+                />
+                <div
+                  aria-hidden="true"
+                  class="ant-tabs-tabpane"
+                  role="tabpanel"
+                  style="display:none"
+                  tabindex="-1"
+                />
+                <div
+                  aria-hidden="true"
+                  class="ant-tabs-tabpane"
+                  role="tabpanel"
+                  style="display:none"
+                  tabindex="-1"
+                />
+                <div
+                  aria-hidden="true"
+                  class="ant-tabs-tabpane"
+                  role="tabpanel"
+                  style="display:none"
+                  tabindex="-1"
+                />
+                <div
+                  aria-hidden="true"
+                  class="ant-tabs-tabpane"
+                  role="tabpanel"
+                  style="display:none"
+                  tabindex="-1"
+                />
+                <div
+                  aria-hidden="true"
+                  class="ant-tabs-tabpane"
+                  role="tabpanel"
+                  style="display:none"
+                  tabindex="-1"
+                />
+                <div
+                  aria-hidden="true"
+                  class="ant-tabs-tabpane"
+                  role="tabpanel"
+                  style="display:none"
+                  tabindex="-1"
+                />
+                <div
+                  aria-hidden="true"
+                  class="ant-tabs-tabpane"
+                  role="tabpanel"
+                  style="display:none"
+                  tabindex="-1"
+                />
+                <div
+                  aria-hidden="true"
+                  class="ant-tabs-tabpane"
+                  role="tabpanel"
+                  style="display:none"
+                  tabindex="-1"
+                />
+                <div
+                  aria-hidden="true"
+                  class="ant-tabs-tabpane"
+                  role="tabpanel"
+                  style="display:none"
+                  tabindex="-1"
+                />
+                <div
+                  aria-hidden="true"
+                  class="ant-tabs-tabpane"
+                  role="tabpanel"
+                  style="display:none"
+                  tabindex="-1"
+                />
+                <div
+                  aria-hidden="true"
+                  class="ant-tabs-tabpane"
+                  role="tabpanel"
+                  style="display:none"
+                  tabindex="-1"
+                />
+              </div>
+            </div>
           </div>
         </div>
+        <div
+          aria-hidden="true"
+          class="ant-tabs-tabpane"
+          role="tabpanel"
+          style="display:none"
+          tabindex="-1"
+        />
       </div>
-      <div
-        aria-hidden="true"
-        class="ant-tabs-tabpane ant-tabs-tabpane-inactive"
-        role="tabpanel"
-        style="visibility:hidden"
-        tabindex="-1"
-      />
     </div>
   </div>
 </div>
@@ -2609,153 +2236,116 @@ exports[`renders ./components/tabs/demo/position.md correctly 1`] = `
     </div>
   </div>
   <div
-    class="ant-tabs ant-tabs-top ant-tabs-line"
+    class="ant-tabs ant-tabs-top"
   >
     <div
-      class="ant-tabs-bar ant-tabs-top-bar"
+      class="ant-tabs-nav"
       role="tablist"
-      tabindex="-1"
     >
       <div
-        class="ant-tabs-nav-container"
+        class="ant-tabs-nav-wrap"
       >
-        <span
-          class="ant-tabs-tab-prev ant-tabs-tab-btn-disabled"
-          unselectable="unselectable"
+        <div
+          class="ant-tabs-nav-list"
+          style="transform:translate(0px, 0px)"
+        >
+          <button
+            aria-selected="false"
+            class="ant-tabs-tab"
+            role="tab"
+            tabindex="0"
+            type="button"
+          >
+            Tab 1
+          </button>
+          <button
+            aria-selected="false"
+            class="ant-tabs-tab"
+            role="tab"
+            tabindex="0"
+            type="button"
+          >
+            Tab 2
+          </button>
+          <button
+            aria-selected="false"
+            class="ant-tabs-tab"
+            role="tab"
+            tabindex="0"
+            type="button"
+          >
+            Tab 3
+          </button>
+          <div
+            class="ant-tabs-ink-bar ant-tabs-ink-bar-animated"
+          />
+        </div>
+      </div>
+      <div
+        class="ant-tabs-nav-operations ant-tabs-nav-operations-hidden"
+      >
+        <button
+          aria-controls="null-more-popup"
+          aria-expanded="false"
+          aria-haspopup="listbox"
+          aria-hidden="true"
+          class="ant-tabs-nav-more"
+          id="null-more"
+          style="visibility:hidden;order:1"
+          tabindex="-1"
+          type="button"
         >
           <span
-            class="ant-tabs-tab-prev-icon"
+            aria-label="ellipsis"
+            class="anticon anticon-ellipsis"
+            role="img"
           >
-            <span
-              aria-label="left"
-              class="anticon anticon-left ant-tabs-tab-prev-icon-target"
-              role="img"
-            >
-              <svg
-                aria-hidden="true"
-                class=""
-                data-icon="left"
-                fill="currentColor"
-                focusable="false"
-                height="1em"
-                viewBox="64 64 896 896"
-                width="1em"
-              >
-                <path
-                  d="M724 218.3V141c0-6.7-7.7-10.4-12.9-6.3L260.3 486.8a31.86 31.86 0 000 50.3l450.8 352.1c5.3 4.1 12.9.4 12.9-6.3v-77.3c0-4.9-2.3-9.6-6.1-12.6l-360-281 360-281.1c3.8-3 6.1-7.7 6.1-12.6z"
-                />
-              </svg>
-            </span>
-          </span>
-        </span>
-        <span
-          class="ant-tabs-tab-next ant-tabs-tab-btn-disabled"
-          unselectable="unselectable"
-        >
-          <span
-            class="ant-tabs-tab-next-icon"
-          >
-            <span
-              aria-label="right"
-              class="anticon anticon-right ant-tabs-tab-next-icon-target"
-              role="img"
-            >
-              <svg
-                aria-hidden="true"
-                class=""
-                data-icon="right"
-                fill="currentColor"
-                focusable="false"
-                height="1em"
-                viewBox="64 64 896 896"
-                width="1em"
-              >
-                <path
-                  d="M765.7 486.8L314.9 134.7A7.97 7.97 0 00302 141v77.3c0 4.9 2.3 9.6 6.1 12.6l360 281.1-360 281.1c-3.9 3-6.1 7.7-6.1 12.6V883c0 6.7 7.7 10.4 12.9 6.3l450.8-352.1a31.96 31.96 0 000-50.4z"
-                />
-              </svg>
-            </span>
-          </span>
-        </span>
-        <div
-          class="ant-tabs-nav-wrap"
-        >
-          <div
-            class="ant-tabs-nav-scroll"
-          >
-            <div
-              class="ant-tabs-nav ant-tabs-nav-animated"
+            <svg
+              aria-hidden="true"
+              class=""
+              data-icon="ellipsis"
+              fill="currentColor"
+              focusable="false"
+              height="1em"
+              viewBox="64 64 896 896"
+              width="1em"
             >
-              <div>
-                <div
-                  aria-controls="tabpane-1"
-                  aria-disabled="false"
-                  aria-selected="true"
-                  class="ant-tabs-tab-active ant-tabs-tab"
-                  id="tab-1"
-                  role="tab"
-                  tabindex="0"
-                >
-                  Tab 1
-                </div>
-                <div
-                  aria-controls="tabpane-2"
-                  aria-disabled="false"
-                  aria-selected="false"
-                  class=" ant-tabs-tab"
-                  id="tab-2"
-                  role="tab"
-                  tabindex="-1"
-                >
-                  Tab 2
-                </div>
-                <div
-                  aria-controls="tabpane-3"
-                  aria-disabled="false"
-                  aria-selected="false"
-                  class=" ant-tabs-tab"
-                  id="tab-3"
-                  role="tab"
-                  tabindex="-1"
-                >
-                  Tab 3
-                </div>
-              </div>
-              <div
-                class="ant-tabs-ink-bar ant-tabs-ink-bar-animated"
+              <path
+                d="M176 511a56 56 0 10112 0 56 56 0 10-112 0zm280 0a56 56 0 10112 0 56 56 0 10-112 0zm280 0a56 56 0 10112 0 56 56 0 10-112 0z"
               />
-            </div>
-          </div>
-        </div>
+            </svg>
+          </span>
+        </button>
       </div>
     </div>
     <div
-      class="ant-tabs-content ant-tabs-content-animated ant-tabs-top-content"
-      style="margin-left:0%"
+      class="ant-tabs-content-holder"
     >
       <div
-        aria-hidden="false"
-        class="ant-tabs-tabpane ant-tabs-tabpane-active"
-        role="tabpanel"
-        style="visibility:visible"
-        tabindex="0"
+        class="ant-tabs-content ant-tabs-content-top"
       >
-        Content of Tab 1
+        <div
+          aria-hidden="true"
+          class="ant-tabs-tabpane"
+          role="tabpanel"
+          style="display:none"
+          tabindex="-1"
+        />
+        <div
+          aria-hidden="true"
+          class="ant-tabs-tabpane"
+          role="tabpanel"
+          style="display:none"
+          tabindex="-1"
+        />
+        <div
+          aria-hidden="true"
+          class="ant-tabs-tabpane"
+          role="tabpanel"
+          style="display:none"
+          tabindex="-1"
+        />
       </div>
-      <div
-        aria-hidden="true"
-        class="ant-tabs-tabpane ant-tabs-tabpane-inactive"
-        role="tabpanel"
-        style="visibility:hidden"
-        tabindex="-1"
-      />
-      <div
-        aria-hidden="true"
-        class="ant-tabs-tabpane ant-tabs-tabpane-inactive"
-        role="tabpanel"
-        style="visibility:hidden"
-        tabindex="-1"
-      />
     </div>
   </div>
 </div>
@@ -2827,303 +2417,232 @@ exports[`renders ./components/tabs/demo/size.md correctly 1`] = `
     </label>
   </div>
   <div
-    class="ant-tabs ant-tabs-top ant-tabs-small ant-tabs-line"
+    class="ant-tabs ant-tabs-top ant-tabs-small"
     style="margin-bottom:32px"
   >
     <div
-      class="ant-tabs-bar ant-tabs-top-bar ant-tabs-small-bar"
+      class="ant-tabs-nav"
       role="tablist"
-      tabindex="-1"
     >
       <div
-        class="ant-tabs-nav-container"
+        class="ant-tabs-nav-wrap"
       >
-        <span
-          class="ant-tabs-tab-prev ant-tabs-tab-btn-disabled"
-          unselectable="unselectable"
+        <div
+          class="ant-tabs-nav-list"
+          style="transform:translate(0px, 0px)"
         >
-          <span
-            class="ant-tabs-tab-prev-icon"
+          <button
+            aria-selected="true"
+            class="ant-tabs-tab ant-tabs-tab-active"
+            role="tab"
+            tabindex="0"
+            type="button"
           >
-            <span
-              aria-label="left"
-              class="anticon anticon-left ant-tabs-tab-prev-icon-target"
-              role="img"
-            >
-              <svg
-                aria-hidden="true"
-                class=""
-                data-icon="left"
-                fill="currentColor"
-                focusable="false"
-                height="1em"
-                viewBox="64 64 896 896"
-                width="1em"
-              >
-                <path
-                  d="M724 218.3V141c0-6.7-7.7-10.4-12.9-6.3L260.3 486.8a31.86 31.86 0 000 50.3l450.8 352.1c5.3 4.1 12.9.4 12.9-6.3v-77.3c0-4.9-2.3-9.6-6.1-12.6l-360-281 360-281.1c3.8-3 6.1-7.7 6.1-12.6z"
-                />
-              </svg>
-            </span>
-          </span>
-        </span>
-        <span
-          class="ant-tabs-tab-next ant-tabs-tab-btn-disabled"
-          unselectable="unselectable"
-        >
-          <span
-            class="ant-tabs-tab-next-icon"
+            Tab 1
+          </button>
+          <button
+            aria-selected="false"
+            class="ant-tabs-tab"
+            role="tab"
+            tabindex="0"
+            type="button"
           >
-            <span
-              aria-label="right"
-              class="anticon anticon-right ant-tabs-tab-next-icon-target"
-              role="img"
-            >
-              <svg
-                aria-hidden="true"
-                class=""
-                data-icon="right"
-                fill="currentColor"
-                focusable="false"
-                height="1em"
-                viewBox="64 64 896 896"
-                width="1em"
-              >
-                <path
-                  d="M765.7 486.8L314.9 134.7A7.97 7.97 0 00302 141v77.3c0 4.9 2.3 9.6 6.1 12.6l360 281.1-360 281.1c-3.9 3-6.1 7.7-6.1 12.6V883c0 6.7 7.7 10.4 12.9 6.3l450.8-352.1a31.96 31.96 0 000-50.4z"
-                />
-              </svg>
-            </span>
-          </span>
-        </span>
-        <div
-          class="ant-tabs-nav-wrap"
-        >
+            Tab 2
+          </button>
+          <button
+            aria-selected="false"
+            class="ant-tabs-tab"
+            role="tab"
+            tabindex="0"
+            type="button"
+          >
+            Tab 3
+          </button>
           <div
-            class="ant-tabs-nav-scroll"
+            class="ant-tabs-ink-bar ant-tabs-ink-bar-animated"
+          />
+        </div>
+      </div>
+      <div
+        class="ant-tabs-nav-operations ant-tabs-nav-operations-hidden"
+      >
+        <button
+          aria-controls="null-more-popup"
+          aria-expanded="false"
+          aria-haspopup="listbox"
+          aria-hidden="true"
+          class="ant-tabs-nav-more"
+          id="null-more"
+          style="visibility:hidden;order:1"
+          tabindex="-1"
+          type="button"
+        >
+          <span
+            aria-label="ellipsis"
+            class="anticon anticon-ellipsis"
+            role="img"
           >
-            <div
-              class="ant-tabs-nav ant-tabs-nav-animated"
+            <svg
+              aria-hidden="true"
+              class=""
+              data-icon="ellipsis"
+              fill="currentColor"
+              focusable="false"
+              height="1em"
+              viewBox="64 64 896 896"
+              width="1em"
             >
-              <div>
-                <div
-                  aria-controls="tabpane-1"
-                  aria-disabled="false"
-                  aria-selected="true"
-                  class="ant-tabs-tab-active ant-tabs-tab"
-                  id="tab-1"
-                  role="tab"
-                  tabindex="0"
-                >
-                  Tab 1
-                </div>
-                <div
-                  aria-controls="tabpane-2"
-                  aria-disabled="false"
-                  aria-selected="false"
-                  class=" ant-tabs-tab"
-                  id="tab-2"
-                  role="tab"
-                  tabindex="-1"
-                >
-                  Tab 2
-                </div>
-                <div
-                  aria-controls="tabpane-3"
-                  aria-disabled="false"
-                  aria-selected="false"
-                  class=" ant-tabs-tab"
-                  id="tab-3"
-                  role="tab"
-                  tabindex="-1"
-                >
-                  Tab 3
-                </div>
-              </div>
-              <div
-                class="ant-tabs-ink-bar ant-tabs-ink-bar-animated"
+              <path
+                d="M176 511a56 56 0 10112 0 56 56 0 10-112 0zm280 0a56 56 0 10112 0 56 56 0 10-112 0zm280 0a56 56 0 10112 0 56 56 0 10-112 0z"
               />
-            </div>
-          </div>
-        </div>
+            </svg>
+          </span>
+        </button>
       </div>
     </div>
     <div
-      class="ant-tabs-content ant-tabs-content-animated ant-tabs-top-content"
-      style="margin-left:0%"
+      class="ant-tabs-content-holder"
     >
       <div
-        aria-hidden="false"
-        class="ant-tabs-tabpane ant-tabs-tabpane-active"
-        role="tabpanel"
-        style="visibility:visible"
-        tabindex="0"
+        class="ant-tabs-content ant-tabs-content-top"
       >
-        Content of tab 1
+        <div
+          aria-hidden="false"
+          class="ant-tabs-tabpane ant-tabs-tabpane-active"
+          role="tabpanel"
+          tabindex="0"
+        >
+          Content of tab 1
+        </div>
+        <div
+          aria-hidden="true"
+          class="ant-tabs-tabpane"
+          role="tabpanel"
+          style="display:none"
+          tabindex="-1"
+        />
+        <div
+          aria-hidden="true"
+          class="ant-tabs-tabpane"
+          role="tabpanel"
+          style="display:none"
+          tabindex="-1"
+        />
       </div>
-      <div
-        aria-hidden="true"
-        class="ant-tabs-tabpane ant-tabs-tabpane-inactive"
-        role="tabpanel"
-        style="visibility:hidden"
-        tabindex="-1"
-      />
-      <div
-        aria-hidden="true"
-        class="ant-tabs-tabpane ant-tabs-tabpane-inactive"
-        role="tabpanel"
-        style="visibility:hidden"
-        tabindex="-1"
-      />
     </div>
   </div>
   <div
-    class="ant-tabs ant-tabs-top ant-tabs-small ant-tabs-card ant-tabs-no-animation"
+    class="ant-tabs ant-tabs-top ant-tabs-small ant-tabs-card"
   >
     <div
-      class="ant-tabs-bar ant-tabs-top-bar ant-tabs-small-bar ant-tabs-card-bar"
+      class="ant-tabs-nav"
       role="tablist"
-      tabindex="-1"
     >
       <div
-        class="ant-tabs-nav-container"
+        class="ant-tabs-nav-wrap"
       >
-        <span
-          class="ant-tabs-tab-prev ant-tabs-tab-btn-disabled"
-          unselectable="unselectable"
+        <div
+          class="ant-tabs-nav-list"
+          style="transform:translate(0px, 0px)"
         >
-          <span
-            class="ant-tabs-tab-prev-icon"
+          <button
+            aria-selected="true"
+            class="ant-tabs-tab ant-tabs-tab-active"
+            role="tab"
+            tabindex="0"
+            type="button"
           >
-            <span
-              aria-label="left"
-              class="anticon anticon-left ant-tabs-tab-prev-icon-target"
-              role="img"
-            >
-              <svg
-                aria-hidden="true"
-                class=""
-                data-icon="left"
-                fill="currentColor"
-                focusable="false"
-                height="1em"
-                viewBox="64 64 896 896"
-                width="1em"
-              >
-                <path
-                  d="M724 218.3V141c0-6.7-7.7-10.4-12.9-6.3L260.3 486.8a31.86 31.86 0 000 50.3l450.8 352.1c5.3 4.1 12.9.4 12.9-6.3v-77.3c0-4.9-2.3-9.6-6.1-12.6l-360-281 360-281.1c3.8-3 6.1-7.7 6.1-12.6z"
-                />
-              </svg>
-            </span>
-          </span>
-        </span>
-        <span
-          class="ant-tabs-tab-next ant-tabs-tab-btn-disabled"
-          unselectable="unselectable"
+            Card Tab 1
+          </button>
+          <button
+            aria-selected="false"
+            class="ant-tabs-tab"
+            role="tab"
+            tabindex="0"
+            type="button"
+          >
+            Card Tab 2
+          </button>
+          <button
+            aria-selected="false"
+            class="ant-tabs-tab"
+            role="tab"
+            tabindex="0"
+            type="button"
+          >
+            Card Tab 3
+          </button>
+          <div
+            class="ant-tabs-ink-bar ant-tabs-ink-bar-animated"
+          />
+        </div>
+      </div>
+      <div
+        class="ant-tabs-nav-operations ant-tabs-nav-operations-hidden"
+      >
+        <button
+          aria-controls="null-more-popup"
+          aria-expanded="false"
+          aria-haspopup="listbox"
+          aria-hidden="true"
+          class="ant-tabs-nav-more"
+          id="null-more"
+          style="visibility:hidden;order:1"
+          tabindex="-1"
+          type="button"
         >
           <span
-            class="ant-tabs-tab-next-icon"
+            aria-label="ellipsis"
+            class="anticon anticon-ellipsis"
+            role="img"
           >
-            <span
-              aria-label="right"
-              class="anticon anticon-right ant-tabs-tab-next-icon-target"
-              role="img"
+            <svg
+              aria-hidden="true"
+              class=""
+              data-icon="ellipsis"
+              fill="currentColor"
+              focusable="false"
+              height="1em"
+              viewBox="64 64 896 896"
+              width="1em"
             >
-              <svg
-                aria-hidden="true"
-                class=""
-                data-icon="right"
-                fill="currentColor"
-                focusable="false"
-                height="1em"
-                viewBox="64 64 896 896"
-                width="1em"
-              >
-                <path
-                  d="M765.7 486.8L314.9 134.7A7.97 7.97 0 00302 141v77.3c0 4.9 2.3 9.6 6.1 12.6l360 281.1-360 281.1c-3.9 3-6.1 7.7-6.1 12.6V883c0 6.7 7.7 10.4 12.9 6.3l450.8-352.1a31.96 31.96 0 000-50.4z"
-                />
-              </svg>
-            </span>
-          </span>
-        </span>
-        <div
-          class="ant-tabs-nav-wrap"
-        >
-          <div
-            class="ant-tabs-nav-scroll"
-          >
-            <div
-              class="ant-tabs-nav ant-tabs-nav-animated"
-            >
-              <div>
-                <div
-                  aria-controls="tabpane-1"
-                  aria-disabled="false"
-                  aria-selected="true"
-                  class="ant-tabs-tab-active ant-tabs-tab"
-                  id="tab-1"
-                  role="tab"
-                  tabindex="0"
-                >
-                  Card Tab 1
-                </div>
-                <div
-                  aria-controls="tabpane-2"
-                  aria-disabled="false"
-                  aria-selected="false"
-                  class=" ant-tabs-tab"
-                  id="tab-2"
-                  role="tab"
-                  tabindex="-1"
-                >
-                  Card Tab 2
-                </div>
-                <div
-                  aria-controls="tabpane-3"
-                  aria-disabled="false"
-                  aria-selected="false"
-                  class=" ant-tabs-tab"
-                  id="tab-3"
-                  role="tab"
-                  tabindex="-1"
-                >
-                  Card Tab 3
-                </div>
-              </div>
-              <div
-                class="ant-tabs-ink-bar ant-tabs-ink-bar-animated"
+              <path
+                d="M176 511a56 56 0 10112 0 56 56 0 10-112 0zm280 0a56 56 0 10112 0 56 56 0 10-112 0zm280 0a56 56 0 10112 0 56 56 0 10-112 0z"
               />
-            </div>
-          </div>
-        </div>
+            </svg>
+          </span>
+        </button>
       </div>
     </div>
     <div
-      class="ant-tabs-content ant-tabs-content-no-animated ant-tabs-top-content ant-tabs-card-content"
+      class="ant-tabs-content-holder"
     >
       <div
-        aria-hidden="false"
-        class="ant-tabs-tabpane ant-tabs-tabpane-active"
-        role="tabpanel"
-        style="visibility:visible"
-        tabindex="0"
+        class="ant-tabs-content ant-tabs-content-top"
       >
-        Content of card tab 1
+        <div
+          aria-hidden="false"
+          class="ant-tabs-tabpane ant-tabs-tabpane-active"
+          role="tabpanel"
+          tabindex="0"
+        >
+          Content of card tab 1
+        </div>
+        <div
+          aria-hidden="true"
+          class="ant-tabs-tabpane"
+          role="tabpanel"
+          style="display:none"
+          tabindex="-1"
+        />
+        <div
+          aria-hidden="true"
+          class="ant-tabs-tabpane"
+          role="tabpanel"
+          style="display:none"
+          tabindex="-1"
+        />
       </div>
-      <div
-        aria-hidden="true"
-        class="ant-tabs-tabpane ant-tabs-tabpane-inactive"
-        role="tabpanel"
-        style="visibility:hidden"
-        tabindex="-1"
-      />
-      <div
-        aria-hidden="true"
-        class="ant-tabs-tabpane ant-tabs-tabpane-inactive"
-        role="tabpanel"
-        style="visibility:hidden"
-        tabindex="-1"
-      />
     </div>
   </div>
 </div>
@@ -3176,641 +2695,552 @@ exports[`renders ./components/tabs/demo/slide.md correctly 1`] = `
     </label>
   </div>
   <div
-    class="ant-tabs ant-tabs-top ant-tabs-line"
+    class="ant-tabs ant-tabs-top"
     style="height:220px"
   >
     <div
-      class="ant-tabs-bar ant-tabs-top-bar"
+      class="ant-tabs-nav"
       role="tablist"
-      tabindex="-1"
     >
       <div
-        class="ant-tabs-nav-container"
+        class="ant-tabs-nav-wrap"
       >
-        <span
-          class="ant-tabs-tab-prev ant-tabs-tab-btn-disabled"
-          unselectable="unselectable"
+        <div
+          class="ant-tabs-nav-list"
+          style="transform:translate(0px, 0px)"
         >
-          <span
-            class="ant-tabs-tab-prev-icon"
+          <button
+            aria-selected="false"
+            class="ant-tabs-tab"
+            role="tab"
+            tabindex="0"
+            type="button"
           >
-            <span
-              aria-label="left"
-              class="anticon anticon-left ant-tabs-tab-prev-icon-target"
-              role="img"
-            >
-              <svg
-                aria-hidden="true"
-                class=""
-                data-icon="left"
-                fill="currentColor"
-                focusable="false"
-                height="1em"
-                viewBox="64 64 896 896"
-                width="1em"
-              >
-                <path
-                  d="M724 218.3V141c0-6.7-7.7-10.4-12.9-6.3L260.3 486.8a31.86 31.86 0 000 50.3l450.8 352.1c5.3 4.1 12.9.4 12.9-6.3v-77.3c0-4.9-2.3-9.6-6.1-12.6l-360-281 360-281.1c3.8-3 6.1-7.7 6.1-12.6z"
-                />
-              </svg>
-            </span>
-          </span>
-        </span>
-        <span
-          class="ant-tabs-tab-next ant-tabs-tab-btn-disabled"
-          unselectable="unselectable"
+            Tab-0
+          </button>
+          <button
+            aria-selected="true"
+            class="ant-tabs-tab ant-tabs-tab-active"
+            role="tab"
+            tabindex="0"
+            type="button"
+          >
+            Tab-1
+          </button>
+          <button
+            aria-selected="false"
+            class="ant-tabs-tab"
+            role="tab"
+            tabindex="0"
+            type="button"
+          >
+            Tab-2
+          </button>
+          <button
+            aria-selected="false"
+            class="ant-tabs-tab"
+            role="tab"
+            tabindex="0"
+            type="button"
+          >
+            Tab-3
+          </button>
+          <button
+            aria-selected="false"
+            class="ant-tabs-tab"
+            role="tab"
+            tabindex="0"
+            type="button"
+          >
+            Tab-4
+          </button>
+          <button
+            aria-selected="false"
+            class="ant-tabs-tab"
+            role="tab"
+            tabindex="0"
+            type="button"
+          >
+            Tab-5
+          </button>
+          <button
+            aria-selected="false"
+            class="ant-tabs-tab"
+            role="tab"
+            tabindex="0"
+            type="button"
+          >
+            Tab-6
+          </button>
+          <button
+            aria-selected="false"
+            class="ant-tabs-tab"
+            role="tab"
+            tabindex="0"
+            type="button"
+          >
+            Tab-7
+          </button>
+          <button
+            aria-selected="false"
+            class="ant-tabs-tab"
+            role="tab"
+            tabindex="0"
+            type="button"
+          >
+            Tab-8
+          </button>
+          <button
+            aria-selected="false"
+            class="ant-tabs-tab"
+            role="tab"
+            tabindex="0"
+            type="button"
+          >
+            Tab-9
+          </button>
+          <button
+            aria-selected="false"
+            class="ant-tabs-tab"
+            role="tab"
+            tabindex="0"
+            type="button"
+          >
+            Tab-10
+          </button>
+          <button
+            aria-selected="false"
+            class="ant-tabs-tab"
+            role="tab"
+            tabindex="0"
+            type="button"
+          >
+            Tab-11
+          </button>
+          <button
+            aria-selected="false"
+            class="ant-tabs-tab"
+            role="tab"
+            tabindex="0"
+            type="button"
+          >
+            Tab-12
+          </button>
+          <button
+            aria-selected="false"
+            class="ant-tabs-tab"
+            role="tab"
+            tabindex="0"
+            type="button"
+          >
+            Tab-13
+          </button>
+          <button
+            aria-selected="false"
+            class="ant-tabs-tab"
+            role="tab"
+            tabindex="0"
+            type="button"
+          >
+            Tab-14
+          </button>
+          <button
+            aria-selected="false"
+            class="ant-tabs-tab"
+            role="tab"
+            tabindex="0"
+            type="button"
+          >
+            Tab-15
+          </button>
+          <button
+            aria-selected="false"
+            class="ant-tabs-tab"
+            role="tab"
+            tabindex="0"
+            type="button"
+          >
+            Tab-16
+          </button>
+          <button
+            aria-selected="false"
+            class="ant-tabs-tab"
+            role="tab"
+            tabindex="0"
+            type="button"
+          >
+            Tab-17
+          </button>
+          <button
+            aria-selected="false"
+            class="ant-tabs-tab"
+            role="tab"
+            tabindex="0"
+            type="button"
+          >
+            Tab-18
+          </button>
+          <button
+            aria-selected="false"
+            class="ant-tabs-tab"
+            role="tab"
+            tabindex="0"
+            type="button"
+          >
+            Tab-19
+          </button>
+          <button
+            aria-selected="false"
+            class="ant-tabs-tab"
+            role="tab"
+            tabindex="0"
+            type="button"
+          >
+            Tab-20
+          </button>
+          <button
+            aria-selected="false"
+            class="ant-tabs-tab"
+            role="tab"
+            tabindex="0"
+            type="button"
+          >
+            Tab-21
+          </button>
+          <button
+            aria-selected="false"
+            class="ant-tabs-tab"
+            role="tab"
+            tabindex="0"
+            type="button"
+          >
+            Tab-22
+          </button>
+          <button
+            aria-selected="false"
+            class="ant-tabs-tab"
+            role="tab"
+            tabindex="0"
+            type="button"
+          >
+            Tab-23
+          </button>
+          <button
+            aria-selected="false"
+            class="ant-tabs-tab"
+            role="tab"
+            tabindex="0"
+            type="button"
+          >
+            Tab-24
+          </button>
+          <button
+            aria-selected="false"
+            class="ant-tabs-tab"
+            role="tab"
+            tabindex="0"
+            type="button"
+          >
+            Tab-25
+          </button>
+          <button
+            aria-selected="false"
+            class="ant-tabs-tab"
+            role="tab"
+            tabindex="0"
+            type="button"
+          >
+            Tab-26
+          </button>
+          <button
+            aria-selected="false"
+            class="ant-tabs-tab"
+            role="tab"
+            tabindex="0"
+            type="button"
+          >
+            Tab-27
+          </button>
+          <button
+            aria-selected="false"
+            class="ant-tabs-tab ant-tabs-tab-disabled"
+            disabled=""
+            role="tab"
+            tabindex="0"
+            type="button"
+          >
+            Tab-28
+          </button>
+          <button
+            aria-selected="false"
+            class="ant-tabs-tab"
+            role="tab"
+            tabindex="0"
+            type="button"
+          >
+            Tab-29
+          </button>
+          <div
+            class="ant-tabs-ink-bar ant-tabs-ink-bar-animated"
+          />
+        </div>
+      </div>
+      <div
+        class="ant-tabs-nav-operations ant-tabs-nav-operations-hidden"
+      >
+        <button
+          aria-controls="null-more-popup"
+          aria-expanded="false"
+          aria-haspopup="listbox"
+          aria-hidden="true"
+          class="ant-tabs-nav-more"
+          id="null-more"
+          style="visibility:hidden;order:1"
+          tabindex="-1"
+          type="button"
         >
           <span
-            class="ant-tabs-tab-next-icon"
+            aria-label="ellipsis"
+            class="anticon anticon-ellipsis"
+            role="img"
           >
-            <span
-              aria-label="right"
-              class="anticon anticon-right ant-tabs-tab-next-icon-target"
-              role="img"
+            <svg
+              aria-hidden="true"
+              class=""
+              data-icon="ellipsis"
+              fill="currentColor"
+              focusable="false"
+              height="1em"
+              viewBox="64 64 896 896"
+              width="1em"
             >
-              <svg
-                aria-hidden="true"
-                class=""
-                data-icon="right"
-                fill="currentColor"
-                focusable="false"
-                height="1em"
-                viewBox="64 64 896 896"
-                width="1em"
-              >
-                <path
-                  d="M765.7 486.8L314.9 134.7A7.97 7.97 0 00302 141v77.3c0 4.9 2.3 9.6 6.1 12.6l360 281.1-360 281.1c-3.9 3-6.1 7.7-6.1 12.6V883c0 6.7 7.7 10.4 12.9 6.3l450.8-352.1a31.96 31.96 0 000-50.4z"
-                />
-              </svg>
-            </span>
+              <path
+                d="M176 511a56 56 0 10112 0 56 56 0 10-112 0zm280 0a56 56 0 10112 0 56 56 0 10-112 0zm280 0a56 56 0 10112 0 56 56 0 10-112 0z"
+              />
+            </svg>
           </span>
-        </span>
+        </button>
+      </div>
+    </div>
+    <div
+      class="ant-tabs-content-holder"
+    >
+      <div
+        class="ant-tabs-content ant-tabs-content-top"
+      >
         <div
-          class="ant-tabs-nav-wrap"
+          aria-hidden="true"
+          class="ant-tabs-tabpane"
+          role="tabpanel"
+          style="display:none"
+          tabindex="-1"
+        />
+        <div
+          aria-hidden="false"
+          class="ant-tabs-tabpane ant-tabs-tabpane-active"
+          role="tabpanel"
+          tabindex="0"
         >
-          <div
-            class="ant-tabs-nav-scroll"
-          >
-            <div
-              class="ant-tabs-nav ant-tabs-nav-animated"
-            >
-              <div>
-                <div
-                  aria-controls="tabpane-0"
-                  aria-disabled="false"
-                  aria-selected="false"
-                  class=" ant-tabs-tab"
-                  id="tab-0"
-                  role="tab"
-                  tabindex="-1"
-                >
-                  Tab-0
-                </div>
-                <div
-                  aria-controls="tabpane-1"
-                  aria-disabled="false"
-                  aria-selected="true"
-                  class="ant-tabs-tab-active ant-tabs-tab"
-                  id="tab-1"
-                  role="tab"
-                  tabindex="0"
-                >
-                  Tab-1
-                </div>
-                <div
-                  aria-controls="tabpane-2"
-                  aria-disabled="false"
-                  aria-selected="false"
-                  class=" ant-tabs-tab"
-                  id="tab-2"
-                  role="tab"
-                  tabindex="-1"
-                >
-                  Tab-2
-                </div>
-                <div
-                  aria-controls="tabpane-3"
-                  aria-disabled="false"
-                  aria-selected="false"
-                  class=" ant-tabs-tab"
-                  id="tab-3"
-                  role="tab"
-                  tabindex="-1"
-                >
-                  Tab-3
-                </div>
-                <div
-                  aria-controls="tabpane-4"
-                  aria-disabled="false"
-                  aria-selected="false"
-                  class=" ant-tabs-tab"
-                  id="tab-4"
-                  role="tab"
-                  tabindex="-1"
-                >
-                  Tab-4
-                </div>
-                <div
-                  aria-controls="tabpane-5"
-                  aria-disabled="false"
-                  aria-selected="false"
-                  class=" ant-tabs-tab"
-                  id="tab-5"
-                  role="tab"
-                  tabindex="-1"
-                >
-                  Tab-5
-                </div>
-                <div
-                  aria-controls="tabpane-6"
-                  aria-disabled="false"
-                  aria-selected="false"
-                  class=" ant-tabs-tab"
-                  id="tab-6"
-                  role="tab"
-                  tabindex="-1"
-                >
-                  Tab-6
-                </div>
-                <div
-                  aria-controls="tabpane-7"
-                  aria-disabled="false"
-                  aria-selected="false"
-                  class=" ant-tabs-tab"
-                  id="tab-7"
-                  role="tab"
-                  tabindex="-1"
-                >
-                  Tab-7
-                </div>
-                <div
-                  aria-controls="tabpane-8"
-                  aria-disabled="false"
-                  aria-selected="false"
-                  class=" ant-tabs-tab"
-                  id="tab-8"
-                  role="tab"
-                  tabindex="-1"
-                >
-                  Tab-8
-                </div>
-                <div
-                  aria-controls="tabpane-9"
-                  aria-disabled="false"
-                  aria-selected="false"
-                  class=" ant-tabs-tab"
-                  id="tab-9"
-                  role="tab"
-                  tabindex="-1"
-                >
-                  Tab-9
-                </div>
-                <div
-                  aria-controls="tabpane-10"
-                  aria-disabled="false"
-                  aria-selected="false"
-                  class=" ant-tabs-tab"
-                  id="tab-10"
-                  role="tab"
-                  tabindex="-1"
-                >
-                  Tab-10
-                </div>
-                <div
-                  aria-controls="tabpane-11"
-                  aria-disabled="false"
-                  aria-selected="false"
-                  class=" ant-tabs-tab"
-                  id="tab-11"
-                  role="tab"
-                  tabindex="-1"
-                >
-                  Tab-11
-                </div>
-                <div
-                  aria-controls="tabpane-12"
-                  aria-disabled="false"
-                  aria-selected="false"
-                  class=" ant-tabs-tab"
-                  id="tab-12"
-                  role="tab"
-                  tabindex="-1"
-                >
-                  Tab-12
-                </div>
-                <div
-                  aria-controls="tabpane-13"
-                  aria-disabled="false"
-                  aria-selected="false"
-                  class=" ant-tabs-tab"
-                  id="tab-13"
-                  role="tab"
-                  tabindex="-1"
-                >
-                  Tab-13
-                </div>
-                <div
-                  aria-controls="tabpane-14"
-                  aria-disabled="false"
-                  aria-selected="false"
-                  class=" ant-tabs-tab"
-                  id="tab-14"
-                  role="tab"
-                  tabindex="-1"
-                >
-                  Tab-14
-                </div>
-                <div
-                  aria-controls="tabpane-15"
-                  aria-disabled="false"
-                  aria-selected="false"
-                  class=" ant-tabs-tab"
-                  id="tab-15"
-                  role="tab"
-                  tabindex="-1"
-                >
-                  Tab-15
-                </div>
-                <div
-                  aria-controls="tabpane-16"
-                  aria-disabled="false"
-                  aria-selected="false"
-                  class=" ant-tabs-tab"
-                  id="tab-16"
-                  role="tab"
-                  tabindex="-1"
-                >
-                  Tab-16
-                </div>
-                <div
-                  aria-controls="tabpane-17"
-                  aria-disabled="false"
-                  aria-selected="false"
-                  class=" ant-tabs-tab"
-                  id="tab-17"
-                  role="tab"
-                  tabindex="-1"
-                >
-                  Tab-17
-                </div>
-                <div
-                  aria-controls="tabpane-18"
-                  aria-disabled="false"
-                  aria-selected="false"
-                  class=" ant-tabs-tab"
-                  id="tab-18"
-                  role="tab"
-                  tabindex="-1"
-                >
-                  Tab-18
-                </div>
-                <div
-                  aria-controls="tabpane-19"
-                  aria-disabled="false"
-                  aria-selected="false"
-                  class=" ant-tabs-tab"
-                  id="tab-19"
-                  role="tab"
-                  tabindex="-1"
-                >
-                  Tab-19
-                </div>
-                <div
-                  aria-controls="tabpane-20"
-                  aria-disabled="false"
-                  aria-selected="false"
-                  class=" ant-tabs-tab"
-                  id="tab-20"
-                  role="tab"
-                  tabindex="-1"
-                >
-                  Tab-20
-                </div>
-                <div
-                  aria-controls="tabpane-21"
-                  aria-disabled="false"
-                  aria-selected="false"
-                  class=" ant-tabs-tab"
-                  id="tab-21"
-                  role="tab"
-                  tabindex="-1"
-                >
-                  Tab-21
-                </div>
-                <div
-                  aria-controls="tabpane-22"
-                  aria-disabled="false"
-                  aria-selected="false"
-                  class=" ant-tabs-tab"
-                  id="tab-22"
-                  role="tab"
-                  tabindex="-1"
-                >
-                  Tab-22
-                </div>
-                <div
-                  aria-controls="tabpane-23"
-                  aria-disabled="false"
-                  aria-selected="false"
-                  class=" ant-tabs-tab"
-                  id="tab-23"
-                  role="tab"
-                  tabindex="-1"
-                >
-                  Tab-23
-                </div>
-                <div
-                  aria-controls="tabpane-24"
-                  aria-disabled="false"
-                  aria-selected="false"
-                  class=" ant-tabs-tab"
-                  id="tab-24"
-                  role="tab"
-                  tabindex="-1"
-                >
-                  Tab-24
-                </div>
-                <div
-                  aria-controls="tabpane-25"
-                  aria-disabled="false"
-                  aria-selected="false"
-                  class=" ant-tabs-tab"
-                  id="tab-25"
-                  role="tab"
-                  tabindex="-1"
-                >
-                  Tab-25
-                </div>
-                <div
-                  aria-controls="tabpane-26"
-                  aria-disabled="false"
-                  aria-selected="false"
-                  class=" ant-tabs-tab"
-                  id="tab-26"
-                  role="tab"
-                  tabindex="-1"
-                >
-                  Tab-26
-                </div>
-                <div
-                  aria-controls="tabpane-27"
-                  aria-disabled="false"
-                  aria-selected="false"
-                  class=" ant-tabs-tab"
-                  id="tab-27"
-                  role="tab"
-                  tabindex="-1"
-                >
-                  Tab-27
-                </div>
-                <div
-                  aria-controls="tabpane-28"
-                  aria-disabled="false"
-                  aria-selected="false"
-                  class=" ant-tabs-tab"
-                  id="tab-28"
-                  role="tab"
-                  tabindex="-1"
-                >
-                  Tab-28
-                </div>
-                <div
-                  aria-controls="tabpane-29"
-                  aria-disabled="false"
-                  aria-selected="false"
-                  class=" ant-tabs-tab"
-                  id="tab-29"
-                  role="tab"
-                  tabindex="-1"
-                >
-                  Tab-29
-                </div>
-              </div>
-              <div
-                class="ant-tabs-ink-bar ant-tabs-ink-bar-animated"
-              />
-            </div>
-          </div>
+          Content of tab 1
         </div>
+        <div
+          aria-hidden="true"
+          class="ant-tabs-tabpane"
+          role="tabpanel"
+          style="display:none"
+          tabindex="-1"
+        />
+        <div
+          aria-hidden="true"
+          class="ant-tabs-tabpane"
+          role="tabpanel"
+          style="display:none"
+          tabindex="-1"
+        />
+        <div
+          aria-hidden="true"
+          class="ant-tabs-tabpane"
+          role="tabpanel"
+          style="display:none"
+          tabindex="-1"
+        />
+        <div
+          aria-hidden="true"
+          class="ant-tabs-tabpane"
+          role="tabpanel"
+          style="display:none"
+          tabindex="-1"
+        />
+        <div
+          aria-hidden="true"
+          class="ant-tabs-tabpane"
+          role="tabpanel"
+          style="display:none"
+          tabindex="-1"
+        />
+        <div
+          aria-hidden="true"
+          class="ant-tabs-tabpane"
+          role="tabpanel"
+          style="display:none"
+          tabindex="-1"
+        />
+        <div
+          aria-hidden="true"
+          class="ant-tabs-tabpane"
+          role="tabpanel"
+          style="display:none"
+          tabindex="-1"
+        />
+        <div
+          aria-hidden="true"
+          class="ant-tabs-tabpane"
+          role="tabpanel"
+          style="display:none"
+          tabindex="-1"
+        />
+        <div
+          aria-hidden="true"
+          class="ant-tabs-tabpane"
+          role="tabpanel"
+          style="display:none"
+          tabindex="-1"
+        />
+        <div
+          aria-hidden="true"
+          class="ant-tabs-tabpane"
+          role="tabpanel"
+          style="display:none"
+          tabindex="-1"
+        />
+        <div
+          aria-hidden="true"
+          class="ant-tabs-tabpane"
+          role="tabpanel"
+          style="display:none"
+          tabindex="-1"
+        />
+        <div
+          aria-hidden="true"
+          class="ant-tabs-tabpane"
+          role="tabpanel"
+          style="display:none"
+          tabindex="-1"
+        />
+        <div
+          aria-hidden="true"
+          class="ant-tabs-tabpane"
+          role="tabpanel"
+          style="display:none"
+          tabindex="-1"
+        />
+        <div
+          aria-hidden="true"
+          class="ant-tabs-tabpane"
+          role="tabpanel"
+          style="display:none"
+          tabindex="-1"
+        />
+        <div
+          aria-hidden="true"
+          class="ant-tabs-tabpane"
+          role="tabpanel"
+          style="display:none"
+          tabindex="-1"
+        />
+        <div
+          aria-hidden="true"
+          class="ant-tabs-tabpane"
+          role="tabpanel"
+          style="display:none"
+          tabindex="-1"
+        />
+        <div
+          aria-hidden="true"
+          class="ant-tabs-tabpane"
+          role="tabpanel"
+          style="display:none"
+          tabindex="-1"
+        />
+        <div
+          aria-hidden="true"
+          class="ant-tabs-tabpane"
+          role="tabpanel"
+          style="display:none"
+          tabindex="-1"
+        />
+        <div
+          aria-hidden="true"
+          class="ant-tabs-tabpane"
+          role="tabpanel"
+          style="display:none"
+          tabindex="-1"
+        />
+        <div
+          aria-hidden="true"
+          class="ant-tabs-tabpane"
+          role="tabpanel"
+          style="display:none"
+          tabindex="-1"
+        />
+        <div
+          aria-hidden="true"
+          class="ant-tabs-tabpane"
+          role="tabpanel"
+          style="display:none"
+          tabindex="-1"
+        />
+        <div
+          aria-hidden="true"
+          class="ant-tabs-tabpane"
+          role="tabpanel"
+          style="display:none"
+          tabindex="-1"
+        />
+        <div
+          aria-hidden="true"
+          class="ant-tabs-tabpane"
+          role="tabpanel"
+          style="display:none"
+          tabindex="-1"
+        />
+        <div
+          aria-hidden="true"
+          class="ant-tabs-tabpane"
+          role="tabpanel"
+          style="display:none"
+          tabindex="-1"
+        />
+        <div
+          aria-hidden="true"
+          class="ant-tabs-tabpane"
+          role="tabpanel"
+          style="display:none"
+          tabindex="-1"
+        />
+        <div
+          aria-hidden="true"
+          class="ant-tabs-tabpane"
+          role="tabpanel"
+          style="display:none"
+          tabindex="-1"
+        />
+        <div
+          aria-hidden="true"
+          class="ant-tabs-tabpane"
+          role="tabpanel"
+          style="display:none"
+          tabindex="-1"
+        />
+        <div
+          aria-hidden="true"
+          class="ant-tabs-tabpane"
+          role="tabpanel"
+          style="display:none"
+          tabindex="-1"
+        />
       </div>
     </div>
-    <div
-      class="ant-tabs-content ant-tabs-content-animated ant-tabs-top-content"
-      style="margin-left:-100%"
-    >
-      <div
-        aria-hidden="true"
-        class="ant-tabs-tabpane ant-tabs-tabpane-inactive"
-        role="tabpanel"
-        style="visibility:hidden"
-        tabindex="-1"
-      />
-      <div
-        aria-hidden="false"
-        class="ant-tabs-tabpane ant-tabs-tabpane-active"
-        role="tabpanel"
-        style="visibility:visible"
-        tabindex="0"
-      >
-        Content of tab 1
-      </div>
-      <div
-        aria-hidden="true"
-        class="ant-tabs-tabpane ant-tabs-tabpane-inactive"
-        role="tabpanel"
-        style="visibility:hidden"
-        tabindex="-1"
-      />
-      <div
-        aria-hidden="true"
-        class="ant-tabs-tabpane ant-tabs-tabpane-inactive"
-        role="tabpanel"
-        style="visibility:hidden"
-        tabindex="-1"
-      />
-      <div
-        aria-hidden="true"
-        class="ant-tabs-tabpane ant-tabs-tabpane-inactive"
-        role="tabpanel"
-        style="visibility:hidden"
-        tabindex="-1"
-      />
-      <div
-        aria-hidden="true"
-        class="ant-tabs-tabpane ant-tabs-tabpane-inactive"
-        role="tabpanel"
-        style="visibility:hidden"
-        tabindex="-1"
-      />
-      <div
-        aria-hidden="true"
-        class="ant-tabs-tabpane ant-tabs-tabpane-inactive"
-        role="tabpanel"
-        style="visibility:hidden"
-        tabindex="-1"
-      />
-      <div
-        aria-hidden="true"
-        class="ant-tabs-tabpane ant-tabs-tabpane-inactive"
-        role="tabpanel"
-        style="visibility:hidden"
-        tabindex="-1"
-      />
-      <div
-        aria-hidden="true"
-        class="ant-tabs-tabpane ant-tabs-tabpane-inactive"
-        role="tabpanel"
-        style="visibility:hidden"
-        tabindex="-1"
-      />
-      <div
-        aria-hidden="true"
-        class="ant-tabs-tabpane ant-tabs-tabpane-inactive"
-        role="tabpanel"
-        style="visibility:hidden"
-        tabindex="-1"
-      />
-      <div
-        aria-hidden="true"
-        class="ant-tabs-tabpane ant-tabs-tabpane-inactive"
-        role="tabpanel"
-        style="visibility:hidden"
-        tabindex="-1"
-      />
-      <div
-        aria-hidden="true"
-        class="ant-tabs-tabpane ant-tabs-tabpane-inactive"
-        role="tabpanel"
-        style="visibility:hidden"
-        tabindex="-1"
-      />
-      <div
-        aria-hidden="true"
-        class="ant-tabs-tabpane ant-tabs-tabpane-inactive"
-        role="tabpanel"
-        style="visibility:hidden"
-        tabindex="-1"
-      />
-      <div
-        aria-hidden="true"
-        class="ant-tabs-tabpane ant-tabs-tabpane-inactive"
-        role="tabpanel"
-        style="visibility:hidden"
-        tabindex="-1"
-      />
-      <div
-        aria-hidden="true"
-        class="ant-tabs-tabpane ant-tabs-tabpane-inactive"
-        role="tabpanel"
-        style="visibility:hidden"
-        tabindex="-1"
-      />
-      <div
-        aria-hidden="true"
-        class="ant-tabs-tabpane ant-tabs-tabpane-inactive"
-        role="tabpanel"
-        style="visibility:hidden"
-        tabindex="-1"
-      />
-      <div
-        aria-hidden="true"
-        class="ant-tabs-tabpane ant-tabs-tabpane-inactive"
-        role="tabpanel"
-        style="visibility:hidden"
-        tabindex="-1"
-      />
-      <div
-        aria-hidden="true"
-        class="ant-tabs-tabpane ant-tabs-tabpane-inactive"
-        role="tabpanel"
-        style="visibility:hidden"
-        tabindex="-1"
-      />
-      <div
-        aria-hidden="true"
-        class="ant-tabs-tabpane ant-tabs-tabpane-inactive"
-        role="tabpanel"
-        style="visibility:hidden"
-        tabindex="-1"
-      />
-      <div
-        aria-hidden="true"
-        class="ant-tabs-tabpane ant-tabs-tabpane-inactive"
-        role="tabpanel"
-        style="visibility:hidden"
-        tabindex="-1"
-      />
-      <div
-        aria-hidden="true"
-        class="ant-tabs-tabpane ant-tabs-tabpane-inactive"
-        role="tabpanel"
-        style="visibility:hidden"
-        tabindex="-1"
-      />
-      <div
-        aria-hidden="true"
-        class="ant-tabs-tabpane ant-tabs-tabpane-inactive"
-        role="tabpanel"
-        style="visibility:hidden"
-        tabindex="-1"
-      />
-      <div
-        aria-hidden="true"
-        class="ant-tabs-tabpane ant-tabs-tabpane-inactive"
-        role="tabpanel"
-        style="visibility:hidden"
-        tabindex="-1"
-      />
-      <div
-        aria-hidden="true"
-        class="ant-tabs-tabpane ant-tabs-tabpane-inactive"
-        role="tabpanel"
-        style="visibility:hidden"
-        tabindex="-1"
-      />
-      <div
-        aria-hidden="true"
-        class="ant-tabs-tabpane ant-tabs-tabpane-inactive"
-        role="tabpanel"
-        style="visibility:hidden"
-        tabindex="-1"
-      />
-      <div
-        aria-hidden="true"
-        class="ant-tabs-tabpane ant-tabs-tabpane-inactive"
-        role="tabpanel"
-        style="visibility:hidden"
-        tabindex="-1"
-      />
-      <div
-        aria-hidden="true"
-        class="ant-tabs-tabpane ant-tabs-tabpane-inactive"
-        role="tabpanel"
-        style="visibility:hidden"
-        tabindex="-1"
-      />
-      <div
-        aria-hidden="true"
-        class="ant-tabs-tabpane ant-tabs-tabpane-inactive"
-        role="tabpanel"
-        style="visibility:hidden"
-        tabindex="-1"
-      />
-      <div
-        aria-hidden="true"
-        class="ant-tabs-tabpane ant-tabs-tabpane-inactive"
-        role="tabpanel"
-        style="visibility:hidden"
-        tabindex="-1"
-      />
-      <div
-        aria-hidden="true"
-        class="ant-tabs-tabpane ant-tabs-tabpane-inactive"
-        role="tabpanel"
-        style="visibility:hidden"
-        tabindex="-1"
-      />
-    </div>
   </div>
 </div>
 `;
diff --git a/components/tabs/__tests__/__snapshots__/index.test.js.snap b/components/tabs/__tests__/__snapshots__/index.test.js.snap
index 6f48ae3c4400..3086fb2301f3 100644
--- a/components/tabs/__tests__/__snapshots__/index.test.js.snap
+++ b/components/tabs/__tests__/__snapshots__/index.test.js.snap
@@ -2,23 +2,24 @@
 
 exports[`Tabs renderTabBar custom-tab-bar 1`] = `
 <div
-  class="ant-tabs ant-tabs-top ant-tabs-line"
+  class="ant-tabs ant-tabs-top"
 >
   <div>
     custom-tab-bar
   </div>
   <div
-    class="ant-tabs-content ant-tabs-content-animated ant-tabs-top-content"
-    style="margin-left:0%"
+    class="ant-tabs-content-holder"
   >
     <div
-      aria-hidden="false"
-      class="ant-tabs-tabpane ant-tabs-tabpane-active"
-      role="tabpanel"
-      style="visibility:visible"
-      tabindex="0"
+      class="ant-tabs-content ant-tabs-content-top"
     >
-      foo
+      <div
+        aria-hidden="true"
+        class="ant-tabs-tabpane"
+        role="tabpanel"
+        style="display:none"
+        tabindex="-1"
+      />
     </div>
   </div>
 </div>
@@ -26,217 +27,152 @@ exports[`Tabs renderTabBar custom-tab-bar 1`] = `
 
 exports[`Tabs rtl render component should be rendered correctly in RTL direction 1`] = `
 <div
-  class="ant-tabs ant-tabs-top ant-tabs-line ant-tabs-rtl"
+  class="ant-tabs ant-tabs-top ant-tabs-rtl"
 >
   <div
-    class="ant-tabs-bar ant-tabs-top-bar"
+    class="ant-tabs-nav"
     role="tablist"
-    tabindex="-1"
   >
     <div
-      class="ant-tabs-nav-container"
+      class="ant-tabs-nav-wrap"
     >
-      <span
-        class="ant-tabs-tab-prev ant-tabs-tab-btn-disabled"
-        unselectable="unselectable"
+      <div
+        class="ant-tabs-nav-list"
+        style="transform:translate(0px, 0px)"
       >
-        <span
-          class="ant-tabs-tab-prev-icon"
+        <button
+          aria-selected="false"
+          class="ant-tabs-tab"
+          role="tab"
+          tabindex="0"
+          type="button"
         >
-          <span
-            aria-label="right"
-            class="anticon anticon-right ant-tabs-tab-prev-icon-target"
-            role="img"
-          >
-            <svg
-              aria-hidden="true"
-              class=""
-              data-icon="right"
-              fill="currentColor"
-              focusable="false"
-              height="1em"
-              viewBox="64 64 896 896"
-              width="1em"
-            >
-              <path
-                d="M765.7 486.8L314.9 134.7A7.97 7.97 0 00302 141v77.3c0 4.9 2.3 9.6 6.1 12.6l360 281.1-360 281.1c-3.9 3-6.1 7.7-6.1 12.6V883c0 6.7 7.7 10.4 12.9 6.3l450.8-352.1a31.96 31.96 0 000-50.4z"
-              />
-            </svg>
-          </span>
-        </span>
-      </span>
-      <span
-        class="ant-tabs-tab-next ant-tabs-tab-btn-disabled"
-        unselectable="unselectable"
+          xx
+        </button>
+        <div
+          class="ant-tabs-ink-bar ant-tabs-ink-bar-animated"
+        />
+      </div>
+    </div>
+    <div
+      class="ant-tabs-nav-operations ant-tabs-nav-operations-hidden"
+    >
+      <button
+        aria-controls="null-more-popup"
+        aria-expanded="false"
+        aria-haspopup="listbox"
+        aria-hidden="true"
+        class="ant-tabs-nav-more"
+        id="null-more"
+        style="visibility:hidden;order:1"
+        tabindex="-1"
+        type="button"
       >
         <span
-          class="ant-tabs-tab-next-icon"
+          aria-label="ellipsis"
+          class="anticon anticon-ellipsis"
+          role="img"
         >
-          <span
-            aria-label="left"
-            class="anticon anticon-left ant-tabs-tab-next-icon-target"
-            role="img"
+          <svg
+            aria-hidden="true"
+            class=""
+            data-icon="ellipsis"
+            fill="currentColor"
+            focusable="false"
+            height="1em"
+            viewBox="64 64 896 896"
+            width="1em"
           >
-            <svg
-              aria-hidden="true"
-              class=""
-              data-icon="left"
-              fill="currentColor"
-              focusable="false"
-              height="1em"
-              viewBox="64 64 896 896"
-              width="1em"
-            >
-              <path
-                d="M724 218.3V141c0-6.7-7.7-10.4-12.9-6.3L260.3 486.8a31.86 31.86 0 000 50.3l450.8 352.1c5.3 4.1 12.9.4 12.9-6.3v-77.3c0-4.9-2.3-9.6-6.1-12.6l-360-281 360-281.1c3.8-3 6.1-7.7 6.1-12.6z"
-              />
-            </svg>
-          </span>
-        </span>
-      </span>
-      <div
-        class="ant-tabs-nav-wrap"
-      >
-        <div
-          class="ant-tabs-nav-scroll"
-        >
-          <div
-            class="ant-tabs-nav ant-tabs-nav-animated"
-          >
-            <div>
-              <div
-                aria-controls="tabpane-xx"
-                aria-disabled="false"
-                aria-selected="true"
-                class="ant-tabs-tab-active ant-tabs-tab"
-                id="tab-xx"
-                role="tab"
-                tabindex="0"
-              >
-                xx
-              </div>
-            </div>
-            <div
-              class="ant-tabs-ink-bar ant-tabs-ink-bar-animated"
+            <path
+              d="M176 511a56 56 0 10112 0 56 56 0 10-112 0zm280 0a56 56 0 10112 0 56 56 0 10-112 0zm280 0a56 56 0 10112 0 56 56 0 10-112 0z"
             />
-          </div>
-        </div>
-      </div>
+          </svg>
+        </span>
+      </button>
     </div>
   </div>
   <div
-    class="ant-tabs-content ant-tabs-content-animated ant-tabs-top-content"
-    style="margin-left:100%"
+    class="ant-tabs-content-holder"
   >
     <div
-      aria-hidden="false"
-      class="ant-tabs-tabpane ant-tabs-tabpane-active"
-      role="tabpanel"
-      style="visibility:visible"
-      tabindex="0"
-    />
+      class="ant-tabs-content ant-tabs-content-top"
+    >
+      <div
+        aria-hidden="true"
+        class="ant-tabs-tabpane"
+        role="tabpanel"
+        style="display:none"
+        tabindex="-1"
+      />
+    </div>
   </div>
 </div>
 `;
 
 exports[`Tabs tabPosition remove card 1`] = `
 <div
-  class="ant-tabs ant-tabs-left ant-tabs-vertical ant-tabs-line"
+  class="ant-tabs ant-tabs-left"
 >
   <div
-    class="ant-tabs-bar ant-tabs-left-bar"
+    class="ant-tabs-nav"
     role="tablist"
-    tabindex="-1"
   >
     <div
-      class="ant-tabs-nav-container"
+      class="ant-tabs-nav-wrap"
     >
-      <span
-        class="ant-tabs-tab-prev ant-tabs-tab-btn-disabled"
-        unselectable="unselectable"
+      <div
+        class="ant-tabs-nav-list"
+        style="transform:translate(0px, 0px)"
       >
-        <span
-          class="ant-tabs-tab-prev-icon"
+        <button
+          aria-selected="false"
+          class="ant-tabs-tab"
+          role="tab"
+          tabindex="0"
+          type="button"
         >
-          <span
-            aria-label="up"
-            class="anticon anticon-up ant-tabs-tab-prev-icon-target"
-            role="img"
-          >
-            <svg
-              aria-hidden="true"
-              class=""
-              data-icon="up"
-              fill="currentColor"
-              focusable="false"
-              height="1em"
-              viewBox="64 64 896 896"
-              width="1em"
-            >
-              <path
-                d="M890.5 755.3L537.9 269.2c-12.8-17.6-39-17.6-51.7 0L133.5 755.3A8 8 0 00140 768h75c5.1 0 9.9-2.5 12.9-6.6L512 369.8l284.1 391.6c3 4.1 7.8 6.6 12.9 6.6h75c6.5 0 10.3-7.4 6.5-12.7z"
-              />
-            </svg>
-          </span>
-        </span>
-      </span>
-      <span
-        class="ant-tabs-tab-next ant-tabs-tab-btn-disabled"
-        unselectable="unselectable"
+          foo
+        </button>
+        <div
+          class="ant-tabs-ink-bar ant-tabs-ink-bar-animated"
+        />
+      </div>
+    </div>
+    <div
+      class="ant-tabs-nav-operations ant-tabs-nav-operations-hidden"
+    >
+      <button
+        aria-controls="null-more-popup"
+        aria-expanded="false"
+        aria-haspopup="listbox"
+        aria-hidden="true"
+        class="ant-tabs-nav-more"
+        id="null-more"
+        style="visibility:hidden;order:1"
+        tabindex="-1"
+        type="button"
       >
         <span
-          class="ant-tabs-tab-next-icon"
+          aria-label="ellipsis"
+          class="anticon anticon-ellipsis"
+          role="img"
         >
-          <span
-            aria-label="down"
-            class="anticon anticon-down ant-tabs-tab-next-icon-target"
-            role="img"
+          <svg
+            aria-hidden="true"
+            class=""
+            data-icon="ellipsis"
+            fill="currentColor"
+            focusable="false"
+            height="1em"
+            viewBox="64 64 896 896"
+            width="1em"
           >
-            <svg
-              aria-hidden="true"
-              class=""
-              data-icon="down"
-              fill="currentColor"
-              focusable="false"
-              height="1em"
-              viewBox="64 64 896 896"
-              width="1em"
-            >
-              <path
-                d="M884 256h-75c-5.1 0-9.9 2.5-12.9 6.6L512 654.2 227.9 262.6c-3-4.1-7.8-6.6-12.9-6.6h-75c-6.5 0-10.3 7.4-6.5 12.7l352.6 486.1c12.8 17.6 39 17.6 51.7 0l352.6-486.1c3.9-5.3.1-12.7-6.4-12.7z"
-              />
-            </svg>
-          </span>
-        </span>
-      </span>
-      <div
-        class="ant-tabs-nav-wrap"
-      >
-        <div
-          class="ant-tabs-nav-scroll"
-        >
-          <div
-            class="ant-tabs-nav ant-tabs-nav-animated"
-          >
-            <div>
-              <div
-                aria-controls="tabpane-1"
-                aria-disabled="false"
-                aria-selected="true"
-                class="ant-tabs-tab-active ant-tabs-tab"
-                id="tab-1"
-                role="tab"
-                tabindex="0"
-              >
-                foo
-              </div>
-            </div>
-            <div
-              class="ant-tabs-ink-bar ant-tabs-ink-bar-animated"
+            <path
+              d="M176 511a56 56 0 10112 0 56 56 0 10-112 0zm280 0a56 56 0 10112 0 56 56 0 10-112 0zm280 0a56 56 0 10112 0 56 56 0 10-112 0z"
             />
-          </div>
-        </div>
-      </div>
+          </svg>
+        </span>
+      </button>
     </div>
     <div
       class="ant-tabs-extra-content"
@@ -245,17 +181,18 @@ exports[`Tabs tabPosition remove card 1`] = `
     </div>
   </div>
   <div
-    class="ant-tabs-content ant-tabs-content-animated ant-tabs-left-content"
-    style="margin-top:0%"
+    class="ant-tabs-content-holder"
   >
     <div
-      aria-hidden="false"
-      class="ant-tabs-tabpane ant-tabs-tabpane-active"
-      role="tabpanel"
-      style="visibility:visible"
-      tabindex="0"
+      class="ant-tabs-content ant-tabs-content-left"
     >
-      foo
+      <div
+        aria-hidden="true"
+        class="ant-tabs-tabpane"
+        role="tabpanel"
+        style="display:none"
+        tabindex="-1"
+      />
     </div>
   </div>
 </div>
diff --git a/components/tabs/__tests__/index.test.js b/components/tabs/__tests__/index.test.js
index 48bdc2119546..604d7fa899b2 100644
--- a/components/tabs/__tests__/index.test.js
+++ b/components/tabs/__tests__/index.test.js
@@ -37,10 +37,7 @@ describe('Tabs', () => {
     });
 
     it('add card', () => {
-      wrapper
-        .find('.ant-tabs-new-tab')
-        .hostNodes()
-        .simulate('click');
+      wrapper.find('.ant-tabs-nav-add').first().simulate('click');
       expect(handleEdit.mock.calls[0][1]).toBe('add');
     });
 
@@ -79,4 +76,13 @@ describe('Tabs', () => {
       expect(wrapper).toMatchSnapshot();
     });
   });
+
+  it('warning for onNextClick', () => {
+    const errorSpy = jest.spyOn(console, 'error').mockImplementation(() => {});
+    mount(<Tabs onNextClick={() => {}} />);
+    expect(errorSpy).toHaveBeenCalledWith(
+      'Warning: [antd: Tabs] `onPrevClick` and `onNextClick` has been removed. Please use `onTabScroll` instead.',
+    );
+    errorSpy.mockRestore();
+  });
 });
diff --git a/components/tabs/demo/basic.md b/components/tabs/demo/basic.md
index 939d03abeb5f..90d60856c562 100644
--- a/components/tabs/demo/basic.md
+++ b/components/tabs/demo/basic.md
@@ -22,7 +22,7 @@ function callback(key) {
   console.log(key);
 }
 
-ReactDOM.render(
+const Demo = () => (
   <Tabs defaultActiveKey="1" onChange={callback}>
     <TabPane tab="Tab 1" key="1">
       Content of Tab Pane 1
@@ -33,7 +33,8 @@ ReactDOM.render(
     <TabPane tab="Tab 3" key="3">
       Content of Tab Pane 3
     </TabPane>
-  </Tabs>,
-  mountNode,
+  </Tabs>
 );
+
+ReactDOM.render(<Demo />, mountNode);
 ```
diff --git a/components/tabs/demo/card-top.md b/components/tabs/demo/card-top.md
index b51f151c603c..f4bb1ae7b3cc 100644
--- a/components/tabs/demo/card-top.md
+++ b/components/tabs/demo/card-top.md
@@ -46,34 +46,22 @@ ReactDOM.render(
 .card-container p {
   margin: 0;
 }
-.card-container > .ant-tabs-card > .ant-tabs-content {
+.card-container > .ant-tabs-card .ant-tabs-content {
   height: 120px;
   margin-top: -16px;
 }
-[data-theme='compact'] .card-container > .ant-tabs-card > .ant-tabs-content {
-  height: 120px;
-  margin-top: -8px;
-}
-
-[data-theme='compact'] .card-container > .ant-tabs-card > .ant-tabs-content > .ant-tabs-tabpane,
-.card-container > .ant-tabs-card > .ant-tabs-content > .ant-tabs-tabpane {
+.card-container > .ant-tabs-card .ant-tabs-content > .ant-tabs-tabpane {
   background: #fff;
   padding: 16px;
 }
-
-[data-theme='compact'] .card-container > .ant-tabs-card > .ant-tabs-bar,
-.card-container > .ant-tabs-card > .ant-tabs-bar {
-  border-color: #fff;
+.card-container > .ant-tabs-card > .ant-tabs-nav::before {
+  display: none;
 }
-
-[data-theme='compact'] .card-container > .ant-tabs-card > .ant-tabs-bar .ant-tabs-tab,
-.card-container > .ant-tabs-card > .ant-tabs-bar .ant-tabs-tab {
+.card-container > .ant-tabs-card .ant-tabs-tab {
   border-color: transparent;
   background: transparent;
 }
-
-[data-theme='compact'] .card-container > .ant-tabs-card > .ant-tabs-bar .ant-tabs-tab-active,
-.card-container > .ant-tabs-card > .ant-tabs-bar .ant-tabs-tab-active {
+.card-container > .ant-tabs-card .ant-tabs-tab-active {
   border-color: #fff;
   background: #fff;
 }
@@ -85,21 +73,21 @@ ReactDOM.render(
   overflow: hidden;
   padding: 24px;
 }
-
-[data-theme="dark"] .card-container > .ant-tabs-card > .ant-tabs-bar .ant-tabs-tab {
+[data-theme='compact'] .card-container > .ant-tabs-card .ant-tabs-content {
+  height: 120px;
+  margin-top: -8px;
+}
+[data-theme="dark"] .card-container > .ant-tabs-card .ant-tabs-tab {
   border-color: transparent;
   background: transparent;
 }
 [data-theme="dark"] #components-tabs-demo-card-top .code-box-demo {
   background: #000;
 }
-[data-theme="dark"] .card-container > .ant-tabs-card > .ant-tabs-content > .ant-tabs-tabpane {
+[data-theme="dark"] .card-container > .ant-tabs-card .ant-tabs-content > .ant-tabs-tabpane {
   background: #141414;
 }
-[data-theme="dark"] .card-container > .ant-tabs-card > .ant-tabs-bar {
-  border-color: #141414;
-}
-[data-theme="dark"] .card-container > .ant-tabs-card > .ant-tabs-bar .ant-tabs-tab-active {
+[data-theme="dark"] .card-container > .ant-tabs-card .ant-tabs-tab-active {
   border-color: #141414;
   background: #141414;
 }
diff --git a/components/tabs/demo/slide.md b/components/tabs/demo/slide.md
index b726010ea592..39ed558739ed 100644
--- a/components/tabs/demo/slide.md
+++ b/components/tabs/demo/slide.md
@@ -41,7 +41,7 @@ class SlidingTabsDemo extends React.Component {
         </Radio.Group>
         <Tabs defaultActiveKey="1" tabPosition={mode} style={{ height: 220 }}>
           {[...Array(30).keys()].map(i => (
-            <TabPane tab={`Tab-${i}`} key={i}>
+            <TabPane tab={`Tab-${i}`} key={i} disabled={i === 28}>
               Content of tab {i}
             </TabPane>
           ))}
diff --git a/components/tabs/index.en-US.md b/components/tabs/index.en-US.md
index db469151cb50..c89d323ef72e 100644
--- a/components/tabs/index.en-US.md
+++ b/components/tabs/index.en-US.md
@@ -19,25 +19,24 @@ Ant Design has 3 types of Tabs for different situations.
 
 ### Tabs
 
-| Property | Description | Type | Default |
-| --- | --- | --- | --- |
-| activeKey | Current TabPane's key | string | - |
-| animated | Whether to change tabs with animation. Only works while `tabPosition="top"\|"bottom"` | boolean \| {inkBar:boolean, tabPane:boolean} | `true`, `false` when `type="card"` |
-| renderTabBar | replace the TabBar | (props: DefaultTabBarProps, DefaultTabBar: React.ComponentClass) => React.ReactElement | - |
-| defaultActiveKey | Initial active TabPane's key, if `activeKey` is not set. | string | - |
-| hideAdd | Hide plus icon or not. Only works while `type="editable-card"` | boolean | `false` |
-| size | preset tab bar size | `large` \| `default` \| `small` | `default` |
-| tabBarExtraContent | Extra content in tab bar | React.ReactNode | - |
-| tabBarGutter | The gap between tabs | number | - |
-| tabBarStyle | Tab bar style object | object | - |
-| tabPosition | Position of tabs | `top` \| `right` \| `bottom` \| `left` | `top` |
-| type | Basic style of tabs | `line` \| `card` \| `editable-card` | `line` |
-| onChange | Callback executed when active tab is changed | Function(activeKey) {} | - |
-| onEdit | Callback executed when tab is added or removed. Only works while `type="editable-card"` | (targetKey, action): void | - |
-| onNextClick | Callback executed when next button is clicked | Function | - |
-| onPrevClick | Callback executed when prev button is clicked | Function | - |
-| onTabClick | Callback executed when tab is clicked | Function(key: string, event: MouseEvent) | - |
-| keyboard | whether to turn on keyboard navigation | boolean | true |
+| Property | Description | Type | Default | Version |
+| --- | --- | --- | --- | --- |
+| activeKey | Current TabPane's key | string | - |  |
+| animated | Whether to change tabs with animation. Only works while `tabPosition="top"\|"bottom"` | boolean \| {inkBar:boolean, tabPane:boolean} | `true`, `false` when `type="card"` |  |
+| renderTabBar | replace the TabBar | (props: DefaultTabBarProps, DefaultTabBar: React.ComponentClass) => React.ReactElement | - |  |
+| defaultActiveKey | Initial active TabPane's key, if `activeKey` is not set. | string | - |  |
+| hideAdd | Hide plus icon or not. Only works while `type="editable-card"` | boolean | `false` |  |
+| size | preset tab bar size | `large` \| `default` \| `small` | `default` |  |
+| tabBarExtraContent | Extra content in tab bar | React.ReactNode | - |  |
+| tabBarGutter | The gap between tabs | number | - |  |
+| tabBarStyle | Tab bar style object | object | - |  |
+| tabPosition | Position of tabs | `top` \| `right` \| `bottom` \| `left` | `top` |  |
+| type | Basic style of tabs | `line` \| `card` \| `editable-card` | `line` |  |
+| onChange | Callback executed when active tab is changed | Function(activeKey) {} | - |  |
+| onEdit | Callback executed when tab is added or removed. Only works while `type="editable-card"` | (targetKey, action): void | - |  |
+| onTabClick | Callback executed when tab is clicked | Function(key: string, event: MouseEvent) | - |  |
+| onTabScroll | Trigger when tab scroll | Function({ direction: 'left' \| 'right' \| 'top' \| 'bottom' }) | - | 4.3.0 |
+| keyboard | whether to turn on keyboard navigation | boolean | true |  |
 
 More option at [rc-tabs option](https://github.com/react-component/tabs#tabs)
 
diff --git a/components/tabs/index.tsx b/components/tabs/index.tsx
index b52fae8a3b31..715ca099495f 100755
--- a/components/tabs/index.tsx
+++ b/components/tabs/index.tsx
@@ -1,205 +1,65 @@
 import * as React from 'react';
-import * as ReactDOM from 'react-dom';
-import RcTabs, { TabPane } from 'rc-tabs';
-import TabContent from 'rc-tabs/lib/TabContent';
+import RcTabs, { TabPane, TabsProps as RcTabsProps } from 'rc-tabs';
+import { EditableConfig } from 'rc-tabs/lib/interface';
 import classNames from 'classnames';
-import omit from 'omit.js';
-import CloseOutlined from '@ant-design/icons/CloseOutlined';
+import EllipsisOutlined from '@ant-design/icons/EllipsisOutlined';
 import PlusOutlined from '@ant-design/icons/PlusOutlined';
-import TabBar from './TabBar';
+import CloseOutlined from '@ant-design/icons/CloseOutlined';
 
-import { ConfigConsumer, ConfigConsumerProps } from '../config-provider';
-import { isFlexSupported } from '../_util/styleChecker';
-import { cloneElement, isValidElement } from '../_util/reactNode';
+import devWarning from '../_util/devWarning';
+import { ConfigContext } from '../config-provider';
+import { SizeType } from '../config-provider/SizeContext';
 
 export type TabsType = 'line' | 'card' | 'editable-card';
 export type TabsPosition = 'top' | 'right' | 'bottom' | 'left';
 
-export interface TabsProps {
-  activeKey?: string;
-  defaultActiveKey?: string;
-  hideAdd?: boolean;
-  onChange?: (activeKey: string) => void;
-  onTabClick?: Function;
-  onPrevClick?: React.MouseEventHandler<HTMLElement>;
-  onNextClick?: React.MouseEventHandler<HTMLElement>;
-  tabBarExtraContent?: React.ReactNode | null;
-  tabBarStyle?: React.CSSProperties;
+export interface TabsProps extends Omit<RcTabsProps, 'editable'> {
   type?: TabsType;
-  tabPosition?: TabsPosition;
-  onEdit?: (targetKey: string | React.MouseEvent<HTMLElement>, action: 'add' | 'remove') => void;
-  size?: 'large' | 'default' | 'small';
-  style?: React.CSSProperties;
-  prefixCls?: string;
-  className?: string;
-  animated?: boolean | { inkBar: boolean; tabPane: boolean };
-  tabBarGutter?: number;
-  renderTabBar?: (
-    props: TabsProps,
-    DefaultTabBar: React.ComponentClass<any>,
-  ) => React.ReactElement<any>;
-  destroyInactiveTabPane?: boolean;
-  keyboard?: boolean;
-}
-
-// Tabs
-export interface TabPaneProps {
-  /** 选项卡头显示文字 */
-  tab?: React.ReactNode | string;
-  style?: React.CSSProperties;
-  closable?: boolean;
-  className?: string;
-  disabled?: boolean;
-  forceRender?: boolean;
-  key?: string;
-  closeIcon?: React.ReactNode;
+  size?: SizeType;
+  hideAdd?: boolean;
+  onEdit?: (e: React.MouseEvent | React.KeyboardEvent | string, action: 'add' | 'remove') => void;
 }
 
-export default class Tabs extends React.Component<TabsProps, any> {
-  static TabPane = TabPane as React.ClassicComponentClass<TabPaneProps>;
-
-  static defaultProps = {
-    hideAdd: false,
-    tabPosition: 'top' as TabsPosition,
-  };
-
-  componentDidMount() {
-    const NO_FLEX = ' no-flex';
-    const tabNode = ReactDOM.findDOMNode(this) as Element;
-    if (tabNode && !isFlexSupported && tabNode.className.indexOf(NO_FLEX) === -1) {
-      tabNode.className += NO_FLEX;
-    }
+function Tabs({ type, className, size, onEdit, hideAdd, ...props }: TabsProps) {
+  const { prefixCls: customizePrefixCls } = props;
+  const { getPrefixCls, direction } = React.useContext(ConfigContext);
+  const prefixCls = getPrefixCls('tabs', customizePrefixCls);
+
+  let editable: EditableConfig | undefined;
+  if (type === 'editable-card') {
+    editable = {
+      onEdit: (editType, { key, event }) => {
+        onEdit?.(editType === 'add' ? event : key!, editType);
+      },
+      removeIcon: <CloseOutlined />,
+      addIcon: <PlusOutlined />,
+      showAdd: hideAdd !== false,
+    };
   }
 
-  removeTab = (targetKey: string, e: React.MouseEvent<HTMLElement>) => {
-    e.stopPropagation();
-    if (!targetKey) {
-      return;
-    }
-
-    const { onEdit } = this.props;
-    if (onEdit) {
-      onEdit(targetKey, 'remove');
-    }
-  };
-
-  handleChange = (activeKey: string) => {
-    const { onChange } = this.props;
-    if (onChange) {
-      onChange(activeKey);
-    }
-  };
-
-  createNewTab = (targetKey: React.MouseEvent<HTMLElement>) => {
-    const { onEdit } = this.props;
-    if (onEdit) {
-      onEdit(targetKey, 'add');
-    }
-  };
-
-  renderTabs = ({ getPrefixCls, direction }: ConfigConsumerProps) => {
-    const {
-      prefixCls: customizePrefixCls,
-      className = '',
-      size,
-      type = 'line',
-      tabPosition,
-      children,
-      animated = true,
-      hideAdd,
-    } = this.props;
-    let { tabBarExtraContent } = this.props;
-
-    let tabPaneAnimated = typeof animated === 'object' ? animated.tabPane : animated;
-
-    // card tabs should not have animation
-    if (type !== 'line') {
-      tabPaneAnimated = 'animated' in this.props ? tabPaneAnimated : false;
-    }
-
-    const prefixCls = getPrefixCls('tabs', customizePrefixCls);
-    const cls = classNames(className, {
-      [`${prefixCls}-vertical`]: tabPosition === 'left' || tabPosition === 'right',
-      [`${prefixCls}-${size}`]: !!size,
-      [`${prefixCls}-card`]: type.indexOf('card') >= 0,
-      [`${prefixCls}-${type}`]: true,
-      [`${prefixCls}-no-animation`]: !tabPaneAnimated,
-    });
-    // only card type tabs can be added and closed
-    let childrenWithClose: React.ReactElement<any>[] = [];
-    if (type === 'editable-card') {
-      childrenWithClose = [];
-      React.Children.forEach(children as React.ReactNode, (child, index) => {
-        if (!isValidElement(child)) return child;
-        let { closable } = child.props;
-        const { closeIcon: customCloseIcon } = child.props;
-        closable = typeof closable === 'undefined' ? true : closable;
-        const customIcon = customCloseIcon ? (
-          React.cloneElement(customCloseIcon, {
-            className: `${prefixCls}-close-x`,
-            onClick: e => this.removeTab(child.key as string, e),
-          })
-        ) : (
-          <CloseOutlined
-            className={`${prefixCls}-close-x`}
-            onClick={e => this.removeTab(child.key as string, e)}
-          />
-        );
-        const closeIcon = closable ? customIcon : null;
-        childrenWithClose.push(
-          cloneElement(child, {
-            tab: (
-              <div className={closable ? undefined : `${prefixCls}-tab-unclosable`}>
-                {child.props.tab}
-                {closeIcon}
-              </div>
-            ),
-            key: child.key || index,
-          }),
-        );
-      });
-      // Add new tab handler
-      if (!hideAdd) {
-        tabBarExtraContent = (
-          <span>
-            <PlusOutlined className={`${prefixCls}-new-tab`} onClick={this.createNewTab} />
-            {tabBarExtraContent}
-          </span>
-        );
-      }
-    }
-
-    tabBarExtraContent = tabBarExtraContent ? (
-      <div className={`${prefixCls}-extra-content`}>{tabBarExtraContent}</div>
-    ) : null;
-
-    const { ...tabBarProps } = this.props;
-    const contentCls: string = classNames(
-      `${prefixCls}-${tabPosition}-content`,
-      type.indexOf('card') >= 0 && `${prefixCls}-card-content`,
-    );
+  devWarning(
+    !('onPrevClick' in props) && !('onNextClick' in props),
+    'Tabs',
+    '`onPrevClick` and `onNextClick` has been removed. Please use `onTabScroll` instead.',
+  );
+
+  return (
+    <RcTabs
+      direction={direction}
+      {...props}
+      moreTransitionName="slide-up"
+      className={classNames(className, {
+        [`${prefixCls}-${size}`]: size,
+        [`${prefixCls}-card`]: ['card', 'editable-card'].includes(type as string),
+        [`${prefixCls}-editable-card`]: type === 'editable-card',
+      })}
+      editable={editable}
+      moreIcon={<EllipsisOutlined />}
+      prefixCls={prefixCls}
+    />
+  );
+}
 
-    return (
-      <RcTabs
-        {...this.props}
-        prefixCls={prefixCls}
-        className={cls}
-        tabBarPosition={tabPosition}
-        direction={direction}
-        renderTabBar={() => (
-          <TabBar {...omit(tabBarProps, ['className'])} tabBarExtraContent={tabBarExtraContent} />
-        )}
-        renderTabContent={() => (
-          <TabContent className={contentCls} animated={tabPaneAnimated} animatedWithMargin />
-        )}
-        onChange={this.handleChange}
-      >
-        {childrenWithClose.length > 0 ? childrenWithClose : children}
-      </RcTabs>
-    );
-  };
+Tabs.TabPane = TabPane;
 
-  render() {
-    return <ConfigConsumer>{this.renderTabs}</ConfigConsumer>;
-  }
-}
+export default Tabs;
diff --git a/components/tabs/index.zh-CN.md b/components/tabs/index.zh-CN.md
index 3398383fce11..6d30026c461e 100644
--- a/components/tabs/index.zh-CN.md
+++ b/components/tabs/index.zh-CN.md
@@ -22,25 +22,24 @@ Ant Design 依次提供了三级选项卡，分别用于不同的场景。
 
 ### Tabs
 
-| 参数 | 说明 | 类型 | 默认值 |
-| --- | --- | --- | --- |
-| activeKey | 当前激活 tab 面板的 key | string | 无 |
-| animated | 是否使用动画切换 Tabs，在 `tabPosition=top|bottom` 时有效 | boolean \| {inkBar:boolean, tabPane:boolean} | true, 当 type="card" 时为 false |
-| renderTabBar | 替换 TabBar，用于二次封装标签头 | (props: DefaultTabBarProps, DefaultTabBar: React.ComponentClass) => React.ReactElement | 无 |
-| defaultActiveKey | 初始化选中面板的 key，如果没有设置 activeKey | string | 第一个面板 |
-| hideAdd | 是否隐藏加号图标，在 `type="editable-card"` 时有效 | boolean | false |
-| size | 大小，提供 `large` `default` 和 `small` 三种大小 | string | 'default' |
-| tabBarExtraContent | tab bar 上额外的元素 | React.ReactNode | 无 |
-| tabBarGutter | tabs 之间的间隙 | number | 无 |
-| tabBarStyle | tab bar 的样式对象 | object | - |
-| tabPosition | 页签位置，可选值有 `top` `right` `bottom` `left` | string | 'top' |
-| type | 页签的基本样式，可选 `line`、`card` `editable-card` 类型 | string | 'line' |
-| onChange | 切换面板的回调 | Function(activeKey) {} | 无 |
-| onEdit | 新增和删除页签的回调，在 `type="editable-card"` 时有效 | (targetKey, action): void | 无 |
-| onNextClick | next 按钮被点击的回调 | Function | 无 |
-| onPrevClick | prev 按钮被点击的回调 | Function | 无 |
-| onTabClick | tab 被点击的回调 | Function(key: string, event: MouseEvent) | 无 |
-| keyboard | 开启键盘切换功能 | boolean | true |
+| 参数 | 说明 | 类型 | 默认值 | 版本 |
+| --- | --- | --- | --- | --- |
+| activeKey | 当前激活 tab 面板的 key | string | - |  |
+| animated | 是否使用动画切换 Tabs，在 `tabPosition=top|bottom` 时有效 | boolean \| {inkBar:boolean, tabPane:boolean} | true, 当 type="card" 时为 false |  |
+| renderTabBar | 替换 TabBar，用于二次封装标签头 | (props: DefaultTabBarProps, DefaultTabBar: React.ComponentClass) => React.ReactElement | - |  |
+| defaultActiveKey | 初始化选中面板的 key，如果没有设置 activeKey | string | 第一个面板 |  |
+| hideAdd | 是否隐藏加号图标，在 `type="editable-card"` 时有效 | boolean | false |  |
+| size | 大小，提供 `large` `default` 和 `small` 三种大小 | string | 'default' |  |
+| tabBarExtraContent | tab bar 上额外的元素 | React.ReactNode | - |  |
+| tabBarGutter | tabs 之间的间隙 | number | - |  |
+| tabBarStyle | tab bar 的样式对象 | object | - |  |
+| tabPosition | 页签位置，可选值有 `top` `right` `bottom` `left` | string | 'top' |  |
+| type | 页签的基本样式，可选 `line`、`card` `editable-card` 类型 | string | 'line' |  |
+| onChange | 切换面板的回调 | Function(activeKey) {} | - |  |
+| onEdit | 新增和删除页签的回调，在 `type="editable-card"` 时有效 | (targetKey, action): void | - |  |
+| onTabClick | tab 被点击的回调 | Function(key: string, event: MouseEvent) | - |  |
+| onTabScroll | tab 滚动时触发 | Function({ direction: 'left' \| 'right' \| 'top' \| 'bottom' }) | - | 4.3.0 |
+| keyboard | 开启键盘切换功能 | boolean | true |  |
 
 ### Tabs.TabPane
 
diff --git a/components/tabs/style/card-style.less b/components/tabs/style/card-style.less
deleted file mode 100644
index 3a7d89da21b1..000000000000
--- a/components/tabs/style/card-style.less
+++ /dev/null
@@ -1,181 +0,0 @@
-@import '../../style/themes/index';
-@import '../../style/mixins/index';
-
-@tab-prefix-cls: ~'@{ant-prefix}-tabs';
-
-// card style
-.@{tab-prefix-cls} {
-  &&-card &-card-bar &-ink-bar {
-    visibility: hidden;
-  }
-  &&-card &-card-bar &-tab {
-    margin: 0;
-    margin-right: @tabs-card-gutter;
-    padding: @tabs-card-horizontal-padding;
-    line-height: 22px;
-    background: @tabs-card-head-background;
-    border: @border-width-base @border-style-base @border-color-split;
-    border-radius: @border-radius-base @border-radius-base 0 0;
-    transition: all 0.3s @ease-in-out;
-  }
-  &&-card &-card-bar &-tab-active {
-    color: @tabs-card-active-color;
-    background: @component-background;
-    border-color: @border-color-split;
-    border-bottom: @border-width-base solid @component-background;
-
-    &::before {
-      border-top: @tabs-card-tab-active-border-top;
-    }
-  }
-  &&-small &-card-bar &-tab {
-    padding: @tabs-card-horizontal-padding-sm;
-  }
-  &&-card &-card-bar &-tab-disabled {
-    color: @disabled-color;
-  }
-  &&-card &-card-bar &-tab-inactive {
-    padding: 0;
-  }
-  &&-card &-card-bar &-nav-wrap {
-    margin-bottom: 0;
-  }
-  &&-card &-card-bar &-tab &-close-x {
-    width: 16px;
-    height: @font-size-base;
-    margin-right: -5px;
-    margin-left: 3px;
-    overflow: hidden;
-    color: @text-color-secondary;
-    font-size: @font-size-sm;
-    vertical-align: middle;
-    transition: all 0.3s;
-    &:hover {
-      color: @heading-color;
-    }
-  }
-
-  &&-card &-card-content > &-tabpane,
-  &&-editable-card &-card-content > &-tabpane {
-    transition: none !important;
-    &-inactive {
-      overflow: hidden;
-    }
-  }
-
-  &&-card &-card-bar &-tab:hover .@{iconfont-css-prefix}-close {
-    opacity: 1;
-  }
-
-  &-extra-content {
-    line-height: @tabs-title-font-size * @line-height-base + extract(@tabs-horizontal-padding, 1) *
-      2;
-
-    .@{tab-prefix-cls}-new-tab {
-      position: relative;
-      width: 20px;
-      height: 20px;
-      color: @text-color;
-      font-size: 12px;
-      line-height: 20px;
-      text-align: center;
-      border: @border-width-base @border-style-base @border-color-split;
-      border-radius: @border-radius-base;
-      cursor: pointer;
-      transition: all 0.3s;
-      &:hover {
-        color: @tabs-card-active-color;
-        border-color: @tabs-card-active-color;
-      }
-      svg {
-        position: absolute;
-        top: 0;
-        right: 0;
-        bottom: 0;
-        left: 0;
-        margin: auto;
-      }
-    }
-  }
-
-  // https://github.com/ant-design/ant-design/issues/17865
-  &&-large &-extra-content {
-    line-height: @tabs-title-font-size-lg * @line-height-base +
-      extract(@tabs-horizontal-padding-lg, 1) * 2;
-  }
-
-  // https://github.com/ant-design/ant-design/issues/17865
-  &&-small &-extra-content {
-    line-height: @tabs-title-font-size-sm * @line-height-base +
-      extract(@tabs-horizontal-padding-sm, 1) * 2;
-  }
-
-  // https://github.com/ant-design/ant-design/issues/17865
-  &&-card &-extra-content {
-    line-height: @tabs-card-height;
-  }
-
-  // https://github.com/ant-design/ant-design/issues/4669
-  &-vertical&-card &-card-bar&-left-bar,
-  &-vertical&-card &-card-bar&-right-bar {
-    .@{tab-prefix-cls}-nav-container {
-      height: 100%;
-    }
-    .@{tab-prefix-cls}-tab {
-      margin-bottom: @margin-sm;
-      border-bottom: @border-width-base @border-style-base @border-color-split;
-      &-active {
-        padding-bottom: 4px;
-      }
-      &:last-child {
-        margin-bottom: @margin-sm;
-      }
-    }
-    .@{tab-prefix-cls}-new-tab {
-      width: 90%;
-    }
-  }
-
-  &-vertical&-card&-left &-card-bar&-left-bar {
-    .@{tab-prefix-cls}-nav-wrap {
-      margin-right: 0;
-    }
-    .@{tab-prefix-cls}-tab {
-      margin-right: 1px;
-      border-right: 0;
-      border-radius: @border-radius-base 0 0 @border-radius-base;
-      &-active {
-        margin-right: -1px;
-        padding-right: @padding-md + 2px;
-      }
-    }
-  }
-
-  &-vertical&-card&-right &-card-bar&-right-bar {
-    .@{tab-prefix-cls}-nav-wrap {
-      margin-left: 0;
-    }
-    .@{tab-prefix-cls}-tab {
-      margin-left: 1px;
-      border-left: 0;
-      border-radius: 0 @border-radius-base @border-radius-base 0;
-      &-active {
-        margin-left: -1px;
-        padding-left: @padding-md + 2px;
-      }
-    }
-  }
-
-  // https://github.com/ant-design/ant-design/issues/9104
-  & &-card-bar&-bottom-bar &-tab {
-    height: auto;
-    border-top-color: @border-color-split;
-    border-bottom: @border-width-base @border-style-base @border-color-split;
-    border-radius: 0 0 @border-radius-base @border-radius-base;
-  }
-
-  & &-card-bar&-bottom-bar &-tab-active {
-    color: @primary-color;
-    border-top-color: @component-background;
-  }
-}
diff --git a/components/tabs/style/card.less b/components/tabs/style/card.less
new file mode 100644
index 000000000000..80820141e99d
--- /dev/null
+++ b/components/tabs/style/card.less
@@ -0,0 +1,90 @@
+@import '../../style/themes/index';
+@import '../../style/mixins/index';
+@import './index';
+
+.@{tab-prefix-cls}-card {
+  > .@{tab-prefix-cls}-nav {
+    .@{tab-prefix-cls}-tab {
+      margin: 0;
+      padding: @tabs-card-horizontal-padding;
+      background: @tabs-card-head-background;
+      border: @border-width-base @border-style-base @border-color-split;
+      transition: all @animation-duration-slow @ease-in-out;
+
+      &-active {
+        color: @tabs-card-active-color;
+        background: @component-background;
+      }
+    }
+
+    .@{tab-prefix-cls}-ink-bar {
+      visibility: hidden;
+    }
+  }
+
+  // ========================== Top & Bottom ==========================
+  &.@{tab-prefix-cls}-top,
+  &.@{tab-prefix-cls}-bottom {
+    > .@{tab-prefix-cls}-nav {
+      .@{tab-prefix-cls}-tab:not(:last-of-type) {
+        margin-right: @tabs-card-gutter;
+      }
+    }
+  }
+
+  &.@{tab-prefix-cls}-top {
+    > .@{tab-prefix-cls}-nav {
+      .@{tab-prefix-cls}-tab {
+        border-radius: @border-radius-base @border-radius-base 0 0;
+
+        &-active {
+          border-bottom-color: @component-background;
+        }
+      }
+    }
+  }
+  &.@{tab-prefix-cls}-bottom {
+    > .@{tab-prefix-cls}-nav {
+      .@{tab-prefix-cls}-tab {
+        border-radius: 0 0 @border-radius-base @border-radius-base;
+
+        &-active {
+          border-top-color: @component-background;
+        }
+      }
+    }
+  }
+
+  // ========================== Left & Right ==========================
+  &.@{tab-prefix-cls}-left,
+  &.@{tab-prefix-cls}-right {
+    > .@{tab-prefix-cls}-nav {
+      .@{tab-prefix-cls}-tab:not(:last-of-type) {
+        margin-bottom: @tabs-card-gutter;
+      }
+    }
+  }
+
+  &.@{tab-prefix-cls}-left {
+    > .@{tab-prefix-cls}-nav {
+      .@{tab-prefix-cls}-tab {
+        border-radius: @border-radius-base 0 0 @border-radius-base;
+
+        &-active {
+          border-right-color: @component-background;
+        }
+      }
+    }
+  }
+  &.@{tab-prefix-cls}-right {
+    > .@{tab-prefix-cls}-nav {
+      .@{tab-prefix-cls}-tab {
+        border-radius: 0 @border-radius-base @border-radius-base 0;
+
+        &-active {
+          border-left-color: @component-background;
+        }
+      }
+    }
+  }
+}
diff --git a/components/tabs/style/dropdown.less b/components/tabs/style/dropdown.less
new file mode 100644
index 000000000000..a844c839e651
--- /dev/null
+++ b/components/tabs/style/dropdown.less
@@ -0,0 +1,59 @@
+@import '../../style/themes/index';
+@import '../../style/mixins/index';
+@import './index';
+
+.@{tab-prefix-cls}-dropdown {
+  .reset-component;
+
+  position: absolute;
+  top: -9999px;
+  left: -9999px;
+  z-index: @zindex-dropdown;
+  display: block;
+
+  &-hidden {
+    display: none;
+  }
+
+  &-menu {
+    max-height: 200px;
+    margin: 0;
+    padding: @dropdown-edge-child-vertical-padding 0;
+    overflow-y: auto;
+    text-align: left;
+    list-style-type: none;
+    background-color: @dropdown-menu-bg;
+    background-clip: padding-box;
+    border-radius: @border-radius-base;
+    outline: none;
+    box-shadow: @box-shadow-base;
+
+    &-item {
+      width: 120px;
+      margin: 0;
+      padding: @dropdown-vertical-padding @control-padding-horizontal;
+      overflow: hidden;
+      color: @text-color;
+      font-weight: normal;
+      font-size: @dropdown-font-size;
+      line-height: @dropdown-line-height;
+      white-space: nowrap;
+      text-overflow: ellipsis;
+      cursor: pointer;
+      transition: all 0.3s;
+
+      &:hover {
+        background: @item-hover-bg;
+      }
+
+      &-disabled {
+        &,
+        &:hover {
+          color: @disabled-color;
+          background: transparent;
+          cursor: not-allowed;
+        }
+      }
+    }
+  }
+}
diff --git a/components/tabs/style/index.less b/components/tabs/style/index.less
index 2a138d0afcff..5227ecb7b0c9 100644
--- a/components/tabs/style/index.less
+++ b/components/tabs/style/index.less
@@ -1,442 +1,195 @@
 @import '../../style/themes/index';
 @import '../../style/mixins/index';
-@import './card-style';
+@import './size';
+@import './rtl';
+@import './position';
+@import './dropdown';
+@import './card';
 
 @tab-prefix-cls: ~'@{ant-prefix}-tabs';
 
-// Hidden content
-.tabs-hidden-content() {
-  height: 0;
-  padding: 0 !important;
-  overflow: hidden;
-  opacity: 0;
-  pointer-events: none;
-  input {
-    visibility: hidden;
-  }
-}
-
 .@{tab-prefix-cls} {
   .reset-component;
 
-  position: relative;
+  display: flex;
   overflow: hidden;
-  .clearfix;
-
-  &-ink-bar {
-    position: absolute;
-    bottom: 1px;
-    left: 0;
-    z-index: 1;
-    box-sizing: border-box;
-    width: 0;
-    height: 2px;
-    background-color: @tabs-ink-bar-color;
-    transform-origin: 0 0;
-  }
-
-  &-bar {
-    margin: @tabs-bar-margin;
-    border-bottom: @border-width-base @border-style-base @border-color-split;
-    outline: none;
-    transition: padding 0.3s @ease-in-out;
-  }
 
-  &-nav-container {
+  // ========================== Navigation ==========================
+  > .@{tab-prefix-cls}-nav {
     position: relative;
-    box-sizing: border-box;
-    margin-bottom: -1px;
-    overflow: hidden;
-    font-size: @tabs-title-font-size;
-    line-height: @line-height-base;
-    white-space: nowrap;
-    transition: padding 0.3s @ease-in-out;
-    .clearfix;
-
-    &-scrolling {
-      padding-right: @tabs-scrolling-size;
-      padding-left: @tabs-scrolling-size;
-    }
-  }
-
-  // https://github.com/ant-design/ant-design/issues/9104
-  &-bottom &-bottom-bar {
-    margin-top: @margin-md;
-    margin-bottom: 0;
-    border-top: @border-width-base @border-style-base @border-color-split;
-    border-bottom: none;
-  }
-
-  &-bottom &-bottom-bar &-ink-bar {
-    top: 1px;
-    bottom: auto;
-  }
-
-  &-bottom &-bottom-bar &-nav-container {
-    margin-top: -1px;
-    margin-bottom: 0;
-  }
-
-  &-tab-prev,
-  &-tab-next {
-    position: absolute;
-    z-index: 2;
-    width: 0;
-    height: 100%;
-    color: @text-color-secondary;
-    text-align: center;
-    background-color: transparent;
-    border: 0;
-    cursor: pointer;
-    opacity: 0;
-    transition: width 0.3s @ease-in-out, opacity 0.3s @ease-in-out, color 0.3s @ease-in-out;
-    user-select: none;
-    pointer-events: none;
-
-    &.@{tab-prefix-cls}-tab-arrow-show {
-      width: @tabs-scrolling-size;
-      height: 100%;
-      opacity: 1;
-      pointer-events: auto;
-    }
-
-    &:hover {
-      color: @text-color;
-    }
-
-    &-icon {
-      position: absolute;
-      top: 50%;
-      left: 50%;
-      font-weight: bold;
-      font-style: normal;
-      font-variant: normal;
-      line-height: inherit;
-      text-align: center;
-      text-transform: none;
-      transform: translate(-50%, -50%);
+    display: flex;
+    flex: none;
+    align-items: center;
 
-      &-target {
-        display: block;
-        .iconfont-size-under-12px(10px);
+    .@{tab-prefix-cls}-nav-wrap {
+      position: relative;
+      display: inline-block;
+      display: flex;
+      flex: auto;
+      overflow: hidden;
+      white-space: nowrap;
+      transform: translate(0); // Fix chrome render bug
+
+      // >>>>> Ping shadow
+      &::before,
+      &::after {
+        position: absolute;
+        z-index: 1;
+        opacity: 0;
+        transition: opacity @animation-duration-slow;
+        content: '';
+        pointer-events: none;
       }
     }
-  }
-
-  &-tab-btn-disabled {
-    cursor: not-allowed;
-    &,
-    &:hover {
-      color: @disabled-color;
-    }
-  }
 
-  &-tab-next {
-    right: 2px;
-  }
-
-  &-tab-prev {
-    left: 0;
-
-    :root & {
-      filter: none;
+    .@{tab-prefix-cls}-nav-list {
+      position: relative;
+      display: flex;
+      transition: transform @animation-duration-slow;
     }
-  }
-
-  &-nav-wrap {
-    margin-bottom: -1px;
-    overflow: hidden;
-  }
-
-  &-nav-scroll {
-    overflow: hidden;
-    white-space: nowrap;
-  }
-
-  &-nav {
-    position: relative;
-    display: inline-block;
-    box-sizing: border-box;
-    margin: 0;
-    padding-left: 0;
-    list-style: none;
-    transition: transform 0.3s @ease-in-out;
 
-    &::before,
-    &::after {
-      display: table;
-      content: ' ';
-    }
+    // >>>>>>>> Operations
+    .@{tab-prefix-cls}-nav-operations {
+      display: flex;
+      align-self: stretch;
 
-    &::after {
-      clear: both;
+      &-hidden {
+        position: absolute;
+        visibility: hidden;
+        pointer-events: none;
+      }
     }
 
-    .@{tab-prefix-cls}-tab {
+    .@{tab-prefix-cls}-nav-more {
       position: relative;
-      display: inline-block;
-      box-sizing: border-box;
-      height: 100%;
-      margin: @tabs-horizontal-margin;
-      padding: @tabs-horizontal-padding;
-      text-decoration: none;
-      cursor: pointer;
-      transition: color 0.3s @ease-in-out;
+      padding: @tabs-card-horizontal-padding;
+      background: transparent;
+      border: 0;
 
-      &::before {
+      &::after {
         position: absolute;
-        top: -1px;
+        right: 0;
+        bottom: 0;
         left: 0;
-        width: 100%;
-        border-top: 2px solid transparent;
-        border-radius: @border-radius-base @border-radius-base 0 0;
-        transition: all 0.3s;
+        height: 5px;
+        transform: translateY(100%);
         content: '';
-        pointer-events: none;
       }
+    }
 
-      &:last-child {
-        margin-right: 0;
-      }
+    .@{tab-prefix-cls}-nav-add {
+      padding: 0 @padding-xs;
+      background: @tabs-card-head-background;
+      border: @border-width-base @border-style-base @border-color-split;
+      border-radius: @border-radius-base @border-radius-base 0 0;
+      outline: none;
+      cursor: pointer;
+      transition: all @animation-duration-slow @ease-in-out;
 
       &:hover {
         color: @tabs-hover-color;
       }
 
-      &:active {
+      &:active,
+      &:focus {
         color: @tabs-active-color;
       }
-
-      .@{iconfont-css-prefix} {
-        margin-right: @margin-sm;
-      }
-
-      &-active {
-        color: @tabs-highlight-color;
-        font-weight: 500;
-        outline: none;
-      }
-
-      &-disabled {
-        &,
-        &:hover {
-          color: @disabled-color;
-          cursor: not-allowed;
-        }
-      }
     }
   }
 
-  .@{tab-prefix-cls}-large-bar {
-    .@{tab-prefix-cls}-nav-container {
-      font-size: @tabs-title-font-size-lg;
-    }
-    .@{tab-prefix-cls}-tab {
-      padding: @tabs-horizontal-padding-lg;
-    }
-  }
-
-  .@{tab-prefix-cls}-small-bar {
-    .@{tab-prefix-cls}-nav-container {
-      font-size: @tabs-title-font-size-sm;
-    }
-    .@{tab-prefix-cls}-tab {
-      padding: @tabs-horizontal-padding-sm;
-    }
+  &-extra-content {
+    flex: none;
   }
 
-  // Create an empty element to avoid margin collapsing
-  // https://github.com/ant-design/ant-design/issues/18103
-  &-content::before {
-    display: block;
-    overflow: hidden;
-    content: '';
+  // ============================ InkBar ============================
+  &-ink-bar {
+    position: absolute;
+    background: @tabs-ink-bar-color;
+    pointer-events: none;
   }
 
-  .@{tab-prefix-cls}-tabpane {
+  // ============================= Tabs =============================
+  &-tab {
+    position: relative;
+    display: inline-flex;
+    align-items: center;
+    margin: @tabs-horizontal-margin;
+    padding: @tabs-horizontal-padding;
+    font-size: @tabs-title-font-size;
+    background: transparent;
+    border: 0;
     outline: none;
-  }
-
-  // Horizontal Content
-  .@{tab-prefix-cls}-top-content,
-  .@{tab-prefix-cls}-bottom-content {
-    width: 100%;
-    > .@{tab-prefix-cls}-tabpane {
-      flex-shrink: 0;
-      width: 100%;
-      -webkit-backface-visibility: hidden;
-      opacity: 1;
-      transition: opacity 0.45s;
-    }
-
-    > .@{tab-prefix-cls}-tabpane-inactive {
-      .tabs-hidden-content();
-    }
-
-    &.@{tab-prefix-cls}-content-animated {
-      display: flex;
-      flex-direction: row;
-      transition: margin-left 0.3s @ease-in-out;
-      will-change: margin-left;
-    }
-  }
-
-  // Vertical Bar
-  .@{tab-prefix-cls}-left-bar,
-  .@{tab-prefix-cls}-right-bar {
-    height: 100%;
-    border-bottom: 0;
+    cursor: pointer;
 
-    .@{tab-prefix-cls}-tab-arrow-show {
-      width: 100%;
-      height: @tabs-scrolling-size;
+    &:last-of-type {
+      margin-right: 0;
+      margin-left: 0;
     }
 
-    .@{tab-prefix-cls}-tab {
-      display: block;
-      float: none;
-      margin: @tabs-vertical-margin;
-      padding: @tabs-vertical-padding;
-      text-align: center;
+    & &-remove {
+      flex: none;
+      margin-right: -@margin-xss;
+      margin-left: @margin-xs;
+      color: @text-color-secondary;
+      font-size: @font-size-sm;
+      outline: none;
+      transition: all @animation-duration-slow;
 
-      &:last-child {
-        margin-bottom: 0;
+      .@{iconfont-css-prefix} {
+        margin: 0;
       }
-    }
-
-    .@{tab-prefix-cls}-extra-content {
-      text-align: center;
-    }
 
-    .@{tab-prefix-cls}-nav-scroll {
-      width: auto;
-    }
-
-    .@{tab-prefix-cls}-nav-container,
-    .@{tab-prefix-cls}-nav-wrap {
-      height: 100%;
-    }
-
-    .@{tab-prefix-cls}-nav-container {
-      margin-bottom: 0;
+      &:hover {
+        color: @heading-color;
+      }
 
-      &.@{tab-prefix-cls}-nav-container-scrolling {
-        padding: @tabs-scrolling-size 0;
+      &:focus,
+      &:active {
+        color: @tabs-active-color;
       }
     }
 
-    .@{tab-prefix-cls}-nav-wrap {
-      margin-bottom: 0;
+    &:focus,
+    &:active {
+      color: @tabs-active-color;
     }
 
-    .@{tab-prefix-cls}-nav {
-      width: 100%;
+    &:hover {
+      color: @tabs-hover-color;
     }
 
-    .@{tab-prefix-cls}-ink-bar {
-      top: 0;
-      bottom: auto;
-      left: auto;
-      width: 2px;
-      height: 0;
+    &&-active {
+      color: @tabs-highlight-color;
+      font-weight: 500;
     }
 
-    .@{tab-prefix-cls}-tab-next {
-      right: 0;
-      bottom: 0;
-      width: 100%;
-      height: @tabs-scrolling-size;
+    &&-disabled {
+      color: @disabled-color;
+      cursor: not-allowed;
     }
 
-    .@{tab-prefix-cls}-tab-prev {
-      top: 0;
-      width: 100%;
-      height: @tabs-scrolling-size;
+    .@{iconfont-css-prefix} {
+      margin-right: @margin-sm;
     }
   }
 
-  // Vertical Content
-  .@{tab-prefix-cls}-left-content,
-  .@{tab-prefix-cls}-right-content {
-    width: auto;
-    margin-top: 0 !important;
-    overflow: hidden;
-  }
-
-  // Vertical - Left
-  .@{tab-prefix-cls}-left-bar {
-    float: left;
-    margin-right: -1px;
-    margin-bottom: 0;
-    border-right: @border-width-base @border-style-base @border-color-split;
-    .@{tab-prefix-cls}-nav-container {
-      margin-right: -1px;
-    }
-    .@{tab-prefix-cls}-nav-wrap {
-      margin-right: -1px;
+  // =========================== TabPanes ===========================
+  &-content {
+    &-holder {
+      flex: auto;
     }
-    .@{tab-prefix-cls}-ink-bar {
-      right: 1px;
-    }
-  }
-  .@{tab-prefix-cls}-left-content {
-    padding-left: @padding-lg;
-    border-left: @border-width-base @border-style-base @border-color-split;
-  }
 
-  // Vertical - Right
-  .@{tab-prefix-cls}-right-bar {
-    float: right;
-    margin-bottom: 0;
-    margin-left: -1px;
-    border-left: @border-width-base @border-style-base @border-color-split;
-    .@{tab-prefix-cls}-nav-container {
-      margin-left: -1px;
-    }
-    .@{tab-prefix-cls}-nav-wrap {
-      margin-left: -1px;
-    }
-    .@{tab-prefix-cls}-ink-bar {
-      left: 1px;
-    }
-  }
-  .@{tab-prefix-cls}-right-content {
-    padding-right: @padding-lg;
-    border-right: @border-width-base @border-style-base @border-color-split;
-  }
-}
-
-.@{tab-prefix-cls}-top .@{tab-prefix-cls}-ink-bar-animated,
-.@{tab-prefix-cls}-bottom .@{tab-prefix-cls}-ink-bar-animated {
-  transition: transform 0.3s @ease-in-out, width 0.2s @ease-in-out, left 0.3s @ease-in-out;
-}
-
-.@{tab-prefix-cls}-left .@{tab-prefix-cls}-ink-bar-animated,
-.@{tab-prefix-cls}-right .@{tab-prefix-cls}-ink-bar-animated {
-  transition: transform 0.3s @ease-in-out, height 0.2s @ease-in-out, top 0.3s @ease-in-out;
-}
+    display: flex;
+    width: 100%;
 
-// No animation
-.tabs-no-animation() {
-  > .@{tab-prefix-cls}-content-animated {
-    margin-left: 0 !important;
-    transform: none !important;
-  }
-  > .@{tab-prefix-cls}-tabpane-inactive {
-    .tabs-hidden-content();
+    &-animated {
+      transition: margin @animation-duration-slow;
+    }
   }
-}
 
-.no-flex,
-.@{tab-prefix-cls}-no-animation {
-  > .@{tab-prefix-cls}-content {
-    .tabs-no-animation();
+  &-tabpane {
+    flex: none;
+    width: 100%;
+    outline: none;
   }
 }
-
-.@{tab-prefix-cls}-left-content,
-.@{tab-prefix-cls}-right-content {
-  .tabs-no-animation();
-}
-
-@import './rtl.less';
diff --git a/components/tabs/style/position.less b/components/tabs/style/position.less
new file mode 100644
index 000000000000..a1f027057b52
--- /dev/null
+++ b/components/tabs/style/position.less
@@ -0,0 +1,186 @@
+@import './index';
+
+.@{tab-prefix-cls} {
+  // ========================== Top & Bottom ==========================
+  &-top,
+  &-bottom {
+    flex-direction: column;
+
+    > .@{tab-prefix-cls}-nav {
+      margin: @tabs-bar-margin;
+
+      &::before {
+        position: absolute;
+        right: 0;
+        left: 0;
+        border-bottom: @border-width-base @border-style-base @border-color-split;
+        content: '';
+      }
+
+      .@{tab-prefix-cls}-ink-bar {
+        height: 2px;
+
+        &-animated {
+          transition: width @animation-duration-slow, left @animation-duration-slow,
+            right @animation-duration-slow;
+        }
+      }
+
+      .@{tab-prefix-cls}-nav-wrap {
+        &::before,
+        &::after {
+          top: 0;
+          bottom: 0;
+          width: 30px;
+        }
+
+        &::before {
+          left: 0;
+          box-shadow: inset 10px 0 8px -8px fade(@shadow-color, 8%);
+        }
+        &::after {
+          right: 0;
+          box-shadow: inset -10px 0 8px -8px fade(@shadow-color, 8%);
+        }
+
+        &.@{tab-prefix-cls}-nav-wrap-ping-left::before {
+          opacity: 1;
+        }
+        &.@{tab-prefix-cls}-nav-wrap-ping-right::after {
+          opacity: 1;
+        }
+      }
+    }
+  }
+
+  &-top {
+    > .@{tab-prefix-cls}-nav {
+      &::before {
+        bottom: 0;
+      }
+
+      .@{tab-prefix-cls}-ink-bar {
+        bottom: 0;
+      }
+    }
+  }
+
+  &-bottom {
+    > .@{tab-prefix-cls}-nav {
+      order: 1;
+      margin-top: @margin-md;
+      margin-bottom: 0;
+
+      &::before {
+        top: 0;
+      }
+
+      .@{tab-prefix-cls}-ink-bar {
+        top: 0;
+      }
+    }
+
+    > .@{tab-prefix-cls}-content-holder {
+      order: 0;
+    }
+  }
+
+  // ========================== Left & Right ==========================
+  &-left,
+  &-right {
+    > .@{tab-prefix-cls}-nav {
+      flex-direction: column;
+      min-width: 50px;
+
+      // >>>>>>>>>>> Tab
+      .@{tab-prefix-cls}-tab {
+        margin: @tabs-vertical-margin;
+        padding: @tabs-vertical-padding;
+        text-align: center;
+
+        &:last-of-type {
+          margin-bottom: 0;
+        }
+      }
+
+      // >>>>>>>>>>> Nav
+      .@{tab-prefix-cls}-nav-wrap {
+        flex-direction: column;
+
+        &::before,
+        &::after {
+          right: 0;
+          left: 0;
+          height: 30px;
+        }
+
+        &::before {
+          top: 0;
+          box-shadow: inset 0 10px 8px -8px fade(@shadow-color, 8%);
+        }
+        &::after {
+          bottom: 0;
+          box-shadow: inset 0 -10px 8px -8px fade(@shadow-color, 8%);
+        }
+
+        &.@{tab-prefix-cls}-nav-wrap-ping-top::before {
+          opacity: 1;
+        }
+        &.@{tab-prefix-cls}-nav-wrap-ping-bottom::after {
+          opacity: 1;
+        }
+      }
+
+      // >>>>>>>>>>> Ink Bar
+      .@{tab-prefix-cls}-ink-bar {
+        width: 2px;
+
+        &-animated {
+          transition: height @animation-duration-slow, top @animation-duration-slow;
+        }
+      }
+
+      .@{tab-prefix-cls}-nav-list,
+      .@{tab-prefix-cls}-nav-operations {
+        flex-direction: column;
+      }
+    }
+  }
+
+  &-left {
+    > .@{tab-prefix-cls}-nav {
+      .@{tab-prefix-cls}-ink-bar {
+        right: 0;
+      }
+    }
+
+    > .@{tab-prefix-cls}-content-holder {
+      margin-left: -@border-width-base;
+      border-left: @border-width-base @border-style-base @border-color-split;
+
+      > .@{tab-prefix-cls}-content > .@{tab-prefix-cls}-tabpane {
+        padding-left: @padding-lg;
+      }
+    }
+  }
+
+  &-right {
+    > .@{tab-prefix-cls}-nav {
+      order: 1;
+
+      .@{tab-prefix-cls}-ink-bar {
+        left: 0;
+      }
+    }
+
+    > .@{tab-prefix-cls}-content-holder {
+      order: 0;
+      margin-right: -@border-width-base;
+      border-right: @border-width-base @border-style-base @border-color-split;
+
+      > .@{tab-prefix-cls}-content > .@{tab-prefix-cls}-tabpane {
+        padding-right: @padding-lg;
+      }
+    }
+  }
+}
diff --git a/components/tabs/style/rtl.less b/components/tabs/style/rtl.less
index 6dfc37fb9d91..b1f37c315f16 100644
--- a/components/tabs/style/rtl.less
+++ b/components/tabs/style/rtl.less
@@ -1,83 +1,61 @@
 @import '../../style/themes/index';
 @import '../../style/mixins/index';
-@import './card-style';
+@import './index';
 
-@tab-prefix-cls: ~'@{ant-prefix}-tabs';
+.@{tab-prefix-cls}-rtl {
+  direction: rtl;
 
-.@{tab-prefix-cls} {
-  &-rtl {
-    direction: rtl;
-  }
-
-  &-ink-bar {
-    .@{tab-prefix-cls}-rtl & {
-      right: 0;
-      left: auto;
-    }
-  }
-
-  &-tab-next {
-    .@{tab-prefix-cls}-rtl & {
-      right: auto;
-      left: 2px;
-    }
-  }
-
-  &-tab-prev {
-    .@{tab-prefix-cls}-rtl & {
-      right: 2px;
-      left: auto;
-    }
-  }
-
-  &-nav {
+  > .@{tab-prefix-cls}-nav {
     .@{tab-prefix-cls}-tab {
-      .@{tab-prefix-cls}-rtl & {
-        margin: @tabs-horizontal-margin-rtl;
+      margin: @tabs-horizontal-margin-rtl;
+
+      &:last-of-type {
+        margin-left: 0;
       }
 
       .@{iconfont-css-prefix} {
-        .@{tab-prefix-cls}-rtl & {
-          margin-right: 0;
-          margin-left: @margin-xs;
-        }
+        margin-right: 0;
+        margin-left: @margin-sm;
       }
-    }
-  }
 
-  .@{tab-prefix-cls}-left-bar,
-  .@{tab-prefix-cls}-right-bar {
-    .@{tab-prefix-cls}-tab {
-      .@{tab-prefix-cls}-rtl& {
-        margin: @tabs-vertical-margin;
-      }
+      .@{tab-prefix-cls}-tab-remove {
+        margin-right: @margin-xs;
+        margin-left: -@margin-xss;
 
-      &:last-child {
-        margin-bottom: 0;
+        .@{iconfont-css-prefix} {
+          margin: 0;
+        }
       }
     }
   }
 
-  .@{tab-prefix-cls}-right-bar {
-    .@{tab-prefix-cls}-ink-bar {
-      .@{tab-prefix-cls}-rtl& {
-        right: auto;
-        left: 1px;
-      }
+  &.@{tab-prefix-cls}-left {
+    > .@{tab-prefix-cls}-nav {
+      order: 1;
+    }
+    > .@{tab-prefix-cls}-content-holder {
+      order: 0;
     }
   }
 
-  // card
-  &&-card &-card-bar &-tab &-close-x {
-    .@{tab-prefix-cls}-rtl& {
-      margin-right: 3px;
-      margin-left: -5px;
+  &.@{tab-prefix-cls}-right {
+    > .@{tab-prefix-cls}-nav {
+      order: 0;
+    }
+    > .@{tab-prefix-cls}-content-holder {
+      order: 1;
     }
   }
 
-  &-extra-content {
-    .@{tab-prefix-cls}-rtl & {
-      float: left !important;
+  // ====================== Card ======================
+  &.@{tab-prefix-cls}-card {
+    &.@{tab-prefix-cls}-top,
+    &.@{tab-prefix-cls}-bottom {
+      > .@{tab-prefix-cls}-nav {
+        button.@{tab-prefix-cls}-tab:not(:last-of-type) {
+          margin: 0 0 0 @tabs-card-gutter;
+        }
+      }
     }
   }
 }
diff --git a/components/tabs/style/size.less b/components/tabs/style/size.less
new file mode 100644
index 000000000000..43a75f179765
--- /dev/null
+++ b/components/tabs/style/size.less
@@ -0,0 +1,41 @@
+@import '../../style/themes/index';
+@import '../../style/mixins/index';
+@import './index';
+
+.@{tab-prefix-cls} {
+  &-small {
+    > .@{tab-prefix-cls}-nav {
+      .@{tab-prefix-cls}-tab {
+        padding: @tabs-horizontal-padding-sm;
+        font-size: @tabs-title-font-size-sm;
+      }
+    }
+  }
+
+  &-large {
+    > .@{tab-prefix-cls}-nav {
+      .@{tab-prefix-cls}-tab {
+        padding: @tabs-horizontal-padding-lg;
+        font-size: @tabs-title-font-size-lg;
+      }
+    }
+  }
+
+  &-card {
+    &.@{tab-prefix-cls}-small {
+      > .@{tab-prefix-cls}-nav {
+        .@{tab-prefix-cls}-tab {
+          padding: @tabs-card-horizontal-padding-sm;
+        }
+      }
+    }
+
+    &.@{tab-prefix-cls}-large {
+      > .@{tab-prefix-cls}-nav {
+        .@{tab-prefix-cls}-tab {
+          padding: @tabs-card-horizontal-padding-lg;
+        }
+      }
+    }
+  }
+}
diff --git a/components/typography/Base.tsx b/components/typography/Base.tsx
index a43c6bb335bb..650fd569edf9 100644
--- a/components/typography/Base.tsx
+++ b/components/typography/Base.tsx
@@ -416,15 +416,7 @@ class Base extends React.Component<InternalBlockProps, BaseState> {
 
   renderContent() {
     const { ellipsisContent, isEllipsis, expanded } = this.state;
-    const {
-      component,
-      children,
-      className,
-      type,
-      disabled,
-      style,
-      ...restProps
-    } = this.props;
+    const { component, children, className, type, disabled, style, ...restProps } = this.props;
     const { direction } = this.context;
     const { rows, suffix } = this.getEllipsis();
 
diff --git a/package.json b/package.json
index 6793d83718bc..68ef758fee2b 100644
--- a/package.json
+++ b/package.json
@@ -120,7 +120,7 @@
     "rc-collapse": "~2.0.0",
     "rc-dialog": "~8.0.0",
     "rc-drawer": "~4.0.0",
-    "rc-dropdown": "~3.0.0",
+    "rc-dropdown": "~3.1.2",
     "rc-field-form": "~1.4.1",
     "rc-input-number": "~5.0.0",
     "rc-mentions": "~1.2.0",
@@ -136,7 +136,7 @@
     "rc-steps": "~3.6.0",
     "rc-switch": "~3.2.0",
     "rc-table": "~7.7.2",
-    "rc-tabs": "~10.1.1",
+    "rc-tabs": "~11.2.0",
     "rc-tooltip": "~4.2.0",
     "rc-tree": "~3.3.0",
     "rc-tree-select": "~3.2.0",
diff --git a/site/theme/static/template.html b/site/theme/static/template.html
index 31332ba15993..b0c3cae1b3f4 100644
--- a/site/theme/static/template.html
+++ b/site/theme/static/template.html
@@ -22,7 +22,7 @@
     <link rel="stylesheet/less" type="text/css" href="{{ root }}color.less" />
     <script src="https://polyfill.alicdn.com/polyfill.min.js?features=default,es2015,Intl"></script>
     <script>
-      (function() {
+      (function () {
         function isLocalStorageNameSupported() {
           var testKey = 'test';
           var storage = window.localStorage;
@@ -100,10 +100,14 @@
     </script>
     <!-- Hotjar Tracking Code for ant.design -->
     <script>
-      (function(h, o, t, j, a, r) {
+      (function (h, o, t, j, a, r) {
+        if (location.hostname === 'localhost') {
+          return;
+        }
+
         h.hj =
           h.hj ||
-          function() {
+          function () {
             (h.hj.q = h.hj.q || []).push(arguments);
           };
         h._hjSettings = { hjid: 473408, hjsv: 5 };
diff --git a/site/theme/template/Home/MorePage.tsx b/site/theme/template/Home/MorePage.tsx
index fe0348e48f96..a14da1ff6733 100644
--- a/site/theme/template/Home/MorePage.tsx
+++ b/site/theme/template/Home/MorePage.tsx
@@ -37,7 +37,8 @@ const MORE_LIST: MoreProps[] = [
   },
   {
     title: 'JCD 驱动 - 复杂系统设计应对之道',
-    description: '基于蚂蚁金服CTO线的业务土壤，我们探索出以JCD为核心的企业级产品设计思维，助力设计师在深耕业务上有章可循。',
+    description:
+      '基于蚂蚁金服CTO线的业务土壤，我们探索出以JCD为核心的企业级产品设计思维，助力设计师在深耕业务上有章可循。',
     img: 'https://gw.alipayobjects.com/mdn/rms_08e378/afts/img/A*y-xiQoZzBCEAAAAAAAAAAABkARQnAQ',
     date: '2020-01-17',
     source: 'zhihu',
@@ -45,8 +46,7 @@ const MORE_LIST: MoreProps[] = [
   },
   {
     title: '折柱饼 +3 个套路，简单图表你真的会用吗？',
-    description:
-      '本文一句话概括：数据可视化中，如何用最简单的图表高效地传递信息。',
+    description: '本文一句话概括：数据可视化中，如何用最简单的图表高效地传递信息。',
     img: 'https://gw.alipayobjects.com/mdn/rms_08e378/afts/img/A*Q1DMQpLCDQgAAAAAAAAAAABkARQnAQ',
     date: '2020-11-28',
     source: 'zhihu',