---
title: "Vertical Menu using BootStrap in ASP.Net"  
description: "In this blog, I’m explaining how to make vertical menu using Bootstrap in ASP.Net  Example  :-In This Example we Create vertical menu Using BootStrap"  
author: "Anonymous User"  
published: 2014-01-15  
updated: 2014-09-18  
canonical: https://www.mindstick.com/blog/629/vertical-menu-using-bootstrap-in-asp-dot-net  
category: "bootstrap"  
tags: ["bootstrap"]  
reading_time: 2 minutes  

---

# Vertical Menu using BootStrap in ASP.Net

In this [blog](https://www.mindstick.com/articles/12705/myths-and-misconception-about-blog), I’m explaining how to make [vertical](https://www.mindstick.com/forum/12951/how-to-fix-bootstrap-tab-vertical-with-text) menu using [Bootstrap in ASP.Net](https://www.mindstick.com/forum/33429/editable-list-view-system-using-bootstrap-in-asp-dot-net)\

##### Example :-

##

In This Example we Create vertical menu Using [BootStrap File](https://www.mindstick.com/forum/156874/how-to-create-bootstrap-file-to-design-web-page-in-bootstrap-5)

##### Form Design:-

```
<%@ Page Language="C#" AutoEventWireup="true" CodeFile="Menu.aspx.cs" Inherits="Menu" %><!DOCTYPE html><html xmlns="http://www.w3.org/1999/xhtml"><head runat="server">    <title></title>    <script src="Js/jquery-1.8.3.min.js"></script>    <script src="Js/jquery-ui-1.9.2.custom.min.js"></script>    <link href="Bootstrap/jquery-ui-1.10.3.custom.css" rel="stylesheet" /></head><body>    <form id="form1" runat="server">        <div>             <div class="page-header">                <h1>Menu</h1>            </div>            <ul id="menu">                <li><a href="#" id="ui-id-16">Indore</a></li>                <li><a href="#" id="ui-id-17">Ambala</a></li>                <li><a href="#" id="ui-id-18">Kanpur</a></li>                <li><a href="#" id="ui-id-19">Lucknow</a></li>                <li>                    <a href="#"><span></span>Allahabad</a>                    <ul style="display: none; top: 10010px; left: 593px;">                         <li><a href="#" id="ui-id-23">Prayag</a></li>                        <li><a href="#" id="ui-id-24">Mindstick</a></li>                        <li><a href="#" id="ui-id-25">Civil Lines</a></li>                    </ul>                </li>                <li><a href="#" id="ui-id-21">Vanaras</a></li>                <li>                    <a href="#" id="ui-id-22"><span></span>Azamgarh</a>                    <ul style="display: none; top: 10056px; left: 593px;">                        <li>                            <a href="#" aria-haspopup="true" id="ui-id-26"><span></span>Sangam</a>                            <ul style="display: none;">                                <li><a href="#" id="ui-id-29">Akbar Fort</a></li>                                <li><a href="#" id="ui-id-30">Army Camp</a></li>                                <li><a href="#" id="ui-id-31">Water Fall</a></li>                            </ul>                        </li>                        <li>                            <a href="?Delphi" id="ui-id-27"><span></span>Fatehpur</a>                            <ul>                                <li><a href="#" id="ui-id-32">Ada</a></li>                                <li><a href="#" id="ui-id-33">Saarland</a></li>                                <li><a href="#" id="ui-id-34">Salzburg</a></li>                            </ul>                        </li>                        <li><a href="#" id="ui-id-28">Perch</a></li>                    </ul>                </li>            </ul>        </div>    </form></body></html><script type="text/javascript">    $(document).ready(function () {        $("#menu").menu();    });</script>
```

##### Use this BootStrap File :-

```
 <script src="Js/jquery-1.8.3.min.js"></script><script src="Js/jquery-ui-1.9.2.custom.min.js"></script><link href="Bootstrap/jquery-ui-1.10.3.custom.css" rel="stylesheet" />
```

[Download](https://www.mindstick.com/articles/188403/website-to-download-photos-from-instagram) and add the above three [files](https://www.mindstick.com/articles/23302/the-importance-and-advantage-of-keeping-your-important-files-on-the-cloud) into your [projects](https://www.mindstick.com/articles/105927/how-to-excel-at-managing-multiple-projects) because it’s mandatory for using the bootstrap [libraries](https://answers.mindstick.com/qa/49244/which-company-is-ahead-in-classification-of-data-for-libraries-innovations) and methods.

##### Use slider Method :-

```
<script type="text/javascript">     $(document).ready(function () {        $("#menu").menu();    });</script>
```

##### OutPut

![Vertical Menu using BootStrap in ASP.Net](https://www.mindstick.com/blogs/d5ec4cc6-98f2-4860-9b22-e2e0ab05c158/images/332f5883-b8bf-40d3-bd92-6dd6c73cbb8d.png)

in my next post i'll explain about [Horizontal](https://www.mindstick.com/blog/630/Horizontal%20Menu%20using%20JQuery%20in%20ASP%20Net) Menu using JQuery in ASP.Net

---

Original Source: https://www.mindstick.com/blog/629/vertical-menu-using-bootstrap-in-asp-dot-net

Copyright © MindStick Software Pvt. Ltd. This Markdown version is provided for developers, AI systems, and offline reading.
