Breadcrumb

Indicate the current page's location within a navigational hierarchy that automatically adds separators via CSS.

How To

Step 1: Include LambdaEx Framework in Logi Info Application. Include LambdaEx Framework in Logi Info Application.

Example

<Division Class="breadcrumb" HtmlDiv="True">
  <Label HtmlTag="a" Class="breadcrumb-item" Caption="Home">
    <EventHandler DhtmlEvent="href">
      <Action Type="Javascript" Javascript="void(0)" />
    </EventHandler>
  </Label>
  <Label HtmlTag="a" Class="breadcrumb-item" Caption="Library">
    <EventHandler DhtmlEvent="href">
      <Action Type="Javascript" Javascript="void(0)" />
    </EventHandler>
  </Label>
  <Label HtmlTag="a" Class="breadcrumb-item" Caption="Data">
    <EventHandler DhtmlEvent="href">
      <Action Type="Javascript" Javascript="void(0)" />
    </EventHandler>
  </Label>
  <Label Class="breadcrumb-item active" Caption="LambdaEx" />
</Division>

List Example

Similar to navigation components, breadcrumbs work fine with or without the usage of list markup.

<DataList Ordered="True" Class="breadcrumb" ID="lstBreadcrumb">
  <DataLayer Type="Static" ID="dlBreadcrumb">
    <StaticDataRow Caption="Home" Class="" />
    <StaticDataRow Caption="Library" Class="" />
    <StaticDataRow Caption="Data" Class="" />
    <StaticDataRow Caption="LambdaEx" Class="active" />
  </DataLayer>
  <ListItem Class="breadcrumb-item [at]Data.Class[tilde]">
    <Label Caption="[at]Data.Caption~">
      <Action Javascript="void(0)" Type="Javascript" />
      <ConditionalClass Condition="'[at]Data.Class[tilde]' != ''" Class="ThemeHidden" />
    </Label>
    <Label Caption="[at]Data.Caption~">
      <ConditionalClass Condition="'[at]Data.Class[tilde]' == ''" Class="ThemeHidden" />
    </Label>
  </ListItem>
</DataList>