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.

ColumnNav

Posted by Dion Almaer at 6:06 pm
10 Comments

++++-
4.1 rating from 41 votes

10 Comments »

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:

http://labs.activespotlight.net/jQuery/menu_demo.html

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:

and

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):

http://eurekaman.com/opod/v0.1/
http://grazr.com/

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:

http://stringify.com/columnav/

Comment by David Lindquist — August 3, 2007

Leave a comment

You must be logged in to post a comment.