UPDATE-RATE

Die Test-Installation wird aktuell zwischen 8:00 und 18:00 Uhr stündlich zur vollen Stunde aktualisiert.
Alles neu macht der Mai

ILIAS 9 ist da! Alle Infos zu den Highlights der neuen Version gibt es hier!

Documentation

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

Main Bar

Description

Purpose
The Main Bar allows exploring the content and features of the plattform. The Main Bar provides users their usual means to access to content, services and settings. The Main Bar may offer access to content, services and settings independent from what is presented in the content area. The creation and management of repository objects are not part of the Main bar. The Main Bar offers space for Tools to be displayed besides the actual content. Tools home functionality that could not be placed elsewhere, there is no sophisticated concept. We strive to keep the number of Tools low and hone the concept further.
Composition
The Main Bar holds Slates and Bulky Buttons. In a desktop environment, a vertical bar is rendered on the left side of the screen covering the full height (minus header- and footer area). Entries are aligned vertically. In a mobile context, the bar will be rendered horizontally on the bottom. When the entries of a Main Bar exceed the available height (mobile: width), remaining buttons will be collected in a "..."-Button. The Main Bar is always visible and available (except in specialized views like the exam mode) as a static screen element unaffected by scrolling.
Effect
Clicking an entry will carry out its configured action. For slates, this is expanding the slate, while for Bulky Buttons this might be, e.g., just changing the page. Buttons in the Main Bar are stateful, i.e. they have a pressed-status that can either be toggled by clicking the same button again or by clicking a different button. This does not apply to Buttons directly changing the context. Opening a slate by clicking an entry will close all other slates in the Main Bar. On desktop, slates open on the right hand of the Main Bar, between bar and content, thus "pushing" the content to the right, if there is not enough room. If the content's width would fall below its defined minimum, the expanded slate is opened above (like in overlay, not "on top of") the content. The slates height equals that of the Main Bar. Also, their position will remain fixed when the page is scrolled. A button to close a slate is rendered underneath the slate. It will close all visible Slates and reset the states of all Main Bar-entries. When a tool (such as the help), whose contents are displayed in a slate, is being triggered, a special entry is rendered as first element of the Main Bar, making the available/invoked tool(s) accessible. Tools can be closed, i.e. removed from the Main Bar, via a Close Button. When the last Tool is closed, the tools-section is removed as well.
Context
  1. The Main Bar is used in the Standard Page.

Rivals

Tab Bar
The Main Bar (and its components) shall not be used to substitute functionality available at objects, such as settings, members or learning progress. Those remain in the Tab Bar.
Meta Bar
Notifications from the system to the user, e.g. new Mail, are placed in Elements of the Meta Bar. The general direction of communication for the Main Bar is "user to system", while the direction is "system to user" with elements of the Meta Bar. However, navigation from both components can lead to the same page.

Rules

Usage
  1. There SHOULD be a Main Bar on the page.
  2. There MUST NOT be more than one Main Bar on the page.
  3. If there is a Main Bar, it MUST be unique for the page.
  4. Entries and Tools in the Main Bar, or for that matter, their respective slate-contents, MUST NOT be used to reflect the outcome of a user's action, e.g., display a success-message.
  5. Contents of the slates, both in Entries and Tools, MUST NOT be used to provide information of a content object if that information cannot be found in the content itself. They MUST NOT be used as a "second screen" to the content-part of the Page.
Composition
  1. The bar MUST NOT contain items other than Bulky Buttons or Slates.
  2. The bar MUST contain at least one Entry.
  3. The bar SHOULD NOT contain more than five Entries.
  4. The bar SHOULD NOT contain more than five Tool-Entries.
  5. Entries and Tools in the Main Bar MUST NOT be enhanced with counters or other notifications drawing the user's attention.
Interaction
  1. Operating elements in the bar MUST either lead to further navigational options within the bar (open a slate) OR actually invoke navigation, i.e. change the location/content of the current page.
  2. Elements in the bar MUST NOT open a modal or new Viewport.
Style
  1. The bar MUST have a fixed width (desktop).
Accessibility
  1. The HTML tag < nav > MUST be used for the Main Bar to be identified as the ARIA Landmark Role "Navigation".
  2. The "aria-label" attribute MUST be set for the Main Bar, which MUST be language-dependant.
  3. The area, where the entries of the Main Bar are placed, MUST bear the ARIA role "menubar".
  4. Bulky Buttons in the Main Bar MUST bear the "aria-pressed" attribute to inform the user if the entry is engaged or disengaged at the moment.
  5. Bulky Buttons in the Main Bar MUST bear the "aria-haspopup" attribute.
  6. Bulky Buttons in the Main Bar MUST bear the ARIA role "menuitem".
  7. Slates in the Main Bar MUST bear the ARIA role "menu".
  8. Top-Level entries of the Main Bar MUST be rendered as a listitems.

Example 1: Mainbar

Better head over to a preview of page to see a mainbar in its entire beauty...

Full Screen Page Layout
<?php
 
declare(strict_types=1);
 
namespace ILIAS\UI\examples\MainControls\MainBar;
 
function mainbar(): string
{
    global $DIC;
    $f = $DIC['ui.factory'];
    $renderer = $DIC['ui.renderer'];
    $ctrl = $DIC['ilCtrl'];
 
 
    $ctrl->setParameterByClass('ilsystemstyledocumentationgui', 'node_id', 'LayoutPageStandardStandard');
    $ctrl->setParameterByClass('ilsystemstyledocumentationgui', 'new_ui', '1');
    $url = $ctrl->getLinkTargetByClass('ilsystemstyledocumentationgui', 'entries');
    $to_page = $f->link()->standard('Full Screen Page Layout', $url);
    $txt = $f->legacy('<p>Better head over to a preview of page to see a mainbar in its entire beauty...</p>');
    return $renderer->render([
        $txt,
        $to_page
    ]);
}
 

Relations

Parents
  1. UIComponent
  2. Main Controls