Breadcrumb

From Wiki openElement
Jump to: navigation, search
Path: Elements / Navigation / Breadcrumb

Contents

Description

The breadcrumb element is a navigation menu that displays the path that led to the current page.
In the example below, sub-menu 1-1-1 is a child of sub-menu 1-1, which itself is a child of Menu 1.
Element-FilAriane1.png

Add a Breadcrumb Element

Drag-and-Drop the element Breadcrumb from the elements menu anywhere on the page.
The element's configuration menu will open automatically.

Prerequisites

Note: This element (1) must be placed in a layer that already contains a menu (2).
The menu in question can be either a "Pop-Up Menu" or an "Accordion Menu" and will be used to define the hierarchy of the navigation.
The element will not be displayed directly in the layer, but on each page that calls upon that layer.
The menu must contain a link to the pages that use the layer in question.

Element-FilAriane3.png

Configuration

Main Configuration

Element-FilAriane4.png
Select the menu that will be linked to the breadcrumb.

Other Properties

  • First Image: Users can add an image that will be displayed at the start of the link chain
  • First Image Link: A hyperlink for that first image
  • Separator: A separator image to go between links

Design and Presets

To change the appearance, users must override the element's various style zones.

Style Zones (Expert)

Element-FilAriane5.png

WEBreadCrumbs FirstImage.png First Image. The background image and its size can be directly modified using the corresponding property.
Default Value

  • Vertical Alignment: Middle

WEBreadCrumbs LastImage.png Last Image.
Default Value

  • Vertical Alignment: Middle

WEBreadCrumbs Separator.png Separator. The background image and its size can be directly modified using the corresponding property.
Default Value

  • Background Image: Image (5px/7px)
  • Background Repetition: Fixed
  • Width: 5px
  • Height: 7px
  • Vertical Alignment: Middle

WEBreadCrumbs Link.png Link Zone.
Default Value

  • Vertical Alignment: Middle
Personal tools
Namespaces

Variants
Views
Actions
openElement
Community
Toolbox