jquery-listnav
Advanced tools
Add a slick "letter-based" navigation bar to all of your lists. Click a letter to quicky filter the list to items that match that letter. Updated for better compatibility with future jQuery versions.
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.
bower install jquery-listnav
<link rel="stylesheet" href="listnav.css"><ul id="myList">...</ul><script src="jquery-listnav.min.js"></script>
<script>
$("#myList").listnav();
</script>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>$("myList").listnav({
initLetter: '', // filter the list to a specific letter on init ('a'-'z', '-' [numbers 0-9], '_' [other])
includeAll: true, // Include the ALL button
includeOther: false, // Include a '...' option to filter non-english characters by
includeNums: true, // Include a '0-9' option to filter by
flagDisabled: true, // Add a class of 'ln-disabled' to nav items with no content to show
removeDisabled: false, // Remove those 'ln-disabled' nav items (flagDisabled must be set to true for this to function)
allText: 'All', // set custom text in navbar to ALL button
noMatchText: 'No matching entries', // set custom text for nav items with no content to show
showCounts: true, // Show the number of list items that match that letter above the mouse
dontCount: '' // A comma separated list of selectors you want to exclude from the count function (numbers on top of navigation)
cookieName: null, // Set this to a string to remember the last clicked navigation item requires jQuery Cookie Plugin ('myCookieName')
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']
filterSelector: '' // Set the filter to a CSS selector rather than the first text letter for each item
});The following websites are currently using ListNav to filter their lists:
FAQs
Add a slick "letter-based" navigation bar to all of your lists. Click a letter to quicky filter the list to items that match that letter. Updated for better compatibility with future jQuery versions.
We found that jquery-listnav demonstrated a not healthy version release cadence and project activity because the last version was released a year ago. It has 1 open source maintainer collaborating on the project.
Did you know?
Socket for GitHub automatically highlights issues in each pull request and monitors the health of all your open source dependencies. Discover the contents of your packages and block harmful activity before you install or update your dependencies.
Security News
Snyk's use of malicious npm packages for research raises ethical concerns, highlighting risks in public deployment, data exfiltration, and unauthorized testing.
Research
Security News
Socket researchers found several malicious npm packages typosquatting Chalk and Chokidar, targeting Node.js developers with kill switches and data theft.
Security News
pnpm 10 blocks lifecycle scripts by default to improve security, addressing supply chain attack risks but sparking debate over compatibility and workflow changes.