Skip to content

Pointer Background Breadcrumbs

After reading Particletree's article Rediscovering the Button Element I knew there would be projects where I could use this newly rediscovered button. And so there was.

It was fun to apply this well-thought technique. But the real fun came along when I needed to adjust my breadcrumbs to fit the appearance of the buttons. This is what came out:

Pointer background breadcrumbs in action

It's kind of Apple-style,

Breadcrumbs on Apple.com

but the text and its background adapt to browser's text size setting, and clickable area is larger.

The Particletree button had borders. That was one of the things I had to drop from the breadcrumb feature list. I guess it could've been done using a few spans within each link, each span containing a proprely positioned 1px horizontal line as its background, and drawing the vertical borders on the pointer background image, but I run out of time in this particular project.

See the example. (Bare-bones example. Try changing the font size, it works fairly well the first few steps to each direction.)