Documentation

Kitchen Sink documentation of style: 'Delos' of 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

Suplemental navigation under the main menu
Location hint in search results
Path to current location on info page

Rules

Usage

Crumbs MUST trigger navigation to other resources of the system.

Accessibility

The HTML tag "nav" MUST be used for the Breadcrumbs to be identified as the ARIA Landmark Role "Navigation".
The "aria-label" attribute MUST be set for Breadcrumbs, which MUST be language-dependant.

Example 1: Breadcrumbs

<?php
 
declare(strict_types=1);
 
namespace ILIAS\UI\examples\Breadcrumbs;
 
function breadcrumbs()
{
    global $DIC;
    $renderer = $DIC->ui()->renderer();
    $f = $DIC->ui()->factory();
 
    $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

UIComponent