---
title: "How to Create a Horizontal Menu in Joomla 3.1"
description: "By default, menus in Joomla 3.0 will be displayed vertically. Many users would like to instead create horizontal menus, such as a menu that appears at the top of your website. In this tutorial, we'll..."
url: https://www.inmotionhosting.com/support/edu/joomla/joomla-3/horizontal-menu/
date: 2012-09-25
modified: 2021-11-19
author: "Brad Markle"
categories: ["Joomla", "Joomla 3"]
tags: ["Joomla v3"]
type: post
lang: en
---

# How to Create a Horizontal Menu in Joomla 3.1

By default, menus in Joomla 3.0 will be displayed vertically. Many users would like to instead **create horizontal menus**, such as a menu that appears at the top of your website. In this tutorial, we’ll walk you through the steps for creating a horizontal menu in Joomla 3.0.

Creating a horizontal menu in Joomla 3.0 is not as difficult as [creating a horizontal menu in Joomla 2.5](/support/edu/joomla/joomla-2-5/create-horizontal-menu/). This is mostly due to the addition of [bootstrap in Joomla 3.0](/support/website/website-design/developer-access/). In this article we’ll show you how to use bootstrap’s [nav-pills CSS class](https://twitter.github.com/bootstrap/components.html#navs) to make a hoizontal menu.

## Creating a Horizontal Menu in Joomla 3.0:

In this tutorial, we’ll assume that you’ve already created a menu in Joomla 3.0 and assigned it to a position. The following steps walk you through updating an existing menu so that it displays horizontally.

1. [Log into your Joomla 3.0 administrative dashboard](/support/edu/joomla/joomla-3/how-to-log-in-to-administrative-dashboard/)
2. In the top menu, click **Extensions** and then click **Module Manager**
3. In the list of modules, click on the module for the menu you would like to modify. Make sure it’s *Type* is menu.
4. Within the set of tabs toward the top of the page, click the **Options** tab, then click the **Advanced Options** link, to access the settings.
5. Find the following setting: **Menu Class Suffix***A suffix to be applied to the CSS class of the menu items* For this setting, enter **nav-pills** and then click the Save button in the top left of the page. **Important!** If you are using Joomla 3.02 and 3.03 or cannot get the nav-pills to work, you may need to add a SPACE before nav-pills entry. [![menu-class-suffix-nav-pills](https://www.inmotionhosting.com/support/wp-content/uploads/2012/09/edu_joomla-3_menus_menu-class-suffix-nav-pills.gif)](/support/wp-content/uploads/2012/09/edu_joomla-3_menus_menu-class-suffix-nav-pills.gif) You can see in the screenshots below how setting **nav-pills** as the *Menu Class Suffix* sets a menu to be horizontal. Menu Class Suffix: (empty) Menu Class Suffix: nav-pills [![vertical-menu](https://www.inmotionhosting.com/support/wp-content/uploads/2012/09/edu_joomla-3_menus_vertical-menu.gif)](/support/wp-content/uploads/2012/09/edu_joomla-3_menus_vertical-menu.gif) [![horizontal-menu](https://www.inmotionhosting.com/support/wp-content/uploads/2012/09/edu_joomla-3_menus_horizontal-menu.gif)](/support/wp-content/uploads/2012/09/edu_joomla-3_menus_horizontal-menu.gif)