Documentation

Kitchen Sink documentation of style: 'Delos' of skin: 'ILIAS'

Drilldown

Description

Purpose: A Drilldown Menu offers a partial view on a larger set of hierarchically structured navigation possibilities. While the entries of a Drilldown Menu are actually organized in a tree-structure, there is only one level of branches visible at a time, so that space is saved and the users attention is not being obstrused by irrelevant options.
Composition: Drilldown Menus are rendered as a ul-list; an entry contains either a button plus a further list for a menu level or a list of buttons or links as leafs. Also, Dividers may be used so separate entries from each other. In the header-section of the menu the currently selected level is shown as headline, and a bulky button offers navigation to an upper level.
Effect: Buttons within the Drilldown Menu will either affect the Menu itself or trigger other navigational events. Speaking of the first ("Submenus"), the user will navigate down the tree-structure of the Menu's entries. The currently selected level will be outlined, and a backlink will be presented to navigate back up the hierarchy. Entries directly below the current level will be presented as a flat list.

Context

Drilldown Menus are primarily used in Mainbar-Slates to break down navigational topics into smaller parts.

Rules

Usage

A Drilldown Menu MUST contain further Submenus or Buttons.
Drilldown Menus MUST contain more than one entry (Submenu or Button).

Example 1: Drilldown

Animal of the year

- - - Link
  - - - Link
    - - Link
      - Link
  - Link
- - - Link
  - - Link
  - - Link

<?php
 
declare(strict_types=1);
 
namespace ILIAS\UI\examples\Menu\Drilldown;
 
function drilldown()
{
    /**
        0 Animal of the year
        1    Switzerland
        1.1        Riverine Amphipod (gammarus fossarum)
        1.2        Wildcat
        1.2.1           European Wildcat
        1.2.2           African Wildcat
        2    Germany
        2.1        Otter
        2.2        Mole
                   --divider--
        2.3        Deer
    */
 
 
    global $DIC;
    $f = $DIC->ui()->factory();
    $renderer = $DIC->ui()->renderer();
 
    $ico = $f->symbol()->icon()->standard('', '')->withSize('small')->withAbbreviation('+');
    $image = $f->image()->responsive("src/UI/examples/Image/mountains.jpg", "Image source: https://stocksnap.io, Creative Commons CC0 license");
    $page = $f->modal()->lightboxImagePage($image, 'Mountains');
    $modal = $f->modal()->lightbox($page);
    $button = $f->button()->bulky($ico->withAbbreviation('>'), 'Modal', '')
        ->withOnClick($modal->getShowSignal());
 
    $uri = new \ILIAS\Data\URI('https://ilias.de');
    $link = $f->link()->bulky($ico->withAbbreviation('>'), 'Link', $uri);
    $divider = $f->divider()->horizontal();
 
    $items = [
        $f->menu()->sub('Switzerland', [
            $f->menu()->sub('Riverine Amphipod', [$button, $link]),
            $f->menu()->sub('Wildcat', [
                $f->menu()->sub('European Wildcat', [$button, $link]),
                $f->menu()->sub('African Wildcat', [$button, $link, $divider, $link])
            ]),
            $button,
            $link
        ]),
 
        $f->menu()->sub('Germany', [
            $f->menu()->sub('Otter', [$button, $link]),
            $f->menu()->sub('Mole', [$button, $link]),
            $divider,
            $f->menu()->sub('Deer', [$button, $link])
        ])
    ];
 
    $dd = $f->menu()->drilldown('Animal of the year', $items);
 
    return $renderer->render([
        $dd,
        $modal
    ]);
}
 
 
function toBulky(string $label): \ILIAS\UI\Component\Button\Bulky
{
    global $DIC;
    $f = $DIC->ui()->factory();
    $ico = $f->symbol()->icon()->standard('', '')
        ->withSize('small')
        ->withAbbreviation('+');
 
    return $f->button()->bulky($ico, $label, '');
}

Relations

Parents

UIComponent
Menu