jQuery ListNav Plugin Demo

View on GitHub

- Demo 1
- Demo 2
- Demo 3
- Demo 4
- Demo 5
- Demo 6
- Demo 7
- Demo 8

### The default configuration

    $('#demoOne').listnav();

This is the easiest way to use the plugin. None of the default options are overridden and a jQuery ID selector is used to bind the plugin to a single list.

- 411 Services
- Accountants
- Accounting & Bookkeeping - General Service
- Acupuncture
- Advertising
- Advertising - Agencies & Counselors
- Advertising - Computer
- Advertising - Promotional
- Attorneys - Service Bureaus
- Auctioneers
- Audio Visual Consultants
- Audio Visual Production Service
- Automobile - Renting
- Automobile - Repair & Service
- Banks
- Banquet Rooms
- Barber Shops
- Baseball Clubs
- Book Dealers - Used & Rare
- Bookbinders
- Brake Service
- Business - Management Consultants
- Business - Services
- Cabinet Makers
- Cabinets
- Cafeterias
- Calligraphers
- Campgrounds
- Cemeteries & Crematories
- Ceramic Products - Decorative
- Chambers of Commerce
- Crane Service
- Cruises
- Dancing Instruction
- Data Communications Equipment & Systems - Networks
- Deck Builders
- Delivery Service
- Dentists
- Department Stores
- Draperies & Curtains - Retail & Custom Made
- Drilling - Companies
- Driving - Instruction
- Drug - Abuse & Addiction Info & Treatment
- Drywall & Insulation Contractors
- Earthquake Products & Services
- E-Commerce
- Education Centers
- Educational Consultants
- Educational Service - Business
- Electric Contractors
- Electric Transmission Equipment (Manufacturers)
- Electrolysis
- Erosion Control
- Excavating Contractors
- Executive Search Consultants
- Exercise & Physical Fitness Programs
- Exterminating & Pest Control Services
- Fabric Shops
- Fabrics (Wholesale)
- Facilities Management
- Farms
- Foundation - Educational Philanthropic Research
- Fraternities & Sororities
- Games & Game Supplies
- Garbage Collection
- Garden Centers
- Gas - Liquefied Petroleum - Bottled & Bulk (Wholesale)
- Guide Service
- Gymnastic Instruction
- Halls & Auditoriums
- Handyman Services
- Hardware - Retail
- Hardwood
- Health & Diet Foods - Retail
- House & Building Movers
- House Cleaning
- Human Factors - Research & Development
- Human Resource Consultants
- Importers
- Industrial - Equipment & Supplies (Wholesale)
- Internet - Services
- Inventors
- Investigators
- Investment - Management
- Investments
- Janitor Service
- Jewelers (Wholesale)
- Jewelers - Retail
- Jewelry - Designers
- Laboratories
- Laboratories - Research & Development
- Land Companies
- Landfills - Sanitary
- Lumber (Manufacturers)
- Lumber - Retail
- Machine Shops
- Machinery - Rebuilding & Repairing (Wholesale)
- Machinery - Specially Designed & Built
- Magicians
- Maid & Butler Service
- Motorcycles - Supplies & Parts (Manufacturers)
- Multimedia (Manufacturers)
- Museums
- Newspaper - Publishers
- Nonclassifiable Establishments
- Non-Profit Organizations
- Nurseries - Plants & Trees (Wholesale)
- Nurserymen
- Nutritionists
- Paint - Retail
- Painters
- Parking Area & Lots Maintenance & Marking
- Parks
- Party Supplies
- Patio & Deck Cleaning & Restoration
- Paving Contractors
- Pumps (Wholesale)
- Quilting - Materials & Supplies
- Radio Stations & Broadcasting Companies
- Railroads
- Ranches
- Reading Improvement Instruction
- Reading Rooms
- Real Estate
- Real Estate - Appraisers
- Real Estate - Consultants
- Restaurants
- Restaurants - American
- Restaurants - Bakeries
- Restaurants - Barbecue
- Roofing - Materials
- Roofing - Service Consultants
- Sand & Gravel (Wholesale)
- School Supplies (Wholesale)
- Schools & Educational Services
- Schools - Nursery & Kindergarten Academic
- Schools - Universities & Colleges Academic
- Shoe & Boot Repairing
- Shoes - Retail
- Shopping Centers & Malls
- Shower Doors & Enclosures
- Sunglasses & Sun Goggles (Wholesale)
- Surveyors - Land
- Tanning Salons
- Tattooing
- Tax Consultants
- Tax Return Preparation & Filing
- Technical Manual Preparation
- Tools - Electric - Repairing & Parts
- Tours - Operators & Promoters
- Tutoring
- Ultrasonic Equipment & Supplies (Wholesale)
- Upholsterers
- Utilities - Underground - Cable Locating Service
- Vacuum Cleaners - Household - Dealers
- Vending Machines
- Ventilating Systems - Cleaning
- Venture Capital Companies
- Vineyards
- Vitamin Products (Manufacturers)
- Vitamins
- Wallpapers & Wallcoverings - Installation
- Windows - Repairing
- Wineries
- Wines - Consultants
- Wines - Retail
- Woodworkers
- Writers
- X-Ray - Apparatus & Supplies (Manufacturers)
- Yarn - Retail
- Yoga Instruction
- Youth Organizations & Centers

