How To Create Tabs In Sharepoint 2013

Microsoft Teams

Hi folks, today in this series of sharepoint online branding examples, we will learn how to create a tabbed menu for SharePoint online using the Bootstrap library. The same way you can implement a bootstrap tabbed menu in sharepoint online, sharepoint 2016/2013.

Here I have added 4 menu items, you can add as per your requirements. First, let's understand the concept of bootstrap.

Introduction to Bootstrap

Bootstrap is the most popular HTML, CSS, and JavaScript framework for developing responsive, mobile-first websites. There are two major components used in this:

bootstrap.css – a CSS framework; for the look and feel
bootstrap.js – a JavaScript/jQuery framework; for dynamic effects
Additionally, Bootstrap requires jQuery to function. JQuery is an extremely popular and widely used JavaScript library that both simplifies and adds cross-browser compatibility to JavaScript.

Below are some prerequisites, which required before we jump in to implement the below code.

Prerequisites to use Bootstrap

https://getbootstrap.com/docs/4.0/getting-started/download/ – To get latest bootstrap.min.js
https://jquery.com/download/ – To get latest jquery.min.js
https://v4-alpha.getbootstrap.com/getting-started/download/- To get latest bootstrap.min.css
Any IDE that supports HTML and Bootstrap i.e. Notepad++, VS 2015.
Little knowledge about CSS, HTML, and JS.

In below html file make sure to add below 3 major references as discussed above in <Head> section.

                <head> <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script> <link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet"/> <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script> </head>

Other important css classes used in the file are:

