diff --git a/docs/api-site-config.md b/docs/api-site-config.md
index a51ddb2c0850..a322d39e6ac1 100644
--- a/docs/api-site-config.md
+++ b/docs/api-site-config.md
@@ -5,12 +5,24 @@ title: siteConfig.js
 
 A large part of site configuration is done by editing the `siteConfig.js` file.
 
+<div class="tab">
+  <button class="tablinks" id="userShowcaseLink" onclick="showTabContent(0)">User Showcase</button>
+  <button class="tablinks" id="fieldsLink" onclick="showTabContent(1)">siteConfig Fields</button>
+  <button class="tablinks" id="examplesLink" onclick="showTabContent(2)">Examples</button>
+</div>
+
+<div id="userShowcase" class="tabcontent">
+
 ## User Showcase
 
 The `users` array is used to store objects for each project/user that you want to show on your site. Currently this field is used by example the `pages/en/index.js` and `pages/en/users.js` files provided. Each user object should have `caption`, `image`, `infoLink`, and `pinned` fields. The `caption` is the text showed when someone hovers over the `image` of that user, and the `infoLink` is where clicking the image will bring someone. The `pinned` field determines whether or not it shows up on the `index` page.
 
 Currently this `users` array is used only by the `index.js` and `users.js` example files. If you do not wish to have a users page or show users on the `index` page, you may remove this section.
 
+</div>
+
+<div id="fields" class="tabcontent">
+
 ## siteConfig Fields
 
 The `siteConfig` object contains the bulk of the configuration settings for your website.
@@ -187,6 +199,10 @@ h1 {
 
 Users can also add their own custom fields if they wish to provide some data across different files.
 
+</div>
+
+<div id="examples" class="tabcontent">
+
 ## Example siteConfig.js with many available fields
 
 ```js
@@ -283,3 +299,5 @@ const siteConfig = {
 
 module.exports = siteConfig;
 ```
+
+</div>
diff --git a/v1/lib/core/DocsLayout.js b/v1/lib/core/DocsLayout.js
index 9fc259935a77..9ded0fb44d1a 100644
--- a/v1/lib/core/DocsLayout.js
+++ b/v1/lib/core/DocsLayout.js
@@ -76,6 +76,39 @@ class DocsLayout extends React.Component {
         language={metadata.language}
         version={metadata.version}
         metadata={metadata}>
+        {
+          <script
+            dangerouslySetInnerHTML={{
+              __html: `
+                function showTabContent(num) {
+                  var i, tabContent, tabLinks;
+                  tabContent = document.getElementsByClassName("tabcontent");
+                  for (i = 0; i < tabContent.length; i++) {
+                      tabContent[i].style.display = "none";
+                  }
+                  tabLinks = document.getElementsByClassName("tablinks");
+                  for (i = 0; i < tabLinks.length; i++) {
+                      tabLinks[i].className = tabLinks[i].className.replace(/ active$/, "");
+                  }
+                  if(num<tabContent.length)
+                      tabContent[num].style.display = "block";
+                  if(num<tabLinks.length)
+                      tabLinks[num].className += " active";
+
+                  rightSideToc=document.getElementsByClassName('toc-headings');
+                  if(rightSideToc.length>0){
+                      headings=rightSideToc[0].children;
+                      for(i = 0; i < headings.length; i++){
+                        headings[i].style.display="none";  
+                      }
+                      if(num<headings.length)
+                      headings[num].style.display="block";
+                  }
+              }
+                `,
+            }}
+          />
+        }
         <div className="docMainWrapper wrapper">
           <DocsSidebar metadata={metadata} />
           <Container className="mainContainer docMainContainer">
diff --git a/v1/lib/static/css/main.css b/v1/lib/static/css/main.css
index ced1da83522b..f1ebb0cdcd48 100644
--- a/v1/lib/static/css/main.css
+++ b/v1/lib/static/css/main.css
@@ -2322,3 +2322,39 @@ input::placeholder {
   padding: 5px 0;
 }
 /* End of Footer */
+
+/* Start of Tab Bar */
+.tab {
+  overflow: hidden;
+  border-bottom-color: #398555;
+  border-bottom-style: solid;
+  border-bottom-width: 2px;
+}
+.tabcontent {
+  display: solid;
+  border-top: none;
+}
+.tab button {
+  background-color: inherit;
+  float: left;
+  border-style: solid;
+  color: $primaryColor;
+  border-color: $primaryColor;
+  border-bottom-color: transparent;
+  border-width: 1px;
+  margin-right: 5px;
+  cursor: pointer;
+  padding: 14px 16px;
+  transition: 0.3s;
+  font-size: 17px;
+  border-radius: 3px 3px 0px 0px;
+}
+.tab button:hover {
+  background-color: $primaryColor;
+  color: #fff;
+}
+.tab button.active {
+  background-color: $primaryColor;
+  color: #fff;
+}
+/* End of Tab Bar */
\ No newline at end of file