### Override defaults and binding to multiple lists

    $('.demoTwo').listnav({
        includeAll: false,
        noMatchText: 'There are no matching entries.'
    });

A jQuery class selector is used to bind to two lists. The `includeAll` default option is overridden, which causes the ALL link to be hidden and the first letter with matches to get pre-selected. The `noMatchText` default is overridden, providing a custom message for letters with no matching results.

- Accountants
- Accounting & Bookkeeping - General Service
- Acupuncture
- Advertising
- Banks
- Banquet Rooms
- Business - Services
- Cabinet Makers
- Cabinets
- Cafeterias
- Calligraphers
- Campgrounds
- Dancing Instruction
- Data Communications Equipment & Systems - Networks
- Deck Builders
- Drywall & Insulation Contractors
- Earthquake Products & Services
- E-Commerce
- Education Centers
- Educational Consultants
- Educational Service - Business
- Electric Contractors
- Electric Transmission Equipment (Manufacturers)
- Electrolysis
- Erosion Control
- Gas - Liquefied Petroleum - Bottled & Bulk (Wholesale)
- Guide Service
- Gymnastic Instruction
- Halls & Auditoriums
- Handyman Services
- Hardware - Retail
- Hardwood
- Jewelers - Retail
- Jewelry - Designers
- Laboratories
- Laboratories - Research & Development
- Land Companies
- Landfills - Sanitary
- Lumber (Manufacturers)
- Lumber - Retail
- Machine Shops
- Parking Area & Lots Maintenance & Marking
- Parks
- Party Supplies
- Patio & Deck Cleaning & Restoration
- Paving Contractors
- Pumps (Wholesale)
- Roofing - Service Consultants
- Sand & Gravel (Wholesale)
- School Supplies (Wholesale)
- Schools & Educational Services
- Schools - Nursery & Kindergarten Academic
- Schools - Universities & Colleges Academic
- Shoe & Boot Repairing
- Shoes - Retail
- Shopping Centers & Malls
- Shower Doors & Enclosures
- Tutoring
- Ultrasonic Equipment & Supplies (Wholesale)
- Upholsterers
- Windows - Repairing
- Wineries
- Wines - Consultants
- Wines - Retail
- Woodworkers

