Use Custom Icons

The wijmenu widget supports using custom icons in the menu. You will use special markup to apply the icons to the wijmenu widget. See the Menu > Icon sample of the MVC Control Explorer live demo at http://demo.componentone.com/ASPNET/MVCExplorer/menu/Icon .

Complete the following steps to create a menu with custom icons:

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.

Insert the following markup in the Index.cshtml view to create an unordered list with submenus:

<ul id="menu1">
                <li><a><span class="ui-icon ui-icon-arrowthick-1-w wijmo-wijmenu-icon-left"></span><span class="wijmo-wijmenu-text">
                    Menu1</span></a></li>
                <li><a><span class="ui-icon ui-icon-arrowrefresh-1-s wijmo-wijmenu-icon-left"></span><span class="wijmo-wijmenu-text">
                    Menu2</span></a>
                    <ul>
                        <li><a>submenu1</a></li>
                        <li><a>submenu2</a>
                            <ul>
                                <li><a>submenu21</a></li>
                                <li><a>submenu22</a></li>
                                <li><a>submenu23</a></li>
                                <li><a>submenu24</a></li>
                                <li><a>submenu25</a></li>
                            </ul>
                        </li>
                        <li><a>submenu3</a></li>
                        <li><a>submenu4</a>
                            <ul>
                                <li><a>submenu41</a></li>
                                <li><a>submenu42</a></li>
                                <li><a>submenu43</a></li>
                                <li><a>submenu44</a></li>
                                <li><a>submenu45</a></li>
                                <li><a>submenu46</a></li>
                                <li><a>submenu47</a></li>
                                <li><a>submenu48</a></li>
                            </ul>
                        </li>
                        <li><a>submenu5</a></li>
                        <li><a>submenu6</a></li>
                        <li><a>submenu7</a></li>
                        <li><a>submenu8</a></li>
                    </ul>
                </li>
                <li><a><span class="ui-icon ui-icon-comment wijmo-wijmenu-icon-left"></span><span class="wijmo-wijmenu-text">Menu3</span></a></li>
                <li><a><span class="ui-icon ui-icon-person wijmo-wijmenu-icon-left"></span><span class="wijmo-wijmenu-text">Menu4</span></a></li>
                <li><a><span class="ui-icon ui-icon-trash wijmo-wijmenu-icon-left"></span><span class="wijmo-wijmenu-text">Menu5</span></a></li>
                <li><a><span class="ui-icon ui-icon-bookmark wijmo-wijmenu-icon-left"></span><span class="wijmo-wijmenu-text">Menu6</span></a>
                    <ul>
                        <li><a>submenu61</a></li>
                        <li><a>submenu62</a></li>
                        <li><a>submenu63</a></li>
                        <li><a>submenu64</a></li>
                        <li><a>submenu65</a></li>
                        <li><a>submenu66</a></li>
                        <li><a>submenu67</a></li>
                        <li><a>submenu68</a></li>
                        <li><a>submenu69</a></li>
                    </ul>
                </li>
                <li><a><span class="ui-icon ui-icon-clock wijmo-wijmenu-icon-left"></span><span class="wijmo-wijmenu-text">Menu7</span></a></li>
                <li><a><span class="ui-icon ui-icon-minusthick wijmo-wijmenu-icon-left"></span><span class="wijmo-wijmenu-text">Menu8</span></a></li>
            </ul>

Add the following script to initialize the widget:

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

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