Breadcrumbs in SAPUI5

[ranjit_rao]

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:                     

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:

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:

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.

Could always be better used with much better css. :oops: