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

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