Change the Position of the Menu Bar

You can change the layout of the tab panes by modifying the markup located in viewerTemplate.html.

Adding the pcc-tab-vertical class makes the tab pane vertical.
Adding either a pcc-left or pcc-right class specifies the side on which the vertical tab pane will appear.

Example	Copy Code
<div class="tabset pcc-nav-tabset" data-pcc-nav> <!-- Tab --> <div class="pcc-tab" data-pcc-nav-tab="demo"> <div class="pcc-tab-item">Demo</div> <!-- This tab pane is vertical and left aligned --> <div class="pcc-tab-pane pcc-tab-vertical pcc-left"> <!-- Tab content --> </div> </div> <!-- End tab --> </div>

Example

Copy Code

<div class="tabset pcc-nav-tabset" data-pcc-nav>
   <!-- Tab -->
   <div class="pcc-tab" data-pcc-nav-tab="demo">
       <div class="pcc-tab-item">Demo</div>
       <!-- This tab pane is vertical and left aligned -->
       <div class="pcc-tab-pane pcc-tab-vertical pcc-left">
           <!-- Tab content -->
       </div>
   </div>
   <!-- End tab -->
</div>