Container– Fixed width container with widths determined by screen sites. Equal margin on the left and right.
nav nav-tabs– Indicates a tabbed menu.
Active– Adds a grey background color to the table row (<tr> or table cell (<td>) (same color used on hover)
tab-content– Used together with .tab-pane to creates toggleable/dynamic tabs/pills. You can add any HTML code or anything that you want to show under this div.
tab– pane fade in active- Used together with .tab-content to creates toggle able/dynamic tabs/pills.

Other than these classes I have used inline css to make look and feel, formatted contents for the tabbed div's .

You can refer any custom css file for your requirement.

TabbedMenu.html Code File

                <html><head> <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script> <link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet"/> <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script> </head> <div class="container" style="text-align: left;"> <ul class="nav nav-tabs"> <li class="active"> <a href="#Images" data-toggle="tab"> <p class="yellow-button">Images</p></a></li> <li> <a href="#Documents" data-toggle="tab"><p class="red-button">Documents</p></a></li> <li> <a href="#Tranings" data-toggle="tab"><p class="blue-button">Tranings</p></a></li> <li> <a href="#Jobs" data-toggle="tab"><p class="green-button">Jobs</p></a></li> </ul> <div class="tab-content"> <div class="tab-pane fade in active" id="Images"> <br> <div style="background:lightgreen;"> <table height="250px"><tr> <td > <p><br><img src="https://onlysharepoint2013.sharepoint.com/sites/Bhawana/SiteAssets/Images/img1.jpg" alt="Avatar" style="width:250px; border-radius: 50%;box-shadow: 10px 10px 5px #fbce07;-moz-box-shadow: 10px 10px 5px #fbce07;-webkit-box-shadow: 10px 10px 5px #fbce07; -khtml-box-shadow: 10px 10px 5px #ccc; margin-left: 40px !important;"></p></td> <td>&nbsp; </td> <td>&nbsp; </td> <td> &nbsp;</td>  <td><p style="width:400px; padding: 10px 20px;"><b>This is my pets picture gallery in sharepoint.<br>To view more click on <a href=#>Images </a></b></p></td> <td> <p><img src="https://onlysharepoint2013.sharepoint.com/sites/Bhawana/SiteAssets/Images/img2.jpg" alt="Avatar" style="width:120px; border-radius: 30%;box-shadow: 5px 10px #fbce07;"></p></td> <td>&nbsp; </td> <td>&nbsp; </td> <td>&nbsp; </td>  <td> <p><img src="https://onlysharepoint2013.sharepoint.com/sites/Bhawana/SiteAssets/Images/img7.jpg" alt="Avatar" style="width:150px; border-radius: 30%; box-shadow: 5px 10px #fbce07;"></p></td> <td>&nbsp; </td> <td>&nbsp; </td> <td>&nbsp; </td>  <td> <p><img src="https://onlysharepoint2013.sharepoint.com/sites/Bhawana/SiteAssets/Images/img6.jpg" alt="Avatar" style="width:120px; border-radius: 30%;box-shadow: 5px 10px #fbce07;"></p></td> <td>&nbsp; </td> </tr></table>  </div>  </div> <div class="tab-pane fade" id="Documents"> <br> <div style="background:wheat;">  <table height="250px">  <tr> <td> <div style="background-color:#ffffff; box-shadow: 5px 5px brown; margin-left: 30px;height:220px;width:320px; margin-left:20px;margin: 0px 25px 20px;"> <table > <div class="title-div-left"><b><br>SharePoint 2010 documents</b></div> <tr><br> <a href=""> Document1 </a><br><br> <a href=""> Document2 </a> <br><br> <a href=""> Document3 </a> <br> <br> <a href=""> Document4 </a> <br> <br> </tr> </table> </div> </td> <td>&nbsp; </td> <td>&nbsp; </td> <td> <div style=" background-color:#ffffff; box-shadow: 5px 5px hotpink; margin-left: 30px ;height:220px;width:320px;margin: 0px 25px 20px; "> <table > <div class="title-div-left"><b><br>SharePoint 2013 documents</b></div> <tr><br> <a href=""> Document1 </a><br><br> <a href=""> Document2 </a> <br><br> <a href=""> Document3 </a> <br> <br> <a href=""> Document4 </a> <br> <br> </tr> </table> </div> </td>  <td>&nbsp; </td> <td>&nbsp; </td>  <td><div style=" background-color:#ffffff; box-shadow: 5px 5px red; margin-left: 60px ;height:220px;width:320px;margin: 0px 25px 20px;"><table > <div class="title-div-left"><b><br>SharePoint Online documents</b></div> <tr><br> <a href=""> Document1 </a><br><br> <a href=""> Document2 </a> <br><br> <a href=""> Document3 </a> <br> <br> <a href=""> Document4 </a> <br> <br> </tr> </table> </div></td> </tr></table> </div> </div> <div class="tab-pane fade" id="Tranings"> <br> <div style="background:paleturquoise;"> <table height="250px"> <tr> <td> <div style="background-color:#ffffff; box-shadow: 5px 5px darkcyan; margin-left: 30px;height:200px;width:230px; margin-left:20px;margin: 0px 25px 20px;"> <table > <div class="title-div-leftBlue"><b>SharePoint</b></div> <tr> <br> <a href=""> 1) Link1 </a><br><br> <a href=""> 2) Link2 </a> <br><br> <a href=""> 3) Link3 </a> <br> <br> <a href=""> 4) Link4 </a> <br> <br> </tr> </table> </td> <td> <div style="background-color:#ffffff; box-shadow: 5px 5px darkcyan; margin-left: 30px;height:200px;width:230px; margin-left:20px;margin: 0px 25px 20px;"> <table > <div class="title-div-leftBlue"><b>Azure</b></div> <tr> <br> <a href=""> 1) Link1 </a><br><br> <a href=""> 2) Link2 </a> <br><br> <a href=""> 3) Link3 </a> <br> <br> <a href=""> 4) Link4 </a> <br> <br> </tr> </table></td> <td> <div style="background-color:#ffffff; box-shadow: 5px 5px darkcyan; margin-left: 30px;height:200px;width:230px; margin-left:20px;margin: 0px 25px 20px;"> <table > <div class="title-div-leftBlue"><b>.Net,C#</b></div> <tr> <br> <a href=""> 1) Link1 </a><br><br> <a href=""> 2) Link2 </a> <br><br> <a href=""> 3) Link3 </a> <br> <br> <a href=""> 4) Link4 </a> <br> <br> </tr> </table></td> <td> <div style="background-color:#ffffff; box-shadow: 5px 5px darkcyan; margin-left: 30px;height:200px;width:230px; margin-left:20px;margin: 0px 25px 20px;"> <table > <div class="title-div-leftBlue"><b>Java</b></div> <tr> <br> <a href=""> 1) Link1 </a><br><br> <a href=""> 2) Link2 </a> <br><br> <a href=""> 3) Link3 </a> <br> <br> <a href=""> 4) Link4 </a> <br> <br> </tr> </table></td> </tr> </table> </div> </div> <div class="tab-pane fade" id="Jobs"> <div style="background:Orchid ;"> <table height="250px"> <tr><td> <table > <tr> <td valign="top"><td > <p><br><img src="https://onlysharepoint2013.sharepoint.com/sites/Bhawana/SiteAssets/Images/jobs.jpg" alt="Avatar" style="width:160px; border-radius:20%;box-shadow: 10px; 10px; 5px ;mediumseagreen;-moz-box-shadow: 10px; 10px; 5px ;mediumseagreen;-webkit-box-shadow: 10px 10px 5px mediumseagreen; -khtml-box-shadow: 10px 10px 5px #ccc; margin-left: 40px !important;"></p></td></td> </tr> </table> </td> <td>&nbsp; </td> <td>&nbsp; </td> <td> <div style=" background-color:#ffffff; box-shadow: 5px 5px mediumseagreen; margin-left: 30px ;height:200px;width:320px;margin: 0px 25px 20px; "> <table > <tr> <td valign="top"><ul><br> <li><span>Link1</span></li> <li><span>Link2</span></li> <li><span>Link1</span></li> <li><span>Link2</span></li> <li><span>Link1</span></li> <li><span>Link2</span></li> <li><span>Link1</span></li> <li><span>Link2</span></li> </ul> </td> </tr></table></div> </td> <td>&nbsp; </td> <td>&nbsp; </td> </tr> </table> </div></td> </tr></table> </div> </div> </html>

You can refer this HTML file into content editor's path URL. So that any modification would be easy. Please follow the below steps to add a webpart into the SharePoint page.

sharepoint online branding examples: bootstrap tabbed menu

Page URL- /sites/Bhawana/SiteAssets/SitePages/Tabbed_Menu.html

sharepoint online branding examples: bootstrap tabbed menu with HTML

sharepoint online branding examples: bootstrap tabbed menu with HTML and CSS

Once you save above changes in the content editor webpart property and save the page, you can see below output.

Final Output

You may like following SharePoint customization tutorials:

Bootstrap accordion example
Bootstrap 4 Forms Designing and Carousel Example
Bootstrap table
SharePoint Online branding: Creating Accordion Widget or Collapsible panel with Bootstrap
SharePoint Online left navigation and top Navigation branding using CSS
How to Display SharePoint List items using AngularJS and REST Api
SharePoint Online branding example: Images styling with CSS and HTML
Document Sets welcome page was not appearing in SharePoint Online
How to Make image Map and use in SharePoint Online/2016/2013
Hide quick launch bar in SharePoint Online using CSS
Add Global Navigation Links and Headings in SharePoint Online Office 365 Site

I hope this article is helpful to you to know how to create a tabbed menu for SharePoint Online using the Bootstrap library.

Hello Everyone!! I am Bhawana a SharePoint MVP and having about 10+ years of SharePoint experience as well as in .Net technologies. I have worked in all the versions of SharePoint from wss to Office 365. I have good exposure in Customization and Migration using Nintex, Metalogix tools. Now exploring more in SharePoint 2016 🙂 Hope here I can contribute and share my knowledge to the fullest. As I believe "There is no wealth like knowledge and no poverty like ignorance"