1. Home

How To Create a Vertical Menu

Learn how to create a vertical menu with CSS

Vertical Menu

Home Link 1 Link 2 Link 3 Link 4
Try it Yourself »

How To Create a Vertical Button Group

Step 1) Add HTML:

Example

<div class="vertical-menu">
  <a href="#" class="active">Home</a>
  <a href="#">Link 1</a>
  <a href="#">Link 2</a>
  <a href="#">Link 3</a>
  <a href="#">Link 4</a>
</div>

Step 2) Add CSS:

Example

.vertical-menu {
  width: 200px; /* Set a width if you like */
}

.vertical-menu a {
  background-color: #eee; /* Grey background color */
  color: black; /* Black text color */
  display: block; /* Make the links appear below each other */
  padding: 12px; /* Add some padding */
  text-decoration: none; /* Remove underline from links */
}

.vertical-menu a:hover {
  background-color: #ccc; /* Dark grey background on mouse-over */
}

.vertical-menu a.active {
  background-color: #04AA6D; /* Add a green color to the "active/current" link */
  color: white;
}
Try it Yourself »

Vertical Scroll Menu

Home Link 1 Link 2 Link 3 Link 4 Link 5 Link 6 Link 7 Link 8 Link 9 Link 10

Set a specific height and add the overflow property if you want a vertical scroll menu:

Example

.vertical-menu {
  width: 200px;
  height: 150px;
  overflow-y: auto;
}
Try it Yourself »
Tip: Check out our How To - Side Navigation tutorial to learn how to create a fixed, full-height side navigation.

Categories

HTML CSS3 Bootstrap Foundation Sass JavaScript TypeScript JQuery AngularJS React NodeJS Highcharts PHP Python Python3 Django Linux Docker Ruby Java C C ++ Perl Servlet JSP Lua Scala Go ASP C # SQL MySQL SQLite MongoDB Redis Android Swift ionic Kotlin XML tutorial

Contact US