From 4c33c0bd1cf49d299f16007d877b559a5b6d5d21 Mon Sep 17 00:00:00 2001
From: Thomas Allmer <thomas.allmer@ing.com>
Date: Wed, 30 Sep 2020 15:38:07 +0200
Subject: [PATCH] chore(tabs): add demo for nested tabs

---
 packages/tabs/README.md | 29 +++++++++++++++++++++++++++++
 1 file changed, 29 insertions(+)

diff --git a/packages/tabs/README.md b/packages/tabs/README.md
index c9ad0f26b..97ad114f0 100644
--- a/packages/tabs/README.md
+++ b/packages/tabs/README.md
@@ -84,6 +84,35 @@ export const slotsOrder = () => html`
 `;
 ```
 
+### Nesting tabs
+
+You can include tabs within tabs
+
+```js preview-story
+export const nestedTabs = () => html`
+  <lion-tabs>
+    <button slot="tab">Movies</button>
+    <button slot="tab">Work</button>
+    <div slot="panel">
+      <p>Find some more info about our favorite movies:</p>
+      <lion-tabs>
+        <button slot="tab">Info about Cars</button>
+        <button slot="tab">Info about Toy Story</button>
+        <p slot="panel">
+          Cars is a 2006 American computer-animated comedy film produced by Pixar Animation Studios
+          and released by Walt Disney Pictures.
+        </p>
+        <p slot="panel">
+          The feature film directorial debut of John Lasseter, it was the first entirely
+          computer-animated feature film, as well as the first feature film from Pixar.
+        </p>
+      </lion-tabs>
+    </div>
+    <p slot="panel">Work page that showcases our work.</p>
+  </lion-tabs>
+`;
+```
+
 ### Distribute New Elements
 
 Below, we demonstrate on how you could dynamically add new tab + panels.