reagent-mui-nested-menu

Nested MUI menus for Reagent/ClojureScript and React: a dropdown, a right-click context menu, per-item icons, custom labels and keyboard navigation. A ClojureScript port of mui-nested-menu by steviebuilds.

• No CSS to import. Pointer-events and the caret rotation ship inline.
• MUI v5 to v9. Subpath imports and inline style keep it off any version-specific API.
• Clojars and npm. One source builds the Reagent jar and the React package.

Live demo →

Install

ClojureScript (Clojars)

Clojure CLI / deps.edn:

io.github.jramosg/reagent-mui-nested-menu {:mvn/version "0.1.0"}

Leiningen / Boot / shadow-cljs.edn:

[io.github.jramosg/reagent-mui-nested-menu "0.1.0"]

React (npm)

npm install reagent-mui-nested-menu

Peer dependencies

MUI and React are peers (you provide them). MUI v5 and v6 need Emotion; v7 and later make it optional.

{
  "peerDependencies": {
    "@mui/material": ">=5 <10",
    "react": ">=17 <20",
    "react-dom": ">=17 <20",
    "@emotion/react": ">=11",
    "@emotion/styled": ">=11"
  }
}

MUI v4 compatibility

The library targets @mui/material (v5+). To use it in a project that only has @material-ui/core (v4), install an npm alias so @mui/material resolves to your existing v4 package:

npm install @mui/material@npm:@material-ui/core@^4 --legacy-peer-deps

This creates node_modules/@mui/material pointing at @material-ui/core, with no duplicate code. Emotion is not required for v4.

Quick start (CLJS)

(ns my.app
  (:require [reagent-mui-nested-menu.core :refer [nested-menu]]))

[nested-menu
 {:button-props {:label "Open"}
  :items [{:label "New file" :callback (fn [_e _item] (prn "new"))}
          {:label "Export"
           :items [{:label "PDF"  :callback (fn [_e _item] (prn "pdf"))}
                   {:label "JSON" :callback (fn [_e _item] (prn "json"))}]}]}]

No CSS import needed.

Documentation

The full guide and the API reference live on cljdoc:

• Menus from data: components, item maps, nesting, icons, selection and the context menu.
• React usage: the npm package and JSX examples.
• Styling: class hooks and per-item styles.

Public API: the single namespace reagent-mui-nested-menu.core.

Development

Build, test, publish and demo instructions live in DEVELOPMENT.md.

Credits

Port of mui-nested-menu by steviebuilds.

License

MIT.