Skip to Content

Hi,

After a long time, found some time to share something which I have worked on.

Recently, I had a requirement which demanded me to have navigation using a breadcrumb. Just a brief description of breadcrumb is as follows:

A breadcrumb is a link/button(or a series of them) which displays each page viewed by a visitor of a website in the order the pages were viewed“.

Something as shown in the figure:                     


/wp-content/uploads/2016/06/breadcrumb1_966718.png

In one of the recent releases SAP has releases a control called breadcrumb. But that did not go well my projects requirement mainly because of the look and feel. As this how it looked:

/wp-content/uploads/2016/06/breadcrumb1_966718.png

So, just thought of trying my hand in designing the breadcrumb look alike using sap.m.SegmentedButton wrapped in a custom css.

Segmented Button normally looks like:

/wp-content/uploads/2016/06/breadcrumb1_966718.png

Following is the code for implementing it.

View.xml

<mvc:View controllerName=”BreadCrumbsDemo.controller.View1″ xmlns:html=”http://www.w3.org/1999/xhtml” xmlns:mvc=”sap.ui.core.mvc”

  xmlns=”sap.m”>

   <App>

    <pages>

     <Page title=”{i18n>title}”>

        <content>

         <HBox class=”breadCrumbs” width=”100%” alignItems=”Center”>

           <SegmentedButton class=”sapUiSmallMarginBottom” width=”100%” height=”100%”>

             <items>

               <SegmentedButtonItem text=”View1″/>

               <SegmentedButtonItem text=”View2″/>

               <SegmentedButtonItem text=”View3″/>

             </items>

          </SegmentedButton>

        </HBox>

      </content>

     </Page>

    </pages>

   </App>

</mvc:View>


style.css

.breadCrumbs> .sapMFlexItem ul li {

    width: 25.3333333333333% !important;

    display: block;

    float: left;

    height: 48px;

    background: #85c1e9;

    text-align: center;

    padding: 0px 40px 0 40px;

    position: relative;

    margin: 0 10px 0 0;

    font-size: 20px;

    text-decoration: none;

    color: #fff;

}

.breadCrumbs> .sapMFlexItem ul li:first-child {

   z-index:3;

}

.breadCrumbs> .sapMFlexItem ul li:nth-child(2) {

   z-index:2;

}

.breadCrumbs> .sapMFlexItem ul li:nth-child(3) {

   z-index:1;

}

.breadCrumbs> .sapMFlexItem ul li:last-child {

   background: #2e86c1 !important;

    color: #000;

}

.breadCrumbs> .sapMFlexItem ul li:last-child:after {

  border-left: 40px solid #2e86c1 !important;

}

.breadCrumbs> .sapMFlexItem ul li:before {

    content: “”;

    border-top: 24px solid transparent;

    border-bottom: 24px solid transparent;

    border-left: 40px solid #e6e6e6;

    position: absolute;

    left: 0;

    top: 0;

    padding: 0px 40px 0 80px;

}

.breadCrumbs> .sapMFlexItem ul li:after {

    content: “”;

    border-top: 40px solid red;

    border-bottom: 40px solid red;

    border-left: 40px solid blue;

    position: absolute;

    right: -40px;

    top: 0;

    border-top: 24px solid transparent;

    border-bottom: 24px solid transparent;

    border-left: 40px solid #85c1e9;

}

.breadCrumbs> .sapMFlexItem {

    width: 100%;

    background:#e6e6e6;

}

.breadCrumbs .sapMSegB .sapMSegBBtn {

    list-style: none;

    text-overflow: ellipsis;

    overflow: initial;

    -webkit-tap-highlight-color: rgba(255, 255, 255, 0);

    text-align: center;

    cursor: pointer;

    vertical-align: text-bottom;

    box-sizing: border-box;

    display: inline-block;

    border:none;

}

.breadCrumbs .sapMSegBBtn.sapMSegBBtnFocusable.sapMSegBBtnSel + .sapMSegBBtn {

border-left: none;

}

Ultimately, this is what you have.

/wp-content/uploads/2016/06/breadcrumb1_966718.png

Could always be better used with much better css. 😳

To report this post you need to login first.

Be the first to leave a comment

You must be Logged on to comment or reply to a post.

Leave a Reply