{"id":21424391,"url":"https://github.com/jinjor/elm-contextmenu","last_synced_at":"2025-07-14T08:31:48.867Z","repository":{"id":12909210,"uuid":"73039273","full_name":"jinjor/elm-contextmenu","owner":"jinjor","description":"Flexible context menu for Elm","archived":false,"fork":false,"pushed_at":"2022-01-07T09:24:42.000Z","size":266,"stargazers_count":15,"open_issues_count":4,"forks_count":5,"subscribers_count":1,"default_branch":"master","last_synced_at":"2025-04-08T05:35:11.866Z","etag":null,"topics":["context-menu","contextmenu","elm","elm-contextmenu"],"latest_commit_sha":null,"homepage":"http://package.elm-lang.org/packages/jinjor/elm-contextmenu/latest","language":"Elm","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":"bsd-3-clause","status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/jinjor.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":"2016-11-07T03:32:17.000Z","updated_at":"2024-10-05T20:54:49.000Z","dependencies_parsed_at":"2022-08-07T07:00:50.525Z","dependency_job_id":null,"html_url":"https://github.com/jinjor/elm-contextmenu","commit_stats":null,"previous_names":[],"tags_count":6,"template":false,"template_full_name":null,"purl":"pkg:github/jinjor/elm-contextmenu","repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/jinjor%2Felm-contextmenu","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/jinjor%2Felm-contextmenu/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/jinjor%2Felm-contextmenu/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/jinjor%2Felm-contextmenu/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/jinjor","download_url":"https://codeload.github.com/jinjor/elm-contextmenu/tar.gz/refs/heads/master","sbom_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/jinjor%2Felm-contextmenu/sbom","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":265262623,"owners_count":23736432,"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":["context-menu","contextmenu","elm","elm-contextmenu"],"created_at":"2024-11-22T21:21:38.900Z","updated_at":"2025-07-14T08:31:48.402Z","avatar_url":"https://github.com/jinjor.png","language":"Elm","funding_links":[],"categories":[],"sub_categories":[],"readme":"elm-contextmenu\n===\n\nFlexible context menu for Elm ([Demo](https://jinjor.github.io/elm-contextmenu/))\n\n## Warning\n\nOn the migration from Elm 0.18 to 0.19, the legacy `Color` type has changed to just a type alias of `String` like `#aaa`, `rgb(100,100,200)`. Also, some icon libraries that uses `Color` type (i.e. `FontAwesome`, `MaterialIcons`) cannot be used anymore. So now you need to make a function typed as `String -\u003e Int -\u003e Html msg`. It *should* work but I haven't tested yet.\n\nI also think the implementation can be improved using new Browser API, but I cannot spend my time to try it. The styling method can be improved too. I would really appreciate if someone do that. Don't hesitate to fork this package or make your own from scratch! ([This article](http://jinjor-labo.hatenablog.com/entry/2016/11/05/201107) may help.)\n\n\n## How to use\n\nThis component works with [The Elm Architecture](https://guide.elm-lang.org/architecture/).\n\n\u003cspan\u003e1. Model\u003c/span\u003e\n```elm\ntype alias Model =\n  { contextMenu : ContextMenu Context\n  , config : ContextMenu.Config\n  , message : String\n  }\n```\n\n\u003cspan\u003e2. Msg\u003c/span\u003e\n```elm\ntype Msg\n  = ContextMenuMsg (ContextMenu.Msg Context)\n  | Item Int\n```\n\n\u003cspan\u003e3. Initialize\u003c/span\u003e\n```elm\ninit : Flags -\u003e (Model, Cmd Msg)\ninit flags =\n  let\n    (contextMenu, msg) = ContextMenu.init\n  in\n    ( { contextMenu = contextMenu\n      }\n    , Cmd.map ContextMenuMsg msg\n    )\n```\n\n\u003cspan\u003e4. Update\u003c/span\u003e\n```elm\nupdate : Msg -\u003e Model -\u003e (Model, Cmd Msg)\nupdate msg model =\n  case msg of\n    ContextMenuMsg msg -\u003e\n      let\n        (contextMenu, cmd) =\n          ContextMenu.update msg model.contextMenu\n      in\n        ( { model | contextMenu = contextMenu }\n        , Cmd.map ContextMenuMsg cmd\n        )\n```\n\n\u003cspan\u003e5. Subscribe\u003c/span\u003e\n```elm\nsubscriptions : Model -\u003e Sub Msg\nsubscriptions model =\n  Sub.map ContextMenuMsg (ContextMenu.subscriptions model.contextMenu)\n```\n\n\u003cspan\u003e6. View\u003c/span\u003e\n```elm\nview : Model -\u003e Html Msg\nview model =\n  div\n    [ ContextMenu.open ContextMenuMsg \"context1\" ]\n    [ ContextMenu.view\n        ContextMenu.defaultConfig\n        ContextMenuMsg\n        toItemGroups\n        toItemGroups model.contextMenu\n    ]\n\ntoItemGroups : String -\u003e List (List Item)\ntoItemGroups context =\n  if context == \"context1\" then\n    [ [ (ContextMenu.item \"Hey\", Item 1)\n      , (ContextMenu.item \"Yo!\", Item 2)\n      ]\n    ]\n  else\n    []\n```\n\n\n## License\n\nBSD-3-Clause\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fjinjor%2Felm-contextmenu","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fjinjor%2Felm-contextmenu","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fjinjor%2Felm-contextmenu/lists"}