- Cabinet Makers
- Cabinets
- Cafeterias
- Calligraphers
- Campgrounds
- Dancing Instruction
- Data Communications Equipment & Systems - Networks
- Deck Builders
- Drywall & Insulation Contractors
- Earthquake Products & Services
- E-Commerce
- Education Centers
- Educational Consultants
- Educational Service - Business
- Electric Contractors
- Electric Transmission Equipment (Manufacturers)
- Electrolysis
- Erosion Control
- Gas - Liquefied Petroleum - Bottled & Bulk (Wholesale)
- Guide Service
- Gymnastic Instruction
- Halls & Auditoriums
- Handyman Services
- Hardware - Retail
- Hardwood
- Jewelers - Retail
- Jewelry - Designers
- Laboratories
- Laboratories - Research & Development
- Land Companies
- Landfills - Sanitary
- Lumber (Manufacturers)
- Lumber - Retail
- Machine Shops
- Parking Area & Lots Maintenance & Marking
- Parks
- Party Supplies
- Patio & Deck Cleaning & Restoration
- Paving Contractors
- Pumps (Wholesale)
- Roofing - Service Consultants
- Sand & Gravel (Wholesale)
- School Supplies (Wholesale)
- Schools & Educational Services
- Schools - Nursery & Kindergarten Academic
- Schools - Universities & Colleges Academic
- Shoe & Boot Repairing
- Shoes - Retail
- Shopping Centers & Malls
- Shower Doors & Enclosures
- Tutoring
- Ultrasonic Equipment & Supplies (Wholesale)
- Upholsterers
- Windows - Repairing
- Wineries
- Wines - Consultants
- Wines - Retail
- Woodworkers

### Using an OL, setting an `initLetter` and customizing the CSS

    $('#demoThree').listnav({
        initLetter: 'c'
    });

The `initLetter` option is set to letter 'c', which forces the list to load with that letter selected. The list is an OL (ordered list) and the numbers restart at 1 under each letter. The default styling is overridden to give the navigation and list a different look.

1. 411 Services
2. Accountants
3. Accounting & Bookkeeping - General Service
4. Acupuncture
5. Advertising
6. Advertising - Agencies & Counselors
7. Advertising - Computer
8. Advertising - Promotional
9. Attorneys - Service Bureaus
10. Auctioneers
11. Audio Visual Consultants
12. Audio Visual Production Service
13. Automobile - Renting
14. Automobile - Repair & Service
15. Cabinet Makers
16. Cabinets
17. Cafeterias
18. Calligraphers
19. Campgrounds
20. Dancing Instruction
21. Data Communications Equipment & Systems - Networks
22. Deck Builders
23. Drywall & Insulation Contractors
24. Earthquake Products & Services
25. E-Commerce
26. Education Centers
27. Educational Consultants
28. Educational Service - Business
29. Electric Contractors
30. Electric Transmission Equipment (Manufacturers)
31. Electrolysis
32. Erosion Control
33. Gas - Liquefied Petroleum - Bottled & Bulk (Wholesale)
34. Guide Service
35. Gymnastic Instruction
36. Halls & Auditoriums
37. Handyman Services
38. Hardware - Retail
39. Hardwood
40. Jewelers - Retail
41. Jewelry - Designers
42. Laboratories
43. Laboratories - Research & Development
44. Land Companies
45. Landfills - Sanitary
46. Lumber (Manufacturers)
47. Lumber - Retail
48. Machine Shops
49. Parking Area & Lots Maintenance & Marking
50. Parks
51. Party Supplies
52. Patio & Deck Cleaning & Restoration
53. Paving Contractors
54. Pumps (Wholesale)
55. Roofing - Service Consultants
56. Sand & Gravel (Wholesale)
57. School Supplies (Wholesale)
58. Schools & Educational Services
59. Schools - Nursery & Kindergarten Academic
60. Schools - Universities & Colleges Academic
61. Shoe & Boot Repairing
62. Shoes - Retail
63. Shopping Centers & Malls
64. Shower Doors & Enclosures
65. Tutoring
66. Ultrasonic Equipment & Supplies (Wholesale)
67. Upholsterers
68. Windows - Repairing
69. Wineries
70. Wines - Consultants
71. Wines - Retail
72. Woodworkers

### Style your lists however you want!

    $('#demoFour').listnav({
        includeNums: false
    });

Anchor (A) tags in the list items are styled to look like boxes and the LI's are floated left so that they will dynamically wrap from left to right and down. The 0-9 number navigation item is hidden by the `includeNums:false` option.

- Agizzy
- Aiboo
- Avazu
- Babbletype
- BrowseZ
- Camiba
- Centilia
- Centixo
- Chatterbean
- Chatvine
- Dabster
- Dazzleblab
- Dazzleclub
- Demivee
- Devopia
- Eaxo
- Edgedrive
- Edgenation
- Fadeo
- Feedbird
- Fivecat
- Flipspot
- Innobird
- Inte
- Jabberspot
- Jabberverse
- Jumplist
- Kaype
- Meendo
- Meente
- Meetz
- Muba
- Ombee
- Oope
- Podtune
- Quiyo
- Rifffire
- Riffmix
- Tagtube
- Tandu
- Tekpad
- Tekware
- Topbug
- Trunti
- Twitterspot
- Voonte
- Wikible
- Wikidel
- Wikindo
- Yondo
- Yotz
- Zoomworks

### Using `cookieName` to save last click and utilizing an `onClick` callback

    $('#demoFive').listnav({
        cookieName: 'ln-demo5',
        onClick: function(letter) {
            $(".myLastClicked").text(letter.toUpperCase());
        }
    });

If you include the jquery.cookie js file in your page before the listnav js file, you can set the `cookieName` option to have the listnav control remember your user's last clicked navigation item (the cookie value will be 'all', '_' for numbers 0-9 or a lowercase letter 'a' - 'z'). You can also use the `onClick` callback to fire a custom function when a letter gets clicked. Click a letter to see the onClick function, then reload the page and come back to Demo 5 and you'll see that the list loads your last clicked letter (obtained from the cookie value).

You Just Clicked: ?

- 411 Services
- Accountants
- Accounting & Bookkeeping - General Service
- Acupuncture
- Advertising
- Advertising - Agencies & Counselors
- Advertising - Computer
- Advertising - Promotional
- Attorneys - Service Bureaus
- Auctioneers
- Audio Visual Consultants
- Audio Visual Production Service
- Automobile - Renting
- Automobile - Repair & Service
- Cabinet Makers
- Cabinets
- Cafeterias
- Calligraphers
- Campgrounds
- Dancing Instruction
- Data Communications Equipment & Systems - Networks
- Deck Builders
- Drywall & Insulation Contractors
- Earthquake Products & Services
- E-Commerce
- Education Centers
- Educational Consultants
- Educational Service - Business
- Electric Contractors
- Electric Transmission Equipment (Manufacturers)
- Electrolysis
- Erosion Control
- Gas - Liquefied Petroleum - Bottled & Bulk (Wholesale)
- Guide Service
- Gymnastic Instruction
- Halls & Auditoriums
- Handyman Services
- Hardware - Retail
- Hardwood
- Jewelers - Retail
- Jewelry - Designers
- Laboratories
- Laboratories - Research & Development
- Land Companies
- Landfills - Sanitary
- Lumber (Manufacturers)
- Lumber - Retail
- Machine Shops
- Parking Area & Lots Maintenance & Marking
- Parks
- Party Supplies
- Patio & Deck Cleaning & Restoration
- Paving Contractors
- Pumps (Wholesale)
- Roofing - Service Consultants
- Sand & Gravel (Wholesale)
- School Supplies (Wholesale)
- Schools & Educational Services
- Schools - Nursery & Kindergarten Academic
- Schools - Universities & Colleges Academic
- Shoe & Boot Repairing
- Shoes - Retail
- Shopping Centers & Malls
- Shower Doors & Enclosures
- Tutoring
- Ultrasonic Equipment & Supplies (Wholesale)
- Upholsterers
- Windows - Repairing
- Wineries
- Wines - Consultants
- Wines - Retail
- Woodworkers

### Using the `includeOther` and `prefixes` options

    $('#demoSix').listnav({
        includeOther: true,
        prefixes: ['the','a']
    });

Use the `includeOther` option to show a [...] navigation item for access to list items that start with something other than A-Z and 0-9 (such as Ä and Ü). If you'd like something like "The Valley News" or "The Willows Journal" to appear under V and W as well as under T, supply an array of prefixes using the `prefixes` option.

Note: `prefixes` will not iterate the "ALL" count twice.

