Skip to content

Add a slick "letter-based" navigation bar to all of your lists. Click a letter to quickly filter the list to items that match that letter. Compatible with jQuery 3.0+ For previous versions of jQuery, use a release prior to ListNav 3.0.0

master
Switch branches/tags
Code

Latest commit

 

Git stats

Files

Permalink
Failed to load latest commit information.
Type
Name
Latest commit message
Commit time
css
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 

jQuery ListNav Travis Build Built with GruntJS

jQuery ListNav will add a slick "letter-based" navigation bar to all of your lists. Click a letter to quickly filter the list to show items that match that letter.

View the ListNav Demo

Install using Bower

bower install jquery-listnav

Manual Install

Insert into <Head>:

<link rel="stylesheet" href="listnav.css">

Code up your list:

<ul id="myList">...</ul>

Insert before </body>:

<script src="jquery-listnav.min.js"></script>
<script>
	$("#myList").listnav();
</script>

Navigation:

The navigation defaults to being placed directly above your list element. You can place the navigation in a place of your choice by adding to your markup.

<div id="{myList}-nav"></div>

Options

$("myList").listnav({
    allText: 'All',        // set custom text in navbar to ALL button
    cookieName: null,      // Set this to a string to remember the last clicked navigation item requires jQuery Cookie Plugin ('myCookieName')
    dontCount: ''          // A comma separated list of selectors you want to exclude from the count function (numbers on top of navigation)
    filterSelector: ''     // Set the filter to a CSS selector rather than the first text letter for each item
    flagDisabled: true,    // Add a class of 'ln-disabled' to nav items with no content to show
    includeAll: true,      // Include the ALL button
    includeNums: true,     // Include a '0-9' option to filter by
    includeOther: false,   // Include a '...' option to filter non-english characters by
    initHidden: false,     // After LiatNav loads, hide all of the list items until you click a letter
    initHiddenText: 'Tap a letter above to view matching items', // Message to display to users when the initial input is hidden
    initLetter: '',        // filter the list to a specific letter on init ('a'-'z', '-' [numbers 0-9], '_' [other])
    letters: ['_', 'a', 'b', 'c'], // Add a custom set of letters for non-engligh languages. See Demo 5
    noMatchText: 'No matching entries', // set custom text for nav items with no content to show
    onClick: null,         // Set a function that fires when you click a nav item. see Demo 5
    prefixes: [],          // Set an array of prefixes that should be counted for the prefix and the first word after the prefix ex: ['the', 'a', 'my']
    removeDisabled: false, // Remove those 'ln-disabled' nav items (flagDisabled must be set to true for this to function)
    showCounts: true,      // Show the number of list items that match that letter above the mouse
});

Showcase

The following websites are currently using ListNav to filter their lists:

Santa Fe College

About

Add a slick "letter-based" navigation bar to all of your lists. Click a letter to quickly filter the list to items that match that letter. Compatible with jQuery 3.0+ For previous versions of jQuery, use a release prior to ListNav 3.0.0

Resources

License

Packages

No packages published