Change Orientation

The wijmenu widget can be formatted as a traditional menu bar or as a vertical menu. See the Menu > Orientation sample of the MVC Control Explorer live demo at http://demo.componentone.com/ASPNET/MVCExplorer/menu/Orientation .

Complete these steps to create a vertical menu:

Create an ASP.NET MVC Wijmo application.
In the Solution Explorer, click Views | Shared folder and double-click the _Layout.cshtml file to open it.
In the Solution Explorer, click the Views | Home folder and double-click the Index.cshtml file to open it.

Add the following markup to the Index.cshtml file to create an unordered list:

<ul id="menu2">
                <li><a href="#">Breaking News</a>
                    <ul>
                        <li><a href="#">Entertainment</a></li>
                        <li><a href="http://www.w3schools.com/tags/html5.asp">Politics</a></li>
                        <li><a href="#">A&E</a></li>
                        <li><a href="#">Sports</a> </li>
                        <li><a href="#">Local</a></li>
                        <li><a href="#">Health</a></li>
                    </ul>
                </li>
                <li><a href="#">Entertainment</a>
                    <ul>
                        <li><a href="#">Celebrity news</a></li>
                        <li><a href="#">Gossip</a></li>
                        <li><a href="#">Movies</a></li>
                        <li><a href="#">Music</a>
                            <ul>
                                <li><a href="#">Alternative</a></li>
                                <li><a href="#">Country</a></li>
                                <li><a href="#">Dance</a></li>
                                <li><a href="#">Electronica</a></li>
                                <li><a href="#">Metal</a></li>
                                <li><a href="#">Pop</a></li>
                                <li><a href="#">Rock</a>
                                    <ul>
                                        <li><a href="#">Bands</a>
                                            <ul>
                                                <li><a href="#">Dokken</a></li>
                                            </ul>
                                        </li>
                                        <li><a href="#">Fan Clubs</a></li>
                                        <li><a href="#">Songs</a></li>
                                    </ul>
                                </li>
                            </ul>
                        </li>
                        <li><a href="#">Slide shows</a></li>
                        <li><a href="#">Red carpet</a></li>
                    </ul>
                </li>
                <li><a href="#">Finance</a>
                    <ul>
                        <li><a href="#">Personal</a>
                            <ul>
                                <li><a href="#">Loans</a></li>
                                <li><a href="#">Savings</a></li>
                                <li><a href="#">Mortgage</a></li>
                                <li><a href="#">Debt</a></li>
                            </ul>
                        </li>
                        <li><a href="#">Business</a></li>
                    </ul>
                </li>
                <li><a href="#">Food & Cooking</a>
                    <ul>
                        <li><a href="#">Breakfast</a></li>
                        <li><a href="#">Lunch</a></li>
                        <li><a href="#">Dinner</a></li>
                        <li><a href="#">Dessert</a>
                            <ul>
                                <li><a href="#">Dump Cake</a></li>
                                <li><a href="#">Doritos</a></li>
                                <li><a href="#">Both please.</a></li>
                            </ul>
                        </li>
                    </ul>
                </li>
                <li><a href="#">Lifestyle</a></li>
                <li><a href="#">News</a></li>
                <li><a href="#">Politics</a></li>
                <li><a href="#">Sports</a></li>
            </ul>

Add the following script to initialize the widget:

<script type="text/javascript">
        $(document).ready(function () {
            $("#menu1").wijmenu();
            $("#menu2").wijmenu({
                orientation: 'vertical'
            });
        });
    </script>

Run your application. Your vertical menu should resemble the following image: