Skip to Content
Author's profile photo Ranjit Rao

Breadcrumbs in SAPUI5


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.


<mvc:View controllerName=”BreadCrumbsDemo.controller.View1″ xmlns:html=”” xmlns:mvc=”sap.ui.core.mvc”




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


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

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


               <SegmentedButtonItem text=”View1″/>

               <SegmentedButtonItem text=”View2″/>

               <SegmentedButtonItem text=”View3″/>










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



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



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



.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%;



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



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

border-left: none;


Ultimately, this is what you have.


Could always be better used with much better css. 😳

Assigned Tags

      Be the first to leave a comment
      You must be Logged on to comment or reply to a post.