Set the Tab Location

The wijtabs widget allows you to align the tabstrip to the right, left, top, or bottom of the widget. Simply set the alignment option to take advantage of this feature. See the Tabs > Alignment sample of the MVC Control Explorer live demo at http://demo.componentone.com/ASPNET/MVCExplorer/tabs/Alignment .

Create an C1 ASP.NET MVC 5 Web Application.
In the Solution Explorer, expand the Views | Shared folder and double-click _Layout.cshtml to open the file.

Add the following markup within the <body> tags of the page.

<div id="tabs">
      <ul>
            <li><a href="#tabs-1">Tab 1</a></li>
            <li><a href="#tabs-2">Tab 2</a></li>
            <li><a href="#tabs-3">Tab 3</a></li>
      </ul>
      <div id="tabs-1">
            <p>
                  Tab 1 Content</p>
      </div>
      <div id="tabs-2">
            <p>
                  Tab 2 Content</p>
      </div>
      <div id="tabs-3">
            <p>
                  Tab 3 Content</p>
      </div>
    </div>

After the closing </div> tags you added in the previous step, enter the following jQuery script to initialize the wijtabs widget and set the alignment option:

<script id="scriptInit" type="text/javascript">
    $(document).ready(function () {
        $("#tabs").wijtabs({ alignment: 'left' });      
    });
      </script>

When you run the application, the tabstrip appears to the left of the tab content.