Browse hierarchical data in columns, similar to OS X's Finder

View on Github Download .zip


FinderJS allows you to browse tree-like data in columns, similar to OS X's file manager Finder.


  • Data source: Array or Function (useful for asynchronous operations, e.g. calling an API).
  • Styling: Use any CSS/framework of choice, or feel free to use the example CSS (which leverages Flexbox). You can also define how items are rendered and change default classnames.
  • Keyboard navigation: use arrows keys to navigate.
  • Events: several events are emitted to allow for custom behavior.
  • Module formats: Provided as an npm module (CommonJS), a jQuery plugin, and exported as the global finder.
  • File size: 4KB minified and gzipped. No external dependencies.
  • Code quality: Code Climate.


Example #1

The data source is an array.

View source

Example #2

The data source is a function that pulls in sample data from REST Countries.

View source

Example #3

Selects default path build/finder.js on load. You can also programmatically select a path:

View source


npm install finderjs

or download the latest release and include the standalone script or jquery plugin directly onto your page.


FinderJS expects a container HTML element, a data source (Array or Function), and an options object.

  finder(container, data, options)
  .on('leaf-selected', function(item) {
    console.log('Leaf node selected', item);

For more information see the README or view the source of the examples above.