Docklr CSS - Pure CSS3 OSX-like Dock Menu

An OSX inspired dock navigation menu, consists of only CSS .


No JavaScript required. With some features which CSS3 offers and supported by current modern browsers, Docklr can simulate dock menu behavior in some degree without need of JavaScript.

Interactively animated. Hover effect, bouncing icon, and stacked menu animation. Work best on modern browser that support CSS transition (Safari 3+, Chrome, Firefox 4.0+, Opera 10.5+, IE10 +) and CSS animation (Safari 4+, Chrome, Firefox 5.0+). Without it however Docklr is still usable on older browser.

Tweak it as you want. The CSS in download file isn’t minified and commented as needed, so feel free to customize with ease.

Clean & semantic HTML markup. Using CSS pseudo-element, no need unnecessary div element to create shapes like bar, shadow, tooltip balloon, triangles, etc. Docklr markup in common is about like this:


See the demo video here:


  • Version 1.0 (6 Jul 2011)
    • First version released

Rate this item

Consider to rate this item if you found it useful for you. If you want to rate my item less than 5 star, please contact me first to see if any problem you have with this item can be solved. If you found a bug, have a suggestion, or anything that would improve this item, you could contact me as well.


  • Oxygen icon set