reagent-mui-nested-menu.core — io.github.jramosg/reagent-mui-nested-menu 0.1.0

Nested MUI menu components for Reagent.

Public API: nested-menu (dropdown), context-menu (right-click), nested-menu-item / icon-menu-item (low-level), menu-items-from-data (build menus from data) and the chevron-right / chevron-down icons.

Uses MUI subpath imports (e.g. @mui/material/Menu) instead of the barrel @mui/material, which keeps it compatible across MUI v5 to v9.

chevron-down cljs

(chevron-down {:keys [expanded?] :as props})

Down-pointing chevron used as the dropdown button end-icon. Pass :expanded? true to rotate it 180°. Rotation is inline style, not sx, so it works on any MUI version. Use .jnm-caret / .jnm-caret-expanded for optional class-based overrides.

chevron-right cljs

(chevron-right props)

Right-pointing chevron used as the default sub-menu indicator.

context-menu cljs

(context-menu {:keys [items menu-props direction] :or {direction :right}}
              &
              children)

Wrap children so that right-clicking inside them opens a nested menu anchored at the pointer position.

Options:

• :items vector of item maps (see menu-items-from-data)
• :menu-props extra props forwarded to the MUI Menu
• :direction :right (default) or :left

icon-menu-item cljs

(icon-menu-item {:keys [label render-label left-icon right-icon on-click
                        disabled selected style sx menu-item-props ref class]})

A single MenuItem with optional left/right icons and a label.

Options:

• :label text label (string)
• :render-label fn returning hiccup/element, takes precedence over :label
• :left-icon element/hiccup rendered before the label
• :right-icon element/hiccup rendered after the label
• :on-click click handler, receives the DOM event
• :disabled boolean
• :selected boolean (highlight as selected)
• :style inline style map merged over the layout defaults
• :sx MUI sx map forwarded as-is (MUI v5+ only)
• :menu-item-props extra props forwarded to the underlying MenuItem
• :ref ref callback for the underlying li

The built-in layout uses an inline :style (not sx) so it renders the same way on the supported MUI versions.

menu-items-from-data cljs

(menu-items-from-data {:keys [items parent-menu-open? close! direction
                              selected-value]
                       :or {direction :right}})

Turn a vector of item maps into a seq of nested-menu-item / icon-menu-item elements.

Each item map supports: :label, :render-label, :left-icon, :right-icon, :callback, :items, :disabled, :sx, :delay, :value and :uid. Items with non-empty :items become sub-menus; leaves invoke :callback (called with [event item]) and then :close!.

nested-menu cljs

(nested-menu {:keys [items button-props menu-props direction label on-click]
              :or {direction :right}
              selected-value :value})

Dropdown button that opens a (possibly nested) menu.

Options:

• :items vector of item maps (see menu-items-from-data)
• :label button label (falls back to (:label button-props))
• :button-props props forwarded to the MUI Button
• :menu-props props forwarded to the root MUI Menu
• :direction :right (default) or :left opening direction
• :value currently selected value (highlights matching leaves)
• :on-click extra handler invoked when the button is clicked

nested-menu-item cljs

(nested-menu-item {:keys [label render-label left-icon right-icon items disabled
                          delay value direction selected-value parent-menu-open?
                          close! menu-props container-props sx]
                   :or {delay 0 direction :right}})

A MenuItem that opens a nested Menu on hover/focus. Mirrors the behaviour of mui-nested-menu's NestedMenuItem, including keyboard navigation (ArrowRight enters the sub-menu, ArrowLeft returns to the parent) and a configurable open :delay.

On top of the icon-menu-item options it accepts:

• :items child item maps (rendered recursively)
• :parent-menu-open? whether the containing menu is open
• :close! zero-arg fn closing the whole menu tree (root)
• :direction :right (default) or :left
• :delay ms to wait on hover before opening (default 0)
• :selected-value currently selected value (for highlighting leaves)
• :menu-props extra props forwarded to the sub-menu Menu
• :container-props extra props forwarded to the wrapper div