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.

npm Installation

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

$ npm install @lemonadejs/topmenu

CDN

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

<script src="https://cdn.jsdelivr.net/npm/lemonadejs/dist/lemonade.min.js"></script>
<script type="text/javascript" src="https://cdn.jsdelivr.net/npm/@lemonadejs/topmenu/dist/index.min.js"></script>
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@lemonadejs/topmenu/dist/style.min.css" />
<script type="text/javascript" src="https://cdn.jsdelivr.net/npm/@lemonadejs/modal/dist/index.min.js"></script>
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@lemonadejs/modal/dist/style.min.css" />
<script src="https://cdn.jsdelivr.net/npm/@lemonadejs/contextmenu/dist/index.min.js"></script>
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@lemonadejs/contextmenu/dist/style.min.css" />
<link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Material+Icons" />

Usage

Quick example with Lemonade

// Add the following link to your HTML file:
// <link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Material+Icons" />
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 `<div>
        <Topmenu :options="self.options" :ref="self.topmenu" />
    </div>`
}

Quick example with React

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 (
        <>
            <Topmenu ref={topmenu} options={options} align="left"/>
        </>
    );
}

Quick example with vue

<template>
  <Topmenu :options="options" align="left"/>
</template>

<script>
import Topmenu from '@lemonadejs/topmenu/dist/vue';
import '@lemonadejs/topmenu/dist/style.css';
import '@lemonadejs/contextmenu/dist/style.css';
import '@lemonadejs/modal/dist/style.css';

export default {
  name: 'App',
  components: {
    Topmenu,
  },
  data() {
    return {
      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' }
          ]
        }
      ]
    };
  }
};
</script>

Properties

| 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. |

Options Properties

| 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. |

Submenu Properties

| 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. |

Keyboard Accessibility and Focus Management

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