iHwy jQuery ListMenu Plugin Demos
Get it on Github

Donate via PayPal

Using defaults to display 400+ items

This is the easiest way to use the plugin. The defaults are left as is (4 columns with 40px spacing between them). In this example a plain UL list of 400+ items is converted to a snazzy dropdown menu. See demo 2 for how the UL looked before the listmenu plugin was applied.


  $('#demo1').listmenu();

Some placeholder text

Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Vestibulum tortor quam, feugiat vitae, ultricies eget, tempor sit amet, ante. Donec eu libero sit amet quam egestas semper. Aenean ultricies mi vitae est. Mauris placerat eleifend leo. Quisque sit amet est et sapien ullamcorper pharetra. Vestibulum erat wisi, condimentum sed, commodo vitae, ornare sit amet, wisi. Aenean fermentum, elit eget tincidunt condimentum, eros ipsum rutrum orci, sagittis tempus lacus enim ac dui. Donec non enim in turpis pulvinar facilisis. Ut felis.

Before and after applying the listmenu plugin

This example shows the same UL list used for demo 1 before the listmenu plugin is applied. Scroll down to view the full list, then click the button to apply the listmenu plugin.



Some placeholder text

Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Vestibulum tortor quam, feugiat vitae, ultricies eget, tempor sit amet, ante. Donec eu libero sit amet quam egestas semper. Aenean ultricies mi vitae est. Mauris placerat eleifend leo. Quisque sit amet est et sapien ullamcorper pharetra. Vestibulum erat wisi, condimentum sed, commodo vitae, ornare sit amet, wisi. Aenean fermentum, elit eget tincidunt condimentum, eros ipsum rutrum orci, sagittis tempus lacus enim ac dui. Donec non enim in turpis pulvinar facilisis. Ut felis.

Overriding some of the defaults

In this example, we override default values for some of the listmenu options. Since the list has no items starting with numbers and some items that start with a characters other than A-Z (like Ä and Ü), we set includeNums:false and includeOther:true. We also customize the text that appears when a letter has no matching items, hide the 'counts' that oridinarily appear above the menu and set the column count to 5 with a 15px gutter between the columns.


  $('#demo3').listmenu({
    includeNums: false, includeOther: true, showCounts: false,
    noMatchText: 'No items under this letter',  cols:{ count:5, gutter:15 }
  });

Some placeholder text

Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Vestibulum tortor quam, feugiat vitae, ultricies eget, tempor sit amet, ante. Donec eu libero sit amet quam egestas semper. Aenean ultricies mi vitae est. Mauris placerat eleifend leo. Quisque sit amet est et sapien ullamcorper pharetra. Vestibulum erat wisi, condimentum sed, commodo vitae, ornare sit amet, wisi. Aenean fermentum, elit eget tincidunt condimentum, eros ipsum rutrum orci, sagittis tempus lacus enim ac dui. Donec non enim in turpis pulvinar facilisis. Ut felis.

Using an OL ordered list

