07 October 2016

Iconic Breadcrumbs in APEX

Normally when you use a Breadcrumb in an APEX application you enter the data and that's it. The breadcrumb will look something like this:

Or when you reduce the screen, the Breadcrumb will look slightly different:

It's trivial to replace the text that you enter in the Breadcrumb with a little bit of markup and show a Font Awesome (or with APEX 5.1 Font APEX) icon.

<span class="fa fa-home"></span>

Now the text will be replaced with a little house.

And resized, it will look like this

If you want to use this, keep in mind that this solution is not screen-reader-friendly. Personally I would only use it for "top-level" Breadcrumbs, keeping the same images that you use in the Navigation Menu.

No comments:

Post a Comment

About Me

Self-employed under the name allAPEX, mainly in The Netherlands. Presented at National and International Conferences. Oracle ACE Director for Database Development. Trainer for SQL and PL/SQL. Married, two children, likes to Barbecue.