- Äpfel
- Über alle
- Alameda Sun
- Alameda Times-Star
- Almanac
- American Canyon Eagle
- American River Messenger
- Antelope Valley Press
- Antioch Press
- Appeal-Democrat
- Arcata Eye
- Argonaut
- Argus Online
- Atascadero News
- Auburn Journal
- Bakersfield Californian
- Baypoint Press
- Business Journal
- Business Times
- Calaveras Enterprise
- Californian
- Carmel Pine Cone
- Chico Enterprise-Record
- Clovis Independent
- Coast News
- Coastal View News
- Coastline Pilot
- Community Newspaper Group
- Community Voice
- Compton Bulletin
- Contra Costa Times
- Coronado Eagle & Journal
- Crestline Courier-News
- Cronicas
- Culver City Observer
- Daily Breeze
- Daily Independent
- Daily News
- Daily Republic
- Daily Republican
- Daily Triplicate
- Davis Enterprise
- Desert Dispatch
- Desert Sun
- Eagle and Times
- East Bay Express
- East Bay Express
- El Dorado Hills Telegraph
- El Mensajero
- El Observador
- Elk Grove Citizen
- Feather River Bulletin
- Fillmore Gazette
- Folsom Telegraph
- Fontana Herald News
- Fort Bragg Advocate-News
- Free Lance
- Fresno Bee
- Galt Herald
- Glendale News Press
- Gold Country Times
- Goleta Valley Voice
- Gonzales Tribune
- Good Times
- Greenfield News
- Gridley Herald
- Grunion Gazette
- Half Moon Bay Review
- Hesperia Star
- Hi-Desert Star
- Holtville Tribune
- Humboldt Beacon
- Idyllwild Town Crier
- Imperial Valley Press Online
- Independent
- Independent
- Independent Voice
- Inland Valley Daily Bulletin
- Inter Mountain News
- Investor's Business Daily
- Jackson Ledger-Dispatch
- Jewish Observer
- Kern Valley Sun
- King City Rustler
- Kingsburg Recorder
- L.A. Weekly
- La Canada Valley Sun
- La Opinion
- La Quinta Sun
- Laguna Beach Independent
- Lake County Record-Bee
- Lamorinda Weekly
- Lassen County Times
- Lemoore Advance
- Lincoln News Messenger
- Lodi News-Sentinel
- Lompoc Record
- Long Beach Business Journal
- Loomis News
- Los Altos Town Crier
- Los Angeles Daily News
- Los Angeles Downtown News
- Los Angeles Times
- Los Banos Enterprise
- Los Gatos Observer
- Madera Tribune
- Malibu Times
- Mammoth Times
- Manteca Bulletin
- Marin Independent Journal
- Mariposa Gazette
- McKinleyville Press
- Mendocino Beacon
- Merced Sun-Star
- Messenger
- MidValley News
- Midway Driller
- Milpitas Post
- Modesto Bee
- Modoc County Record
- Monterey County Herald
- Monterey County Weekly
- Moorpark Acorn
- Moorpark Acorn
- Mount Shasta Herald
- Mountain Democrat
- Mountain Enterprise
- Mountain News
- Mountain View Voice
- Napa Valley Register
- New Times Weekly
- News & Review
- North Bay Business Journal
- North County Times
- North County Times
- Novato Advance
- Oakdale Leader
- Oakland Tribune
- Oakley Press
- OC Business Journal
- Ojai Valley News
- Orange County Register
- Orange County Weekly
- Orland Press Register
- Oroville Mercury-Register
- Pacific Sun
- Pacifica Tribune
- Palo Alto Online
- Palo Verde Valley Times
- Palo Verde Valley Times
- Paradise Post
- Pasadena Star-News
- Paso Robles Press Online
- Peninsula News
- Pinnacle News
- Pittsburg Press
- Placer Herald
- Point Reyes Light
- Pomerado Newspaper
- Porterville Recorder
- Portola Reporter
- Press Banner
- Press Democrat
- Press Telegram
- Press Tribune
- Press-Enterprise
- Ramona Journal
- Ramona Sentinel
- Record Searchlight
- Red Bluff Daily News
- Redlands Daily Facts
- Reedley Exponent
- Register-Pajaronian
- Ripon Record
- Riverside County Record News
- Rocklin & Roseville Today
- Sacramento Bee
- Sacramento News & Review
- Saint Helena Star
- San Bernardino Sun
- San Diego Daily Transcript
- San Diego Reader
- San Diego Union-Tribune
- San Francisco Examiner
- San Francisco Guardian
- San Francisco Weekly
- San Gabriel Valley Tribune
- San Jose Mercury News
- San Mateo Daily Journal
- Santa Barbara Daily Sound
- Santa Barbara Independent
- Santa Barbara News Press
- Santa Cruz Sentinel
- Santa Maria Sun
- Santa Maria Times
- Santa Monica Mirror
- Santa Monica Observer
- Santa Paula Times
- Santa Ynez Valley News
- Selma Enterprise
- Sentinel
- Sierra Star
- Sierra Sun
- Signal
- Simi Valley Acorn
- Siskiyou Daily News
- Soledad Bee
- Sonoma Index-Tribune
- Sonoma Valley Sun
- Studio City Sun
- Tahoe Daily Tribune
- Tehachapi News
- The Acorn
- The Adobe Press
- The Alpine Sun
- The Ark
- The Camarillo Acorn
- The Ceres Courier
- The Chino Champion
- The Claremont Courier
- The Coast News
- The Daily Democrat
- The Daily Press
- The Delhi Express
- The Desert Trail
- The Dispatch
- The Escalon Times
- The Foothills Paper
- The Foothills Sun Gazette
- The Gilroy Dispatch
- The Inyo Register
- The Mid-County Post
- The Record
- The Reporter
- The River Valley Times
- The Valley News
- The Valley Post
- The Village News
- The Willows Journal
- Thousand Oaks Acorn
- Times and News
- Times Press Recorder
- Times-Standard
- Tracy Press
- Trinity Journal
- Tri-Valley Herald
- Tulare Advance-Register
- Turlock Journal
- Ukiah Daily Journal
- Union
- Union Democrat
- Vallejo Times-Herald
- Valley Business Journal
- Valley Chronicle
- Valley Journal
- Valley Roadrunner
- Valley Springs News
- Ventura County Reporter
- Ventura County Star
- Village News
- Visalia Times-Delta
- Weekly
- Weekly Calistogan
- Westside Connect
- Whittier Daily News
- Willits News
- Winters Express