This example shows using an OL and the default options. Items under each menu item start at 1 and stay in sequence across columns.


  $('#demo4').listmenu();
  1. Agilith
  2. Aible
  3. Aivee
  4. Babblespace
  5. Babbleworks
  6. Blogbean
  7. Blogclub
  8. Blognation
  9. Blogpoint
  10. Bluepoint
  11. Bluespan
  12. Browsecat
  13. Browsevine
  14. Bubblecast
  15. Bubblelounge
  16. Bubblenation
  17. BuzzXS
  18. Camidel
  19. Centiba
  20. Centiveo
  21. Chatbridge
  22. Chatfish
  23. Chatshots
  24. Chatterbird
  25. Chatterblab
  26. Chatterware
  27. Cogilia
  28. Coginti
  29. Dablist
  30. Dazzleify
  31. Dazzletube
  32. Deminu
  33. Devjam
  34. Devlinks
  35. Devmix
  36. Devnation
  37. Devpoint
  38. Digijam
  39. Divanix
  40. Divanu
  41. Dynambu
  42. Dynanti
  43. Eanoodle
  44. Eanu
  45. Eata
  46. Edgefish
  47. Edgeopia
  48. Eiyo
  49. Fagen
  50. Famia
  51. Feedbeat
  52. Feedbridge
  53. Feedpath
  54. Feedshare
  55. Fivebridge
  56. Fivetype
  57. Flashfeed
  58. Flashshare
  59. Flashtags
  60. Flashtype
  61. Fliplist
  62. Flipset
  63. Gabpoint
  64. Gabsphere
  65. Gevee
  66. Gigacat
  67. Gigapad
  68. Gigapedia
  69. Idel
  70. Indo
  71. Innobridge
  72. Innoify
  73. Innotype
  74. Innovine
  75. Inyx
  76. Itz
  77. Jabberbean
  78. Jabberclub
  79. Jabberify
  80. Jabbervine
  81. Jalith
  82. Jaxnation
  83. Jaxspace
  84. Jaxtags
  85. Jazio
  86. Jetjam
  87. Jetset
  88. Jumpspan
  89. Katz
  90. Kaylith
  91. Kayzu
  92. Kazio
  93. Kidoo
  94. Kilane
  95. Kimbo
  96. Kinder
  97. Kizu
  98. Lable
  99. Leeba
  100. Leedeo
  101. Leemia
  102. Linkbox
  103. Linktune
  104. Livetag
  105. Liveworks
  106. Meembo
  107. Meente
  108. Mimm
  109. Mire
  110. Myble
  111. Mypoint
  112. Mystorm
  113. MyXS
  114. Myzio
  115. Nfire
  116. Nfish
  117. Nworks
  118. Ocero
  119. Omm
  120. Onu
  121. Oyobox
  122. Oyolane
  123. Oyovee
  124. Photobean
  125. Pixonoodle
  126. Pixonu
  127. Pladeo
  128. Podbeat
  129. Podtag
  130. Podtags
  131. Quayo
  132. Quiveo
  133. Realcube
  134. RealXS
  135. Rifffire
  136. Riffpedia
  137. Riffshare
  138. Roonu
  139. Roope
  140. Skambee
  141. Skamia
  142. Skazio
  143. Skido
  144. Skimm
  145. Skinti
  146. Skipspan
  147. Skipworks
  148. Skixo
  149. Skylium
  150. Snapbird
  151. Snapdrive
  152. Snapsphere
  153. Tagdog
  154. Tagtube
  155. Tagwire
  156. Tamm
  157. Tazzy
  158. Tekbug
  159. Tekfire
  160. Tekmix
  161. Tekpath
  162. Tektype
  163. Tekzoom
  164. Thoughtware
  165. Thoughtwire
  166. Topdrive
  167. Topictune
  168. Toptune
  169. Truloo
  170. Truva
  171. Truzz
  172. Twitterchat
  173. Vizz
  174. Voonix
  175. Voonoodle
  176. Voonyx
  177. Wikinder
  178. Wordspan
  179. Yakimia
  180. Yakiva
  181. Yakivu
  182. Yava
  183. Yaveo
  184. Yoble
  185. Yodel
  186. Yonu
  187. Youbuzz
  188. Younation
  189. Zatri
  190. Zoomm
  191. Zoompad
  192. Zoompulse

Some placeholder text

Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Vestibulum tortor quam, feugiat vitae, ultricies eget, tempor sit amet, ante. Donec eu libero sit amet quam egestas semper. Aenean ultricies mi vitae est. Mauris placerat eleifend leo. Quisque sit amet est et sapien ullamcorper pharetra. Vestibulum erat wisi, condimentum sed, commodo vitae, ornare sit amet, wisi. Aenean fermentum, elit eget tincidunt condimentum, eros ipsum rutrum orci, sagittis tempus lacus enim ac dui. Donec non enim in turpis pulvinar facilisis. Ut felis.

Using any kind of child elements

You can use any type of HTML elements for the menu. The listmenu plugin treats the first level of child elements as the items to be used for the menu (make sure they are block elements or styled with 'display:block' so that they appear as a list and not next to each other). Any content inside the child elements comes alongs for the ride. Take a look a the menu under letter 'D' for a trick that will let you create a subtitle for a submenu without having to start the subtitle with the same letter as the items in the submenu.


  $('#demo5').listmenu();

0-9 items are in <p> tags

101 pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis.

202 tristique senectus et netus habitant.

505 pellentesque habitant morbi tristique senectus et netus et.

606 malesuada.

621 tristique senectus et netus.

730 pellentesque habitant morbi tristique senectus et netus et.

781 habitant morbi tristique senectus.

804 tristique senectus et netus habitant.

833 pellentesque habitant morbi tristique senectus et netus et.

870 tristique senectus et netus.

971 tristique senectus et netus habitant.

A items are in <div> tags, except this one, which is in a <p> tag. You can mix and match.

