Data navigation

You can navigate not only by text in items but also by data. It can be any grouping information, for example here I'm using grouping by movie decades. So, knowing that "The Shawshank Redemption" is belonging to 1990s and "The Godfather" is belonging to 1970s, I can use the following markup:

<div class="row" id="target">
	<div class="col-sm-6 col-md-4" data-ml-nav="1990">
		<div class="thumbnail">
			<div class="caption">
				<h4>The Shawshank Redemption</h4>
				<p><button type="button" class="btn btn-primary btn-sm btn-block">Action</button></p>
			</div>
		</div>
	</div>
	<div class="col-sm-6 col-md-4" data-ml-nav="1970">
		<div class="thumbnail">
			<div class="caption">
				<h4>The Godfather</h4>
				<p><button type="button" class="btn btn-primary btn-sm btn-block">Action</button></p>
			</div>
		</div>
	</div>
</div>

Basically, what you need to do is to assign data-ml-nav="your navigation group" to items, and initialize monolistData plugin:

$('#target').monolistData();

You also have the opportunity to set any text on the button that shows all items, to initially select any button, to assign onClick callback, to add pagination and to assign your own buttons containers:

$('#target').monolistData({
	allLettersText: 'All years',
	buttonsContainer: '.my-own-buttons-container',
	initNav: '1990',
	itemsPerPage: 25,
	onClick: function () {
		$('#clicked-letter').text($(this).text());
	},
	paginationContainer: '.my-own-pagination-container'
});