Dokumentation

'Kitchen Sink'-Dokumentation von Style: 'Delos' vom Skin: 'ILIAS'

Breadcrumbs

Description

Purpose
Breadcrumbs is a supplemental navigation scheme. It eases the user's navigation to higher items in hierarchical structures. Breadcrumbs also serve as an effective visual aid indicating the user's location on a website.
Composition
Breadcrumbs-entries are rendered as horizontally arranged UI Links with a seperator in-between.
Effect
Clicking on an entry will get the user to the respective location.
Context
  1. Suplemental navigation under the main menu
  2. Location hint in search results
  3. Path to current location on info page

Rules

Usage
  1. Crumbs MUST trigger navigation to other resources of the system.
Accessibility
  1. The HTML tag < nav > MUST be used for the Breadcrumbs to be identified as the ARIA Landmark Role "Navigation".
  2. The "aria-label" attribute MUST be set for Breadcrumbs, which MUST be language-dependant.

Example 1: Breadcrumbs

function breadcrumbs()
{
    global $DIC;
    $renderer = $DIC->ui()->renderer();
    $f = $DIC->ui()->factory();
 
    $entry =
 
    $crumbs = array(
        $f->link()->standard("entry1", '#'),
        $f->link()->standard("entry2", '#'),
        $f->link()->standard("entry3", '#'),
        $f->link()->standard("entry4", '#')
    );
 
    $bar = $f->breadcrumbs($crumbs);
 
    $bar_extended = $bar->withAppendedItem(
        $f->link()->standard("entry5", '#')
    );
 
    return $renderer->render($bar)
        . $renderer->render($bar_extended);
}
 

Relations

Parents
  1. UIComponent