{"id":13800384,"url":"https://github.com/slamdata/purescript-halogen-menu","last_synced_at":"2025-10-22T15:06:30.581Z","repository":{"id":58239075,"uuid":"45215635","full_name":"slamdata/purescript-halogen-menu","owner":"slamdata","description":null,"archived":true,"fork":false,"pushed_at":"2017-04-24T11:19:37.000Z","size":38,"stargazers_count":8,"open_issues_count":8,"forks_count":6,"subscribers_count":9,"default_branch":"master","last_synced_at":"2025-05-01T10:09:43.463Z","etag":null,"topics":[],"latest_commit_sha":null,"homepage":null,"language":"PureScript","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":"apache-2.0","status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/slamdata.png","metadata":{"files":{"readme":"README.md","changelog":null,"contributing":null,"funding":null,"license":"LICENSE","code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null}},"created_at":"2015-10-29T22:58:42.000Z","updated_at":"2023-01-28T16:05:13.000Z","dependencies_parsed_at":"2022-08-31T01:02:16.056Z","dependency_job_id":null,"html_url":"https://github.com/slamdata/purescript-halogen-menu","commit_stats":null,"previous_names":[],"tags_count":16,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/slamdata%2Fpurescript-halogen-menu","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/slamdata%2Fpurescript-halogen-menu/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/slamdata%2Fpurescript-halogen-menu/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/slamdata%2Fpurescript-halogen-menu/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/slamdata","download_url":"https://codeload.github.com/slamdata/purescript-halogen-menu/tar.gz/refs/heads/master","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":253913128,"owners_count":21983262,"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-08-04T00:01:12.109Z","updated_at":"2025-10-22T15:06:25.277Z","avatar_url":"https://github.com/slamdata.png","language":"PureScript","readme":"# purescript-halogen-menu\n\n[![Latest release](http://img.shields.io/github/release/slamdata/purescript-halogen-menu.svg)](https://github.com/slamdata/purescript-halogen-menu/releases)\n[![Build status](https://travis-ci.org/slamdata/purescript-halogen-menu.svg?branch=master)](https://travis-ci.org/slamdata/purescript-halogen-menu)\n\nA reusable halogen component that presents an interactive menu.\n\n## HTML\nMenus are rendered as unordered lists of submenus which can be selected and dismissed. Selected submenus are also rendered as unordered lists.\n\nHere is an example of a rendered menu with the first submenu selected.\n\n```HTML\n\u003cul\u003e\u003cli\u003e\u003cbutton\u003eColor\u003c/button\u003e\u003cul\u003e\u003cli\u003e\u003cbutton\u003eLoad color\u003c/button\u003e\u003c/li\u003e\u003cli\u003e\u003cbutton\u003eSave color\u003c/button\u003e\u003c/li\u003e\u003c/ul\u003e\u003c/li\u003e\u003cli\u003e\u003cdiv\u003e\u003cbutton\u003eEdit\u003c/button\u003e\u003c/div\u003e\u003c/li\u003e\u003c/ul\u003e\n```\n\n## Guide\n\n### Installing `purescript-halogen-menu`\n* Install `purescript-markdown-halogen` using bower: `bower i purescript-markdown-halogen --save`.\n\n### Rendering a menu\n* Create a Halogen parent component to install your menu in.\n* Decide what you want selecting an item from your menu to do. Commonly this will be to cause some other component or to evaluate a query.\n* Define a query or other data type which represents what you want selecting an item from your menu to do.\n* Import `Halogen.Menu.Model (Menu(), mkMenu)`.\n* Construct the intitial state of your menu as in [this example](https://github.com/beckyconning/color-editor/tree/94de4b0297ef1ed6e76561ec88234be0ca7f07bd/src/ColorEditorMenu/Model.purs) replacing `ColorQuery Unit` with the type you defined in the previous step.\n* Import `Halogen.Menu.Component (MenuP(), MenuQueryP(), SubmenuSlotAddress(), menuComponent)`.\n* Define a slot address for your menu.\n* Define a type synonym for your menu's state and queries using the query or other data type you defined above as in [this example](https://github.com/beckyconning/color-editor/tree/94de4b0297ef1ed6e76561ec88234be0ca7f07bd/src/ColorEditor/Component.purs#L37-L38).\n* Use these type synonyms and slot address type to redefine the child state, child query and child slot address type synonyms for your parent component as in [this example](https://github.com/beckyconning/color-editor/tree/94de4b0297ef1ed6e76561ec88234be0ca7f07bd/src/ColorEditor/Component.purs#L51-L53).\n* Install your menu into your parent component inside of an element with a class or id as in [this example](https://github.com/beckyconning/color-editor/tree/94de4b0297ef1ed6e76561ec88234be0ca7f07bd/src/ColorEditor/Component.purs#L74-L80).\n\n### Dismissing submenus when `onclick` events are triggered outside of a menu component\n* Import `Halogen.Menu.Query (MenuQuery(..))`.\n* Define a non propogating and default preventing action which is triggered by the onclick event of the root element of your application as in [this example](https://github.com/beckyconning/color-editor/tree/94de4b0297ef1ed6e76561ec88234be0ca7f07bd/src/ColorEditor/Component.purs#L71).\n* Define the evaluation of this action such that it queries your menu component with the `DismissSubmenu` action as in [this example](https://github.com/beckyconning/color-editor/tree/94de4b0297ef1ed6e76561ec88234be0ca7f07bd/src/ColorEditor/Component.purs#L93-L95).\n\n### Making a menu perform actions\n* Import `Halogen.Menu.Submenu.Query (SubmenuQuery(..))`.\n* Define a peek function for your parent component which transforms the `SelectSubmenuItem` query containing the values you have specified into the operations you wish to perform. In [this example](https://github.com/beckyconning/color-editor/tree/94de4b0297ef1ed6e76561ec88234be0ca7f07bd/src/ColorEditor/Component.purs#L97-L104) this is routing a query to another component.\n\n### Styling a menu\n* Use the [included template](stylesheet.css) to define styling for the `ul`s, `li`s and `button`s in your menu using the class or id you defined previously as a root element as in [this example](https://github.com/beckyconning/color-editor/tree/94de4b0297ef1ed6e76561ec88234be0ca7f07bd/stylesheet.css#L17-L72).\n\n## Module documentation\n\nModule documentation is [published on Pursuit](http://pursuit.purescript.org/packages/purescript-halogen-menu).\n\n## Example\nAn example Halogen application which uses `purescript-halogen-menu` is available [here](https://github.com/beckyconning/color-editor).\n","funding_links":[],"categories":["Components"],"sub_categories":[],"project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fslamdata%2Fpurescript-halogen-menu","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fslamdata%2Fpurescript-halogen-menu","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fslamdata%2Fpurescript-halogen-menu/lists"}