HPVM-MENU

Hyper Parametrizable Vanilla Menu

Design to address long list of items (180) and almost no dependecies. Hpvm-Menu is a First Class solution for webapps off-canvas menus with sliding submenus support. It is very small (16Kb) and customizable through a wide range of options.

Online Demo

Need extra help? Have a look at the examples folder. Fill an issue if necessary.

Features

• 100% VanillaJS
• Flexbox based
• Theme support
• Off-Canvas sidebar
• Custom sort support
• Forced order support
• Custom item renderer
• Auto managed favorites
• Native support for external icons
• Support for search in extra tags
• Support for fuzzy search ( dep on fuse.js )
• Support for nested lists using dropdrown and divide
• No external dependencies ( except Fontawesome )
• Modules can be used independently ( Iconbar, Sidebar, Overlay, Search )

Quick start

Install

This package can be installed with:

• npm: npm install --save hpvm-menu

Or download the latest release.

CDN

• jsdeliver

Including Hpvm Menu

Script and Css tag

<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@fortawesome/fontawesome-free@6.1.2/css/all.min.css">
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/hpvm-menu@1.0.0/dist/css/all.css">

<script src="https://cdn.jsdelivr.net/npm/hpvm-menu@1.0.0/dist/js/all.min.js"></script>

Usage

Be sure to call the Hpvm once your menu element is available in the DOM.

HTML menu structure with all components

<div class="icon-bar container">
    <div class="icon-bar-top">
        <!-- <a class="tooltip" href="#"><i class="fa fa-bell fa-beat" style="--fa-beat-scale: 2.5;"></i><span class="tooltiptext">Alertas</span></a>  -->
    </div>
    <div class="icon-bar-bottom">
        <!-- <a class="tooltip icon-bar-item danger" href="#"><i class="fa fa-sign-out"></i><span class="tooltiptext">Sair</span></a> -->
    </div>
</div>

<div id="overlay">
    <i class="fa-solid fa-sync fa-spin fa-5x is-loaded" style="--fa-animation-duration: 5s;"></i>
</div>

<div class='wrapper' />

<div class='sidebar'>
    <div class='sidebar-widelogo'>
        <img src="https://via.placeholder.com/220x55/e0e0e0/000000/?text=LOGO+HERE" alt="Logo" />
    </div>
    <div id='sidebarTitle' class='sidebar-title'>
        Title Here
    </div>
    <div class='search'>
        <input class='searchInput' placeholder='Search for...' type="text"
            onkeyup="HpvMenu.sidebar.filterFn(this, 'menuItems')" />
        <button class='btn btn-outline-success' type='button'><i class='fas fa-search'></i></button>
    </div>
    <ul id='menuItems' class='nav'>
    </ul>
    <div id='sideBarStatusText'>
        <p>No Item Available</p>
    </div>
</div>

<div id='content' class="content">
    Your content goes here
</div>

Vanilla JS

document.addEventListener('DOMContentLoaded', function() {

      // iconbar entry
    HpvMenu.iconbar.registerEntry({
        'parentCls': 'icon-bar-top',
        'innerHtml': '<i class="fa fa-house-chimney-user"></i>',
        'tooltiptext': 'Central do Usuário',
        'onClick': function (event) {
            // mixin connects components
            HpvMenu.mixin.handleIconBarClick(event, 'home');
        }
    });

    // sidebar entry
    HpvMenu.sidebar.registerEntry({
        'id': 'home',
        'title': 'My Home Menu',
        'overlay': true,
        'sortItens': true,
        'search': {
            'enabled': true,
            'mode': 'fuzzy',
            'fields': ['title'],
        },
        'itens': [
            { 'type': 'entry', 'title': 'Item 1' },
            { 'type': 'entry', 'title': 'Item 2' }
        ],
        'onItemClick': function (event, entry, item) {
            console.log('Item is clicked: ', item);
        }
    });

});

Themes

Hpvm currently has 2 themes, the default and Dark. To use Dark theme simply import theme css after hpvm css file:

<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/hpvm-menu@1.0.0/dist/css/themes/dark-grey.css">

Methods

The Hpvm API offers a couple of methods to control components isolated or as a group ( mixin ).

HpvMenu.iconbar.registerEntry(entry)

Register a new iconbar entry.

HpvMenu.iconbar.registerEntry({
    'parentCls': 'icon-bar-bottom',
    'classes': ['danger'],
    'innerHtml': '<i class="fa fa-sign-out"></i>',
    'tooltiptext': 'Exit',
    'onClick': function (event) {
        console.log('exit clicked');
    }
});

HpvMenu.iconbar.setActive(el)

Set programmatically an entry(el) of iconbar as active.

let iconbar = document.getElementsByClassName('icon-bar')[0];
let firstAnchor = iconbar.getElementsByTagName('a')[0];
HpvMenu.iconbar.setActive(firstAnchor);

HpvMenu.iconbar.removeLastActive()

Deactivate any active entry on iconbar.

HpvMenu.iconbar.removeLastActive();

HpvMenu.sidebar.registerEntry(entry)

Register a new sidebar entry.

HpvMenu.sidebar.registerEntry({
    'id': 'dashboard',
    'title': 'Dashboard',
    'overlay': true,
    'sortItens': true,
    'search': true,
    'itens': [],
    'onItemClick': function (event, entry, item) {
        console.log("Item clicked: ", item);
    }
});

HpvMenu.sidebar.show(id)

Show sidebar with rendered content from an registered entry.

HpvMenu.sidebar.show('dashboard');

HpvMenu.sidebar.close()

Close sidebar if openned.

HpvMenu.sidebar.close();

HpvMenu.overlay.show( isIconBarVisible, isSidebarVisible )

Show overlay above user content, parameters help calculate the initial position.

HpvMenu.overlay.show(true, false);

HpvMenu.overlay.hide()

Hide overlay if active.

HpvMenu.overlay.hide();

HpvMenu.overlay.showLoading( isIconBarVisible, isSidebarVisible )

Show overlay above user content with an spinning icon. Parameters help calculate the initial position.

HpvMenu.overlay.showLoading(true, false);

HpvMenu.overlay.hideLoading()

Hide overlay and spinning if active.

HpvMenu.overlay.hide();

HpvMenu.mixin.closeSideBar()

Closes sidebar, hides overlay and remove iconbar active entries.

HpvMenu.mixin.closeSideBar();

HpvMenu.mixin.handleIconBarClick( event, id )

Set iconbar entry as active, opens sidebar and display the overlay. Can be used on while registering iconbar entry with 'onClick' event handler.

HpvMenu.iconbar.registerEntry({
    'parentCls': 'icon-bar-top',
    'innerHtml': '<i class="fa fa-star"></i>',
    'tooltiptext': 'Bookmarks',
    'onClick': function (event) {
        HpvMenu.mixin.handleIconBarClick(event, 'bookmarks');
    }
});

HpvMenu.mixin.setIconBarActive( el )

Wrapper around iconbar.setIconBarActive, closing the sidebar if users click on an open entry.

let iconbar = document.getElementsByClassName('icon-bar')[0];
let firstAnchor = iconbar.getElementsByTagName('a')[0];
HpvMenu.mixin.setIconBarActive( firstAnchor );

TODO

• Responsive layout ( Missing mobile yet )
• Customize scrollbar
• Expansive iconbar as dropdown item
• Stick section label on scroll

Learn more ( In Progress )

• [Tutorial]
• [Options]
• [Add-ons]
• [API]

Licence

The Hpvm-Menu code is licensed under the Apache-2.0 licence.

Similar projects:

• MMenu.js
• HcOffcanvasNav
• OffSide.js
• SidebarJS