trotl-menu

A simple, flexible Menu UI for React

DEMO: https://menu.linijart.eu/

🚀 Installation

npm install trotl-menu
# or
yarn add trotl-menu

Versions

1.0.14 => added prop isCollapsed
1.0.13 => ...
1.0.12 => ...
1.0.11 => style update
1.0.10 => add style prop
1.0.9  => update/add footer, header...
1.0.8  => update/add menu
1.0.7  => fix reorder drag
1.0.6  => ...
1.0.5  => ...
1.0.4  => ...
1.0.3  => ...
1.0.2  => ...
1.0.1  => initial release

⚡ Quick Start

import Menu from "trotl-menu";

const sample = [
  { title: 'Inbox', children: [{ title: 'Personal' }, { title: 'Work' }] },
  { title: 'Projects', children: [{ title: 'Alpha' }, { title: 'Beta' }] },
  { title: 'Archive' }
]

export default function Demo() {
  return (
    <div className="body-content">
      <Menu
        data={sample}
        onChange={(next) => console.log('tree changed', next)}
        onItemClick={(next) => console.log('onItemClick', next)}
        header=" " // or null or custom JSX
        fitContent={true}
        customIcons={['📁', '⭐', '📌', '🔔', '🗂️', '😀']}
        selectedKey="comp"
        selectedValue="TicketTable"
        collapse={true}
        side="left"
        defaultIcon="📂"
        // theme="dark"
        header={null} // or null or custom JSX
        // customMenuIconCollapsed={[">", "<"]}
        // style={{ position: "fixed" , zIndex: 10000, top: 20 }}
      />
    </div>
  )
}

🛠 Features

📚 API Reference

🌟 Context Hooks

🎨 Styling

🏆 License

MIT — free to use, modify, and share.