Breadcrumb
-
<ol class="lp__breadcrumb_list"> <li class="lp__breadcrumb_list_item"><a href="#">Where We Work</a></li> <li class="lp__breadcrumb_list_item"><a href="#">China</a></li> <li class="lp__breadcrumb_list_item active">Overview</li> </ol> -
Visual Style:
Breadcrumb Navigation is contained by a semi-opaque (rgba 0, 0, 0, 0.33) bar that stretches the width of the screen and overlaps the top of the page's Banner. This bar is often also populated with available languages for the page. Within this bar, the Breadcrumb Nav is aligned to the left side of the body content area and languages are aligned to the right. Breadcrumbs are listed horizontally from left to right with each link separated by a forward slash (e.g. "Understanding Poverty / Topics / Energy"). On most pages the breadcrumb navigation is white, but on news pages and any other page with a light grey banner (e.g. v5 banner) it should be blue (#0071bc).
Behavior:
Links in Breadcrumb Navigation are underlined when in a hover or active state.
Responsiveness:
On mobile devices, only the top level page will appear (e.g. "Understanding Poverty / Topics / Energy" will condense to "Understanding Poverty").
- Women Business and Law Experts in Algeria:
In the example the breadcrumb navigation helps the user to understan where they are located in both the WBL site, and the broader structure of WBG web content.