Is it possible to implement vertical tabs in Kendo UI using AngularJS?

Is it possible to implement vertical tabs in Kendo UI?

I want the result to be similar to this screenshot:

enter image description here

Try vertical tab in UI bootstrap

<tabset vertical="true" type="navType">
    <tab heading="Vertical 1">Vertical content 1</tab>
    <tab heading="Vertical 2">Vertical content 2</tab>
</tabset>

Go through this page for reference http://angular-ui.github.io/bootstrap/

Just add

class "tabstrip-vertical"

CSS

.k-widget.k-tabstrip.tabstrip-vertical {
    /*Width of the tabs*/
    padding-left:12em;
    border-style:none;

}

    .k-widget.k-tabstrip.tabstrip-vertical > ul.k-tabstrip-items {
        left:0px;
        position:absolute;
        border-style:none;

    }

        .k-widget.k-tabstrip.tabstrip-vertical > ul.k-tabstrip-items > li.k-item {
            display:block;
            border-radius:4px 0 0 4px;
            border-width:1px 0 1px 1px;
            /*Width of the tabs*/
            width:12em;
            border-style:none;

        }

            .k-widget.k-tabstrip.tabstrip-vertical > ul.k-tabstrip-items > li.k-item.k-state-active {
                border-right-color:#fff;
                border-right-width:1px;
                border-style:none;

            }

Vertically-oriented Tabstrips have been added to the Q1 2015 Kendo UI release.

You can find more details here: http://demos.telerik.com/kendo-ui/tabstrip/tab-position

No, Kendo UI doesn't include a vertical tabstrip widget for the time being.

!!UPDATE!!

Kendo UI now supports tab orientation - vertical and bottom tabs. Here is an a demo.

Try jQueryUI

It has vertical tab component.

http://jqueryui.com/tabs/#vertical

This link has the demo as well.

As nklein mentioned it's a new feature. Any way if you can't get the new version you can always use the menu bar, it has orientation support.

Using bootstrap:

@{
    ViewBag.Title = "WIZARD";
}

<div class="page-header">
    <h2>
        WIZARD
    </h2>
</div>

<ul class="nav nav-pills nav-stacked col-md-2" id="pills-first">
    <li class="active"><a disabled="disabled" href="#tab_a" data-toggle="pill">Pill A</a></li>
    <li><a disabled="disabled" href="#tab_b" data-toggle="pill">Pill B</a></li>
    <li><a disabled="disabled" href="#tab_c" data-toggle="pill">Pill C</a></li>
    <li><a disabled="disabled" href="#tab_d" data-toggle="pill">Finish</a></li>
</ul>
<div class="tab-content col-md-10">
    <div class="tab-pane active" id="tab_a">
        <h4>Pane A</h4>
        <p>
            This is an example of page 1
        </p>
    </div>
    <div class="tab-pane" id="tab_b">
        <h4>Pane B</h4>
        <p>
            This is an example of page 2
        </p>
    </div>
    <div class="tab-pane" id="tab_c">
        <h4>Pane C</h4>
        <p>
            This is an example of page 3
        </p>
    </div>
    <div class="tab-pane" id="tab_d">
        <h4>Finish</h4>
        <p>
            This is an example of page 4 (Done)
        </p>
    </div>
</div>
<div class="row">
    <div class="col-sm-1">
        <button type="button" style="width: 90px" onclick="previousClick()" class="btn btn-primary btn-sm">&lt; Previous</button>
    </div>
    <div class="col-sm-1">
        <button type="button" style="width: 90px" onclick="nextClick()" class="btn btn-primary btn-sm">Next &gt;</button>
    </div>
    <div class="col-sm-1">
        <button id="finishButton" style="width: 90px" type="button" onclick="finishClick()" class="btn btn-primary btn-sm">Finish</button>
    </div>
</div>

<script>
    var startIndex = 0;
    $(document).ready(function () {
        $($('#pills-first a')[startIndex]).tab('show'); // Display Tab A
        //$($('#pills-first a')[1]).tab('show'); // Display Tab B
        //$($('#pills-first a')[2]).tab('show'); // Display Tab C
        $('#finishButton')[0].style.display = "none";
    });

    function previousClick(e) {
        startIndex = startIndex - 1;
        if (startIndex < 0)
            startIndex = startIndex + 1;
        $($('#pills-first a')[startIndex]).tab('show');
    }

    function nextClick(e) {
        if (startIndex < $('#pills-first a').length - 1) {
            startIndex = startIndex + 1;
        }

        if (startIndex == $('#pills-first a').length-1) {
            $('#finishButton')[0].style.display = "block";
        }
        $($('#pills-first a')[startIndex]).tab('show');
    }

    function finishClick(e) {
        alert("COMPLETE");
    }

</script>

It should look like this...