Tuesday, February 20th, 2007

ColumnNav: Think Apple Heirarchical Menus

Category: Component, Yahoo!

David Lindquist has created a new component for YUI called ColumnNav.

ColumNav is a hierarchical menu implementation utilizing Bill Scott’s Yahoo UI Carousel component. Content is loaded from an unordered list (in the form of a DOM object) and displayed in a scrollable viewport, similar to Column View in the Mac OS X Finder. Features include:

  • infinite extensibility using Ajax to build sub-menus
  • a highly customizable look and feel using CSS
  • support for keyboard-only navigation (CTRL + arrow keys)
  • cross-browser compatibility

It looks good and simple to use.


Posted by Dion Almaer at 6:06 pm

4.1 rating from 41 votes


Comments feed TrackBack URI

It would be very cool to see this code used to make a three pane browser along the lines of the three pane view in finder (the original NeXT step file browser view).

Comment by Torgeir — February 20, 2007

Brilliant! And I agree with Torgeir… it’d be great to make the widget expandable to more than one column at a time.

Comment by Leland Scott — February 20, 2007

Working on it as we speak. ;)

Comment by David Lindquist — February 20, 2007

Uh, nice! That really looks promising! Also it would be nice with action keys to browse left and right!

Comment by Henrik Hedegaard — February 21, 2007

I like this, but I also really like the look of this one too, implemented with JQuery:


Click “Toggle Menu” at the top :)

Comment by Ryan G — February 21, 2007

Ryan, that JQuery version is very cool!

Leland and Torgeir, I just updated ColumNav to version 0.9.4, with support for multiple columns.

Comment by David Lindquist — February 21, 2007

Now I’m sort of annoyed that I just wrote a column-view file browser over the last few days.

Comment by Trevor — February 21, 2007

Interesting. Here are other similar looking interfaces for inspiration:


Grazr, in particular, is looking pretty slick nowadays.

Comment by Mark McLaren — February 26, 2007

Oops (my links disappeared, must have been the fish tails):


Comment by Mark McLaren — February 26, 2007

Old post, but I thought I would announce the recent release of ColumNav 1.0. It has matured quite a bit since the initial release. Check it out:


Comment by David Lindquist — August 3, 2007

Leave a comment

You must be logged in to post a comment.