ADF Faces: How to skin a great looking breadcrumb

Although the default ADF Skin is fine for many UI requirements, there are often special customer needs for specific design. In this short blogpost I am going to show how you can skin a great looking breadcrumb (with plain CSS). The following picture shows what I am talking about:

Usage

Inside ADF Pages it should be is easy to create such a breadcrumb:

<af:panelList id="pl1" styleClass="MyBreadcrumb">
    <af:commandLink text="Home" id="cl1" />
    <af:commandLink text="commandLink 2" id="cl2"/>
    <af:commandLink text="commandLink 3" id="cl3"/>
</af:panelList>

Environment

Created with ADF 11.1.2.4 (but should also work with 11gR1 oder 12c)

Tested with current versions of

• Safari
• Chrome
• Firefox
• IE 9

How to do it

Create a custom ADF Skin with the following CSS Statements

af|panelList.MyBreadcrumb ul {

    list-style: none;

    overflow: hidden;

    display: block;

    padding-left: 0px;

}

af|panelList.MyBreadcrumb li {

    float: left;

    /*display: list-item;

    text-align: -webkit-match-parent;*/

   

}

af|panelList.MyBreadcrumb li:first-child a {

    padding-left: 10px;

    background: gray;

}

af|panelList.MyBreadcrumb li:first-child a:after {

    border-left-color: gray;

}

af|panelList.MyBreadcrumb li a:hover:after {

    border-left-color: red;

}

/*af|panelList li:nth-child(2) a {

   

}*/

af|panelList.MyBreadcrumb li a span {

    color: white;  

}

af|panelList.MyBreadcrumb li af|commandImageLink {   

    color: white;

    text-decoration: none;

    padding: 4px 0 5px 55px;

    background: #eee;

    position: relative;

    display: block;

    float: left;

}

af|panelList.MyBreadcrumb li af|commandImageLink:text-only,

af|panelList.MyBreadcrumb li a {

    color: white;

    text-decoration: none;

    padding: 10px 0 10px 55px;

    background: #bbb;

    position: relative;

    display: block;

    float: left;

   

}

af|panelList.MyBreadcrumb li a:hover {

    background: red;

    text-decoration: none;

}

af|panelList.MyBreadcrumb li a:before {

    content: " ";

    display: block;

    width: 0;

    height: 0;

    border-top: 50px solid transparent;

    border-bottom: 50px solid transparent;

    border-left: 30px solid white;

    position: absolute;

    top: 50%;

    margin-top: -50px;

    margin-left: 2px;

    left: 100%;

    z-index: 1;

}

af|panelList.MyBreadcrumb li a:after {

    content: " ";

    display: block;

    width: 0;

    height: 0;

    border-top: 50px solid transparent;

    border-bottom: 50px solid transparent;

    border-left: 30px solid #bbb;

    position: absolute;

    top: 50%;

    margin-top: -50px;

    left: 100%;

    z-index: 2;

} 

Hint

I know that the usage of direct HTML Selectors in ADF Skin files is not a good practice because the skin could break if upgrading to a new ADF Version. If you like feel free to improve the CSS.

Download

enpit.sample.adf.skinBreadcrumb-jdev11124.zip

References

http://css-tricks.com/examples/TriangleBreadcrumbs/