A tristique senectus et netus.
A tristique senectus et netus habitant.
A pellentesque habitant morbi tristique senectus et netus et.
A pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis.
A malesuada.
A tristique senectus et netus.
A pellentesque habitant morbi tristique senectus et netus et.
A habitant morbi tristique senectus.
A malesuada.
A tristique senectus et netus habitant.
A pellentesque habitant morbi tristique senectus et netus et.
A tristique senectus et netus.
A tristique senectus et netus habitant.

B items are in <a> tags (styled with display:block)

Blogbean Blogclub Blogpoint Bluepoint Bluespan Browsecat Browsevine Bubblecast Bubblelounge Bubblenation BuzzXS

C items are in various tags (<a> tags are styled with display:block)

C tristique senectus et netus.

C tristique senectus et netus.

C pellentesque habitant morbi tristique senectus et netus et.

C pellentesque habitant morbi tristique senectus et netus et.

C malesuada.

Cluepoint Cropcat

C habitant morbi tristique senectus.

C habitant morbi tristique senectus.
Cluespan

C pellentesque habitant morbi tristique senectus et netus et.

C malesuada.
C tristique senectus et netus habitant.
C pellentesque habitant morbi tristique senectus et netus et.
Clogpoint Cropvine

DThis sentence doesn't start with D, but appears under D because the item starts with a hidden 'D' in a span with style="display:none"

D pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis.

D tristique senectus et netus habitant.

D pellentesque habitant morbi tristique senectus et netus et.

D malesuada.

D tristique senectus et netus.

D pellentesque habitant morbi tristique senectus et netus et.

D habitant morbi tristique senectus.

D tristique senectus et netus habitant.

D tristique senectus et netus habitant.

D pellentesque habitant morbi tristique senectus et netus et.

D malesuada.

D tristique senectus et netus.


Some placeholder text

Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Vestibulum tortor quam, feugiat vitae, ultricies eget, tempor sit amet, ante. Donec eu libero sit amet quam egestas semper. Aenean ultricies mi vitae est. Mauris placerat eleifend leo. Quisque sit amet est et sapien ullamcorper pharetra. Vestibulum erat wisi, condimentum sed, commodo vitae, ornare sit amet, wisi. Aenean fermentum, elit eget tincidunt condimentum, eros ipsum rutrum orci, sagittis tempus lacus enim ac dui. Donec non enim in turpis pulvinar facilisis. Ut felis.

Address book

