UI Elements

BreadCrumb is a secondary navigation scheme that reveals the user’s location and navigation in the entire web application.

BreadCrumb is a secondary navigation scheme that reveals the user’s location and navigation in the entire web application.

4.14.1 Guideline

Guideline for the breadcrumb are listed below

  • Breadcrumbs typically appear horizontally across the top of a Web page in header section.
  • Throughout the application, the bread crumb will have the same format i.e., 1st level (parent) > 2nd Level (child 1) > 3rd level (child 2) > …….. >Location (current page).
  • The location (current page) where user is viewing will be in color White(#ffffff)   and the pages earlier (previous level’s) will be in color SkyBlue(#2991d6)  with a hyper link. When clicked on any other level’s page, the user will be automatically navigated to that respective page..
  • The size of the font is 10PX.
  • The separator of the level will be indicated with right direction arrow
  • The distance between the levels in breadcrumb will be 20 PX.
  • The height of the breadcrumb will be 30PX fixed and background will be NavyBlue(#120e5b)  .
  • Breadcrumb will not be there in mobile/tablet.
Parameters of Breadcrumbs
Fig 4.14.1 Different parameters of Breadcrumbs

4.14.2 Usage

Breadcrumb will always be used in the header to let user know the flow of the application.

Breadcrumb in Header
Fig 4.14.2 Usage of breadcrumb in Header