### Specify a `filterSelector` and removing links with `removeDisabled`

    $('#demoSeven').listnav({
        filterSelector: '.last-name',
        includeNums: false,
        removeDisabled: true
    });

Below you'll find a list of the Star Trek TNG Cast "generated" by a CMS. While you wanted to filter by last name it generated the first name fields first...

New in 2.2, using `filterSelector` you can specify a css selector for your navigation to filter by! You can also remove letters that have no content by setting `removeDisabled: true`

In this demo, each LI contains a hidden div with `class="last-name"`
So setting `filterSelector: '.last-name'` lets us filter the list using that CSS selector.

NOTE: `filterSelector` will accept any valid CSS selector.

- ## Beverly Crusher

  Crusher

  Rank: Commander

  Date of Birth: Oct. 13, 2324

  Place of Birth: Copernicus City, Luna

- ## Wesley Crusher

  Crusher

  Rank: Ensign

  Date of Birth: July 29, 2349

  Place of Birth: Earth

- ## Data

  Data

  Rank: Lieutenant Commander

  Date of Birth: Feb. 2, 2338

  Place of Birth: Omicron Theta science colony

- ## Geordi La Forge

  La Forge

  Rank: Commander

  Date of Birth: Feb. 16, 2335

  Place of Birth: African Confederation, Earth

- ## Jean Luc Picard

  Picard

  Rank: Captain

  Date of Birth: July 13, 2305

  Place of Birth: Labarre, France, Earth

- ## William Riker

  Riker

  Rank: Captain

  Date of Birth: August 19, 2335

  Place of Birth: Valdez, Alaska, Earth

- ## Deanna Troi

  Troi

  Rank: Commander

  Date of Birth: March 29, 2336 (Terran equivalent)

  Place of Birth: Near Lake El-Nar, Betazed

- ## Worf

  Worf

  Rank: Lieutenant Commander

  Date of Birth: December 9, 2340 (Terran equivalent)

  Place of Birth: Qo'noS, Klingon Empire

### Ignore multi word prefixes to titles with `prefixes`

    $('#demoEight').listnav({
        prefixes: ['The Complete Works of', 'A']
    });

- The Complete Works of Shakespeare
- The Complete Works of Joe Blogs
- A Story About Something
- Macbeth
- Hamlet
- A Play on Words