Menu

Default

All versions of the menu are a <ul> filled with <li> elements containing links. By default, a Menu is horizontally oriented.

Basic Menus

Basic menus can be created by adding the class .menu to any list element.

• One
• Two
• Three 8
• Four

Align Center

To align items in the middle, add .align-center to the menu.

• One
• Two
• Three
• Four

Align Right

To align items in to the right, add .align-right to the menu.

• One
• Two
• Three
• Four

Expanded

To make the menu items equally fill the horizontal space, add .expanded to the menu.

• One 8
• Two 8

Simple

To strip the formatting like padding and color changes, add .simple to the menu.

• One
• Two 8
• Three
• Four

Text

Add the class .menu-text to any <li> that doesn’t have a link inside of it.

• Site Title
• One
• Two
• Three 8

Dropdown Menu

Change a basic Menu into an expandable dropdown menu with the Dropdown Menu plugin.

Dropdown Menu

• Item 1
  • Item 1A
  • Item 1B
    • Item 1B i
    • Item 1B ii
    • Item 1B iii
      • Item 1B iii alpha
      • Item 1B iii omega
    • Item 1B iv
      • Item 1B iv alpha
  • Item 1C
• Item 2
  • Item 2A
  • Item 2B
• Item 3
• Item 4

Vertical Menus

Add .vertical to the menu to switch its orientation from horizontal to vertical.

• One 8
• Two
• Three 8
• Four

Nested Menus

Add a new menu inside the <li> of a Menu and add the class .nested to create a nested menu. The nested Menu has extra padding on the inside.

• One
  
  • One
  • Two 8
• Two
• Three 8
• Four

Icons

Menu items can have icons too. Wrap the text of the item in a <span> and then add the <i> before the <span>.

• child_friendly One
• cake Two
• weekend Three
• mail Four

Icon Top

Add the class .icon-top to the Menu to orient icons above the text.

• child_friendly One
• cake Two
• weekend Three
• mail Four

Menus with Badges

Basic menus can be created by adding the class .menu to any list element.

• One 8
• Two
• Three 3
• Four