This example shows how the content of child elements are kept with each list item, creating an easy access address book. It also shows use of the onClick option to fire a function when the user clicks a link in the dropdown menu.


  $('#demo6').listmenu({
    noMatchText: 'No contacts available', cols:{ count:3, gutter:35 },
    onClick:function($target){ if($target.is('a')){ alert($target.text() + ' was clicked'); }}
  });
  • Agilith

    123 Main St.
    San Francisco, CA 94117

  • Aible

    123 Main St.
    San Francisco, CA 94117

  • Aivee

    123 Main St.
    San Francisco, CA 94117

  • Babbleworks

    123 Main St.
    San Francisco, CA 94117

  • Blogbean

    123 Main St.
    San Francisco, CA 94117

  • Blognation

    123 Main St.
    San Francisco, CA 94117

  • Bluepoint

    123 Main St.
    San Francisco, CA 94117

  • Browsecat

    123 Main St.
    San Francisco, CA 94117

  • Bubblecast

    123 Main St.
    San Francisco, CA 94117

  • Bubblelounge

    123 Main St.
    San Francisco, CA 94117

  • Bubblenation

    123 Main St.
    San Francisco, CA 94117

  • BuzzXS

    123 Main St.
    San Francisco, CA 94117

  • Camidel

    123 Main St.
    San Francisco, CA 94117

  • Centiba

    123 Main St.
    San Francisco, CA 94117

  • Centiveo

    123 Main St.
    San Francisco, CA 94117

  • Chatbridge

    123 Main St.
    San Francisco, CA 94117

  • Chatfish

    123 Main St.
    San Francisco, CA 94117

  • Chatterbird

    123 Main St.
    San Francisco, CA 94117

  • Chatterblab

    123 Main St.
    San Francisco, CA 94117

  • Chatterware

    123 Main St.
    San Francisco, CA 94117

  • Cogilia

    123 Main St.
    San Francisco, CA 94117

  • Coginti

    123 Main St.
    San Francisco, CA 94117

  • Dablist

    123 Main St.
    San Francisco, CA 94117

  • Dazzletube

    123 Main St.
    San Francisco, CA 94117

  • Devjam

    123 Main St.
    San Francisco, CA 94117

  • Devlinks

    123 Main St.
    San Francisco, CA 94117

  • Devmix

    123 Main St.
    San Francisco, CA 94117

  • Devpoint

    123 Main St.
    San Francisco, CA 94117

  • Divanix

    123 Main St.
    San Francisco, CA 94117

  • Divanu

    123 Main St.
    San Francisco, CA 94117

  • Dynambu

    123 Main St.
    San Francisco, CA 94117

  • Dynanti

    123 Main St.
    San Francisco, CA 94117

  • Eanoodle

    123 Main St.
    San Francisco, CA 94117

  • Eanu

    123 Main St.
    San Francisco, CA 94117

  • Edgefish

    123 Main St.
    San Francisco, CA 94117

  • Edgeopia

    123 Main St.
    San Francisco, CA 94117

  • Fagen

    123 Main St.
    San Francisco, CA 94117

  • Famia

    123 Main St.
    San Francisco, CA 94117

  • Feedbeat

    123 Main St.
    San Francisco, CA 94117

  • Feedbridge

    123 Main St.
    San Francisco, CA 94117

  • Feedshare

    123 Main St.
    San Francisco, CA 94117

  • Fivetype

    123 Main St.
    San Francisco, CA 94117

  • Flashshare

    123 Main St.
    San Francisco, CA 94117

  • Flashtype

    123 Main St.
    San Francisco, CA 94117

  • Flipset

    123 Main St.
    San Francisco, CA 94117

  • Gabpoint

    123 Main St.
    San Francisco, CA 94117

  • Gevee

    123 Main St.
    San Francisco, CA 94117

  • Gigacat

    123 Main St.
    San Francisco, CA 94117

  • Gigapad

    123 Main St.
    San Francisco, CA 94117

  • Gigapedia

    123 Main St.
    San Francisco, CA 94117

  • Idel

    123 Main St.
    San Francisco, CA 94117

  • Innoify

    123 Main St.
    San Francisco, CA 94117

  • Innotype

    123 Main St.
    San Francisco, CA 94117

  • Inyx

    123 Main St.
    San Francisco, CA 94117

  • Itz

    123 Main St.
    San Francisco, CA 94117

  • Jabberify

    123 Main St.
    San Francisco, CA 94117

  • Jalith

    123 Main St.
    San Francisco, CA 94117

  • Jaxnation

    123 Main St.
    San Francisco, CA 94117

  • Jazio

    123 Main St.
    San Francisco, CA 94117

  • Jumpspan

    123 Main St.
    San Francisco, CA 94117

  • Katz

    123 Main St.
    San Francisco, CA 94117

  • Kaylith

    123 Main St.
    San Francisco, CA 94117

  • Kayzu

    123 Main St.
    San Francisco, CA 94117

  • Kidoo

    123 Main St.
    San Francisco, CA 94117

  • Kimbo

    123 Main St.
    San Francisco, CA 94117

  • Leeba

    123 Main St.
    San Francisco, CA 94117

  • Leedeo

    123 Main St.
    San Francisco, CA 94117

  • Leemia

    123 Main St.
    San Francisco, CA 94117

  • Linkbox

    123 Main St.
    San Francisco, CA 94117

  • Linktune

    123 Main St.
    San Francisco, CA 94117

  • Livetag

    123 Main St.
    San Francisco, CA 94117

  • Mimm

    123 Main St.
    San Francisco, CA 94117

  • Myble

    123 Main St.
    San Francisco, CA 94117

  • Mystorm

    123 Main St.
    San Francisco, CA 94117

  • MyXS

    123 Main St.
    San Francisco, CA 94117

  • Myzio

    123 Main St.
    San Francisco, CA 94117

  • Nfire

    123 Main St.
    San Francisco, CA 94117

  • Nfish

    123 Main St.
    San Francisco, CA 94117

  • Ocero

    123 Main St.
    San Francisco, CA 94117

  • Omm

    123 Main St.
    San Francisco, CA 94117

  • Onu

    123 Main St.
    San Francisco, CA 94117

  • Oyobox

    123 Main St.
    San Francisco, CA 94117

  • Oyolane

    123 Main St.
    San Francisco, CA 94117

  • Oyovee

    123 Main St.
    San Francisco, CA 94117

  • Photobean

    123 Main St.
    San Francisco, CA 94117

  • Pixonoodle

    123 Main St.
    San Francisco, CA 94117

  • Pixonu

    123 Main St.
    San Francisco, CA 94117

  • Pladeo

    123 Main St.
    San Francisco, CA 94117

  • Podbeat

    123 Main St.
    San Francisco, CA 94117

  • Quayo

    123 Main St.
    San Francisco, CA 94117

  • Quiveo

    123 Main St.
    San Francisco, CA 94117

  • Realcube

    123 Main St.
    San Francisco, CA 94117

  • RealXS

    123 Main St.
    San Francisco, CA 94117

  • Rifffire

    123 Main St.
    San Francisco, CA 94117

  • Riffpedia

    123 Main St.
    San Francisco, CA 94117

  • Riffshare

    123 Main St.
    San Francisco, CA 94117

  • Roope

    123 Main St.
    San Francisco, CA 94117

  • Skambee

    123 Main St.
    San Francisco, CA 94117

  • Skamia

    123 Main St.
    San Francisco, CA 94117

  • Skazio

    123 Main St.
    San Francisco, CA 94117

  • Skimm

    123 Main St.
    San Francisco, CA 94117

  • Skinti

    123 Main St.
    San Francisco, CA 94117

  • Skipworks

    123 Main St.
    San Francisco, CA 94117

  • Skixo

    123 Main St.
    San Francisco, CA 94117

  • Snapbird

    123 Main St.
    San Francisco, CA 94117

  • Snapsphere

    123 Main St.
    San Francisco, CA 94117

  • Tagdog

    123 Main St.
    San Francisco, CA 94117

  • Tagtube

    123 Main St.
    San Francisco, CA 94117

  • Tagwire

    123 Main St.
    San Francisco, CA 94117

  • Tamm

    123 Main St.
    San Francisco, CA 94117

  • Tazzy

    123 Main St.
    San Francisco, CA 94117

  • Tekmix

    123 Main St.
    San Francisco, CA 94117

  • Tekpath

    123 Main St.
    San Francisco, CA 94117

  • Tektype

    123 Main St.
    San Francisco, CA 94117

  • Thoughtware

    123 Main St.
    San Francisco, CA 94117

  • Thoughtwire

    123 Main St.
    San Francisco, CA 94117

  • Truloo

    123 Main St.
    San Francisco, CA 94117

  • Truva

    123 Main St.
    San Francisco, CA 94117

  • Truzz

    123 Main St.
    San Francisco, CA 94117

  • Twitterchat

    123 Main St.
    San Francisco, CA 94117

  • Vizz

    123 Main St.
    San Francisco, CA 94117

  • Voonoodle

    123 Main St.
    San Francisco, CA 94117

  • Voonyx

    123 Main St.
    San Francisco, CA 94117

  • Wikinder

    123 Main St.
    San Francisco, CA 94117

  • Yakimia

    123 Main St.
    San Francisco, CA 94117

  • Yakiva

    123 Main St.
    San Francisco, CA 94117

  • Yakivu

    123 Main St.
    San Francisco, CA 94117

  • Yaveo

    123 Main St.
    San Francisco, CA 94117

  • Yoble

    123 Main St.
    San Francisco, CA 94117

  • Yodel

    123 Main St.
    San Francisco, CA 94117

  • Yonu

    123 Main St.
    San Francisco, CA 94117

  • Youbuzz

    123 Main St.
    San Francisco, CA 94117

  • Younation

    123 Main St.
    San Francisco, CA 94117

  • Zatri

    123 Main St.
    San Francisco, CA 94117

  • Zoomm

    123 Main St.
    San Francisco, CA 94117

  • Zoompad

    123 Main St.
    San Francisco, CA 94117

  • Zoompulse

    123 Main St.
    San Francisco, CA 94117


Some placeholder text

Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Vestibulum tortor quam, feugiat vitae, ultricies eget, tempor sit amet, ante. Donec eu libero sit amet quam egestas semper. Aenean ultricies mi vitae est. Mauris placerat eleifend leo. Quisque sit amet est et sapien ullamcorper pharetra. Vestibulum erat wisi, condimentum sed, commodo vitae, ornare sit amet, wisi. Aenean fermentum, elit eget tincidunt condimentum, eros ipsum rutrum orci, sagittis tempus lacus enim ac dui. Donec non enim in turpis pulvinar facilisis. Ut felis.

©2009 iHwy, Inc. For support, post to the jQuery Plugins Forum with "listmenu" in the subject line. No guarantees, but we monitor it regularly. Thanks to HTML Ipsum and Web 2.0 Name Generator for some placeholder content. Tap into our jQuery skills for your project! Shoot us a message.