Scrolling Tiles Menu is a menu that works with the Adapt framework.
Menu choices are framed within a box element and arranged in a grid. Scrolling Tiles Menu allows you to direct the learner to either further menus (sub menus) or to one or more pages of content. The Box Menu default is show a title, an image, some body text, duration, a progress indicator and a link button.
The attributes listed below are used in contentObjects.json to configure Box Menu, and are properly formatted as JSON in example.json. Visit the Box Menu wiki for more information about how they appear in the authoring tool.
_id (string): This is a unique identifier that establishes relationships with other content structures. It is referenced in articles.json as the _parentid of an article model.
_parentId (string): This value is sourced from the parent element's _id found within course.json. It must match.
_type (string): This value determines what the learner will access by clicking the provided link/button. Acceptable values are "page" and "menu". "page" will direct the learner to a page structured with articles, blocks, and components. "menu" will direct the learner to a page with more menus.
_classes (string): CSS class name to be applied to menu item's page element (src/core/js/views/pageView.js). The class must be predefined in one of the Less files. Separate multiple classes with a space.
_isHidden (boolean): If you want to hide a content object from the menu, set this to true. This can be useful if, for example, you have a content object defined as a 'start page' for the course which you therefore don't want to be listed on the menu since the user will have already seen it.
title (string): This text is a reference title for the content object.
displayTitle (string): This text is displayed on the menu item.
body (string): Optional text that appears on the menu item. Often used to inform the learner about the menu choice. If no pageBody is supplied, this text will also appear as the body text of the page header.
pageBody (string): Optional text that appears as the body text of the page header. If this text is not provided, the body text will be used (if it is supplied). Reference adapt-contrib-vanilla/templates/page.hbs.
_graphic (object): The image that appears on the menu item. It contains values for alt and src.
alt (string): This text becomes the image’s
altattribute.
src (string): File name (including path) of the image. Path should be relative to the src folder (e.g., "course/en/images/t05.jpg").
linkText (string): This text is displayed on the menu item's link/button.
durationLabel (string): Optional text which precedes duration (e.g., "Duration:").
duration (string): Optional text which follows durationLabel (e.g., "2 mins").
To add a custom default text description for the menu item buttons and remove the click or tap verbage. Please use the following coding in the Custom CSS/Less Project settings.
Code example
.menu-item-button:after {
content: 'Cliquez ou tapez sur Voir pour commencer.';
}
Several menu-related elements are assigned a label using the aria-label attribute: ariaRegion, menuItem, and menuEnd. These labels are not visible elements. They are utilized by assistive technology such as screen readers. Should the label texts need to be customised, they can be found within the globals object in properties.schema.
DOES NOT WORK WITH FRAMEWORK VERSION 5. Please go to the Framework 5 version of this menu on my other github site...
[github.com/zarek3333/adapt-tilesMenu](https://github.com/zarek3333/adapt-tilesMenu)
Version number: 3.0.3 
Framework versions: 2.1+
Author / maintainer: Adapt Core Team with contributors
Accessibility support: WAI AA
RTL support: yes
Cross-platform coverage: Chrome, Chrome for Android, Firefox (ESR + latest version), Edge, IE11, IE Mobile 11, Safari 10+11 for macOS+iOS, Opera