@lemonadejs/topmenu NPM

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>`
}

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:

Comprehensive Keyboard Accessibility:
- Enables seamless navigation through menu options using standard keyboard controls.
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.