LemonadeJS Top Menu

Official website and documentation is here

Compatible with Vanilla JavaScript, LemonadeJS, React, Vue or Angular.

The LemonadeJS Top Menu is a functional component designed to facilitate convenient access to key actions within your application. Comprising a set of thoughtfully arranged buttons, this interface ensures a straightforward and efficient user experience.

With a focus on usability, the Top Menu presents a collection of essential features in a visually organized manner. The design emphasizes clarity and simplicity, allowing users to navigate through the menu with ease.

This component serves as a centralized point for accessing core functionalities, contributing to an improved overall user experience. Its adaptable nature enables seamless integration into diverse applications, ensuring a consistent and responsive menu system aligned with your application's requirements.

Getting Started

You can install using NPM or using directly from a CDN.

$3

To install it in your project using npm, run the following command:

``bash
$ npm install @lemonadejs/topmenu
`

$3

To use Top Menu via a CDN, include the following script tags in your HTML file:

`html








`

$3

Quick example with Lemonade

`javascript
// Add the following link to your HTML file:
//
import Topmenu from '@lemonadejs/topmenu';
import '@lemonadejs/topmenu/dist/style.css';
import '@lemonadejs/contextmenu/dist/style.css';
import '@lemonadejs/modal/dist/style.css';

export default function App() {
const self = this;

self.options = [
{
title: 'File',
submenu: [
{
title: 'New',
},
{
title: 'Open',
},
{
title: 'Save',
},
{
title: 'Save As',
},
],
},
{
title: 'About Us',
submenu: [
{
title: 'Undo',
},
{
title: 'Redo',
},
{
title: 'Cut',
},
{
title: 'Copy',
},
{
title: 'Paste',
},
],
},
{
title: 'View',
submenu: [
{
title: 'Zoom In',
},
{
title: 'Zoom Out',
},
],
},
];

return

`jsx
import React, { useRef } from 'react';
import Topmenu from '@lemonadejs/topmenu/dist/react';
import '@lemonadejs/topmenu/dist/style.css';
import '@lemonadejs/contextmenu/dist/style.css';
import '@lemonadejs/modal/dist/style.css';
const options = [
{
title: 'File',
submenu: [
{
title: 'New',
},
{
title: 'Open',
},
{
title: 'Save',
},
{
title: 'Save As',
},
],
},
{
title: 'About Us',
submenu: [
{
title: 'Undo',
},
{
title: 'Redo',
},
{
title: 'Cut',
},
{
title: 'Copy',
},
{
title: 'Paste',
},
],
},
{
title: 'View',
submenu: [
{
title: 'Zoom In',
},
{
title: 'Zoom Out',
},
],
},
];

export default function App() {
const topmenu = useRef();
return (
<>


);
}
`

Quick example with vue

`vue



`

$3

| Property | Type | Description |
| -------- | ------------ | ---------------------------------------------------------------------------------------------------------------------------------------------------- |
| options | optionItem[] | An array of option objects describing the rendering options. Each item should follow the structure defined in the 'Option Properties' section below. |

$3

| Property | Type | Description |
| -------- | ------------- | ------------------------------------------------------------------------------------------------------------------------------------------------------ |
| title? | string | The title text associated with the option. |
| submenu? | submenuItem[] | An optional array containing options displayed as a sub-menu. Each item should follow the structure defined in the 'Submenu Properties' section below. |

$3

| Property | Type | Description |
| --------- | ------------------------ | ------------------------------------------------------------------------------------- |
| title? | string | The title text associated with the option. |
| submenu? | array of submenu options | An optional array containing options displayed as a submenu. |
| onclick? | function | Onclick event for the contextmenu item. |
| render? | function | The function executed when rendering the option. |
| type? | string | Context menu item type: line, divisor, default. |
| id? | string | HTML id property of the item DOM element. |
| disabled? | boolean | Item is disabled. |
| shortcut? | string | A short description or instruction for the item. Normally a shortcut. Ex. CTRL + C`. |
| tooltip? | string | Show this text when the user mouse over the element. |

$3

The LemonadeJS Top Menu emphasizes user-friendly keyboard navigation with the following features:

1. Comprehensive Keyboard Accessibility:

- Enables seamless navigation through menu options using standard keyboard controls.

2. Smart Focus Management:
- Automatically opens submenus upon hovering over options after opening them for the first time.
- Facilitates exploration of different sections without the need for manual submenu handling.

This design choice not only accommodates users relying on keyboard input but also enhances overall usability, providing an efficient navigation experience.

License

The LemonadeJS Top Menu is released under the MIT.

Other Tools

- jSuites
- Jspreadsheet Data Grid