{"id":21065638,"url":"https://github.com/adaptlearning/adapt-contrib-boxmenu","last_synced_at":"2025-05-16T02:33:30.196Z","repository":{"id":802139,"uuid":"15081613","full_name":"adaptlearning/adapt-contrib-boxMenu","owner":"adaptlearning","description":"A simple contributed menu based upon a grid system","archived":false,"fork":false,"pushed_at":"2025-05-13T08:12:17.000Z","size":490,"stargazers_count":2,"open_issues_count":11,"forks_count":30,"subscribers_count":25,"default_branch":"master","last_synced_at":"2025-05-13T09:27:50.339Z","etag":null,"topics":[],"latest_commit_sha":null,"homepage":null,"language":"JavaScript","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":"gpl-3.0","status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/adaptlearning.png","metadata":{"files":{"readme":"README.md","changelog":null,"contributing":".github/CONTRIBUTING.md","funding":null,"license":"LICENSE","code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null,"governance":null,"roadmap":null,"authors":null,"dei":null,"publiccode":null,"codemeta":null,"zenodo":null}},"created_at":"2013-12-10T15:52:02.000Z","updated_at":"2025-05-13T08:12:20.000Z","dependencies_parsed_at":"2024-04-08T10:45:06.512Z","dependency_job_id":"a218dbb3-1335-4273-a86a-af482bfd0ca5","html_url":"https://github.com/adaptlearning/adapt-contrib-boxMenu","commit_stats":null,"previous_names":[],"tags_count":65,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/adaptlearning%2Fadapt-contrib-boxMenu","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/adaptlearning%2Fadapt-contrib-boxMenu/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/adaptlearning%2Fadapt-contrib-boxMenu/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/adaptlearning%2Fadapt-contrib-boxMenu/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/adaptlearning","download_url":"https://codeload.github.com/adaptlearning/adapt-contrib-boxMenu/tar.gz/refs/heads/master","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":254456379,"owners_count":22074166,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2022-07-04T15:15:14.044Z","host_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub","repositories_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories","repository_names_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repository_names","owners_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners"}},"keywords":[],"created_at":"2024-11-19T17:55:51.759Z","updated_at":"2025-05-16T02:33:29.888Z","avatar_url":"https://github.com/adaptlearning.png","language":"JavaScript","funding_links":[],"categories":[],"sub_categories":[],"readme":"# adapt-contrib-boxMenu\n\n**Box Menu** is a *menu* bundled with the [Adapt framework](https://github.com/adaptlearning/adapt_framework).\n\n\u003cimg src=\"https://github.com/adaptlearning/documentation/blob/master/04_wiki_assets/plug-ins/images/boxmenu01.png\" alt=\"image of two rectangular menu options produced by box menu\"\u003e\n\nMenu choices are framed within a box element and arranged in a grid. **Box 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.\n\n[Visit the **Box Menu** wiki](https://github.com/adaptlearning/adapt-contrib-boxMenu/wiki) for more information about its functionality and for explanations of key properties. Options include an estimated time for completion (duration) and a progress bar to indicate the percentage of components that have been completed.\n\n## Installation\n\nAs Adapt's *[core menu](https://github.com/adaptlearning/adapt_framework/wiki/Core-Plug-ins-in-the-Adapt-Learning-Framework#menu),* **Box Menu** is included with the [installation of the Adapt framework](https://github.com/adaptlearning/adapt_framework/wiki/Manual-installation-of-the-Adapt-framework#installation) and the [installation of the Adapt authoring tool](https://github.com/adaptlearning/adapt_authoring/wiki/Installing-Adapt-Origin).\n\n* If **Box Menu** has been uninstalled from the Adapt framework, it may be reinstalled.\nWith the [Adapt CLI](https://github.com/adaptlearning/adapt-cli) installed, run the following from the command line:\n`adapt install adapt-contrib-boxMenu`\n\n    Alternatively, this component can also be installed by adding the following line of code to the *adapt.json* file:\n    `\"adapt-contrib-boxMenu\": \"*\"`\n    Then running the command:\n    `adapt install`\n    (This second method will reinstall all plug-ins listed in *adapt.json*.)\n\n* If **Box Menu** has been uninstalled from the Adapt authoring tool, it may be reinstalled using the [Plug-in Manager](https://github.com/adaptlearning/adapt_authoring/wiki/Plugin-Manager).\n\n## Uninstallation\nThe Adapt framework does not allow the installation of more than one menu at a time. In order to replace **Box Menu** it must be uninstalled. With the root of your framework installation as your current working directory, run the following command:\n`adapt uninstall adapt-contrib-boxMenu`\n\n\u003cdiv float align=right\u003e\u003ca href=\"#top\"\u003eBack to Top\u003c/a\u003e\u003c/div\u003e\n\n## Settings Overview\n\nThe attributes listed below are used in *course.json* and *contentObjects.json* to configure **Box Menu**, and are properly formatted as JSON in [*example.json*](https://github.com/adaptlearning/adapt-contrib-boxmenu/blob/master/example.json). Visit the [**Box Menu** wiki](https://github.com/adaptlearning/adapt-contrib-boxMenu/wiki) for more information about how they appear in the [authoring tool](https://github.com/adaptlearning/adapt_authoring/wiki).\n\n### Attributes\n\n#### *course.json*\nThe following attributes, set within *course.json*, configure the defaults for **Box Menu**.\n\n**\\_boxMenu** (object): The boxMenu object that contains value for **\\_backgroundImage**, **\\_backgroundStyles**, and **\\_menuHeader**.\n\n\u003e**\\_graphic_** (object): The graphic object that contains values for **\\_src** and **alt**. Typically used to display a logo image\n\n\u003e\u003e**\\_src** (string): File name (including path) of the image\n\n\u003e\u003e**alt** (string): A description of the image; required when it has meaning that must be conveyed to the learner. For 'decorative' images, leave this blank\n\n\u003e**\\_backgroundImage** (object): The backgroundImage object that contains values for **\\_xlarge**, **\\_large**, **\\_medium** and **\\_small**.\n\n\u003e\u003e**\\_xlarge** (string): File name (including path) of the image used with xlarge device width. Path should be relative to the *src* folder (e.g., *course/en/images/origami-menu-one.jpg*).\n\n\u003e\u003e**\\_large** (string): File name (including path) of the image used with large device width. Path should be relative to the *src* folder (e.g., *course/en/images/origami-menu-one.jpg*).\n\n\u003e\u003e**\\_medium** (string): File name (including path) of the image used with medium device width. Path should be relative to the *src* folder (e.g., *course/en/images/origami-menu-one.jpg*).\n\n\u003e\u003e**\\_small** (string): File name (including path) of the image used with small device width. Path should be relative to the *src* folder (e.g., *course/en/images/origami-menu-one.jpg*).\n\n\u003e**\\_backgroundStyles** (object): Additional attributes available to customise how background images display. The backgroundStyles object contains attributes for **\\_backgroundRepeat**, **\\_backgroundSize** and **\\_backgroundPosition**.\n\n\u003e\u003e**\\_backgroundRepeat** (string): This attribute defines how the background image repeats. Options include **repeat**, **repeat-x**, **repeat-y** and **no-repeat**.\nRepeat-x: The background image is repeated only horizontally. Repeat-y: The background image is repeated only vertically.\n\n\u003e\u003e**\\_backgroundSize** (string): This attribute defines the size the background image display. Options include **auto**, **cover**, **contain**, and **100% 100%**.\nAuto: The background image is displayed in its original size. Cover: Resize the background image to cover the entire container, even if it has to stretch or crop the image. Contain: Resize the background image to make sure the image is fully visible. 100% 100%: Resize the background image to match the dimensions of the container.\n\n\u003e\u003e**\\_backgroundPosition** (string): This attribute sets the position of the background image. Options include **left top**, **left center**, **left bottom**, **center top**, **center center**, **center bottom**, **right top**, **right center**, **right bottom**.\nThe first value is the horizontal position and the second value is the vertical.\n\n\u003e**\\_menuHeader** (object): The menuHeader object that contains values for **\\_textAlignment**, **\\_backgroundImage**, **\\_backgroundStyles**, and **\\_minimumHeights**.\n\n\u003e\u003e**\\_textAlignment** (object): The text alignment object that contains values for **\\_title**, **\\_body**, and **\\_instruction**.\n\n\u003e\u003e\u003e**\\_title**: (string): This attribute defines the alignment of the title element. Properties include **left**, **center**, and **right**.\nLeft: Aligns the title to the left of the container. Center: Aligns the title to the center of the container. Right: Aligns the title to the right of the container. The alignment automatically inverses for right-to-left languages. The default is `` which inherits the natural page direction.\n\n\u003e\u003e\u003e**\\_body**: (string): This attribute defines the alignment of the body element. Properties include **left**, **center**, and **right**.\nLeft: Aligns the body to the left of the container. Center: Aligns the body to the center of the container. Right: Aligns the body to the right of the container. The alignment automatically inverses for right-to-left languages. The default is `` which inherits the natural page direction.\n\n\u003e\u003e\u003e**\\_instruction**: (string): This attribute defines the alignment of the instruction element. Properties include **left**, **center**, and **right**.\nLeft: Aligns the instruction to the left of the container. Center: Aligns the instruction to the center of the container. Right: Aligns the instruction to the right of the container. The alignment automatically inverses for right-to-left languages. The default is `` which inherits the natural page direction.\n\n\u003e\u003e**\\_backgroundImage** (object): The backgroundImage object that contains values for **\\_xlarge**, **\\_large**, **\\_medium** and **\\_small**.\n\n\u003e\u003e\u003e**\\_xlarge** (string): File name (including path) of the image used with xlarge device width. Path should be relative to the *src* folder (e.g., *course/en/images/origami-menu-one.jpg*).\n\n\u003e\u003e\u003e**\\_large** (string): File name (including path) of the image used with large device width. Path should be relative to the *src* folder (e.g., *course/en/images/origami-menu-one.jpg*).\n\n\u003e\u003e\u003e**\\_medium** (string): File name (including path) of the image used with medium device width. Path should be relative to the *src* folder (e.g., *course/en/images/origami-menu-one.jpg*).\n\n\u003e\u003e\u003e**\\_small** (string): File name (including path) of the image used with small device width. Path should be relative to the *src* folder (e.g., *course/en/images/origami-menu-one.jpg*).\n\n\u003e\u003e**\\_backgroundStyles** (object): Additional attributes available to customise how background images display. The backgroundStyles object contains attributes for **\\_backgroundRepeat**, **\\_backgroundSize** and **\\_backgroundPosition**.\n\n\u003e\u003e\u003e**\\_backgroundRepeat** (string): This attribute defines how the background image repeats. Options include **repeat**, **repeat-x**, **repeat-y** and **no-repeat**.\nRepeat-x: The background image is repeated only horizontally. Repeat-y: The background image is repeated only vertically.\n\n\u003e\u003e\u003e**\\_backgroundSize** (string): This attribute defines the size the background image display. Options include **auto**, **cover**, **contain**, and **100% 100%**.\nAuto: The background image is displayed in its original size. Cover: Resize the background image to cover the entire container, even if it has to stretch or crop the image. Contain: Resize the background image to make sure the image is fully visible. 100% 100%: Resize the background image to match the dimensions of the container.\n\n\u003e\u003e\u003e**\\_backgroundPosition** (string): This attribute sets the position of the background image. Options include **left top**, **left center**, **left bottom**, **center top**, **center center**, **center bottom**, **right top**, **right center**, **right bottom**.\nThe first value is the horizontal position and the second value is the vertical.\n\n\u003e\u003e**\\_minimumHeights** (object): The minimumHeights object that contains values for **\\_xlarge**, **\\_large**, **\\_medium** and **\\_small**.\n\n\u003e\u003e\u003e**\\_xlarge** (number): The minimum height should only be used in instances where the menu header height needs to be greater than the content e.g. to prevent a background image being cropped.\n\n\u003e\u003e\u003e**\\_large** (number): The minimum height should only be used in instances where the menu header height needs to be greater than the content e.g. to prevent a background image being cropped.\n\n\u003e\u003e\u003e**\\_medium** (number): The minimum height should only be used in instances where the menu header height needs to be greater than the content e.g. to prevent a background image being cropped.\n\n\u003e\u003e\u003e**\\_small** (number): The minimum height should only be used in instances where the menu header height needs to be greater than the content e.g. to prevent a background image being cropped.\n\n**\\_globals** (object): The Globals object that contains value for **\\_menu**.\n\n\u003e**\\_menu** (object): The menu object that contains value for **\\_boxMenu**.\n\n\u003e\u003e**\\_boxMenu** (object): The boxMenu object that contains value for **durationLabel**.\n\n\u003e\u003e\u003e**durationLabel** (string): Optional text which precedes **duration** (e.g., `\"Duration:\"`).\n\n#### *contentObjects.json*\nThe following attributes, set within *contentObjects.json*, configure the defaults for **Box Menu**.\n\n**\\_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.\n\n**\\_parentId** (string): This value is sourced from the parent element's `_id` found within *course.json*. It must match.\n\n**\\_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.\n\n**\\_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.\n\n**\\_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.\n\n**title** (string): This text is a reference title for the content object.\n\n**displayTitle** (string):  This text is displayed on the menu item.\n\n**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.\n\n**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*](https://github.com/adaptlearning/adapt-contrib-vanilla/blob/master/templates/page.hbs).\n\n**\\_graphic** (object): The image that appears on the menu item. It contains values for **alt** and **src**.\n\n\u003e**alt** (string): The alternative text for this image. Assign [alt text](https://github.com/adaptlearning/adapt_framework/wiki/Providing-good-alt-text) to images that convey course content only.\n\n\u003e**src** (string): File name (including path) of the image. Path should be relative to the *src* folder (e.g., *\"course/en/images/t05.jpg\"*).\n\n**linkText** (string): This text is displayed on the menu item's link/button.\n\n**duration** (string): Optional text which follows **durationLabel** (e.g., `\"2 mins\"`).\n\n**\\_boxMenu** (object): The boxMenu object that contains value for **\\_renderAsGroup**.\n\n\u003e**\\_renderAsGroup** (boolean): Enable this option to render items into a group on the menu. Groups can display a title, body, and instruction text.\n\n\u003eFramework: Change the group content object type to `menu` and update the `_parentId` of the children content objects to match the group content object `_id`. Authoring Tool: Add a submenu and check the 'Enable as menu group?' setting. All users: If accessibility is required update the aria level values in config settings so the title hierarchy remains intact.\n\n\u003cdiv float align=right\u003e\u003ca href=\"#top\"\u003eBack to Top\u003c/a\u003e\u003c/div\u003e\n\n## Limitations\n\nNo known limitations.\n\n----------------------------\n\u003ca href=\"https://community.adaptlearning.org/\" target=\"_blank\"\u003e\u003cimg src=\"https://github.com/adaptlearning/documentation/blob/master/04_wiki_assets/plug-ins/images/adapt-logo-mrgn-lft.jpg\" alt=\"adapt learning logo\" align=\"right\"\u003e\u003c/a\u003e\u003cbr\u003e\n**Author / maintainer:** Adapt Core Team with [contributors](https://github.com/adaptlearning/adapt-contrib-boxmenu/graphs/contributors)\u003cbr\u003e\n**Accessibility support:** WAI AA\u003cbr\u003e\n**RTL support:** Yes\u003cbr\u003e\n**Cross-platform coverage:** Chrome, Chrome for Android, Firefox (ESR + latest version), Edge, IE11, Safari 14 for macOS/iOS/iPadOS, Opera\u003cbr\u003e\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fadaptlearning%2Fadapt-contrib-boxmenu","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fadaptlearning%2Fadapt-contrib-boxmenu","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fadaptlearning%2Fadapt-contrib-boxmenu/lists"}