side-menu - Vaadin Add-on Directory

Name: side-menu
Availability: InStock
Author: gero1992

A Web UI navigation implemented with LitElement

[![npm version](https://badgen.net/npm/v/@maksu/side-menu)](https://www.npmjs.com/package/@maksu/side-menu) [![Published on webcomponents.org](https://img.shields.io/badge/webcomponents.org-published-blue.svg)](https://www.webcomponents.org/element/@maksu/side-menu) # side-menu Side-menu is a LitElement Web Component providing application navigation functionality withing the UI. It can be used for hierarchical or flat navigation. [Live demo](https://gero1992.github.io/side-menu/) ##### Supported features: 1. Compact and normal modes 1. Adding icons to the elements 1. Multi level navigation ![Example of side-menu](https://github.com/gero1992/side-menu/blob/master/example.png) ## Installation Install 'side-menu' web component: ```sh npm i @maksu/side-menu --save ``` After that you can import in an html file: ```html ``` or in another LitElement: ```js import {LitElement, html} from "lit-element"; import '@maksu/side-menu/side-menu.js'; import '@maksu/side-menu/side-menu-item.js'; class ExampleElement extends LitElement { static get template() { return html`

`; } } customElements.define('example-element', ExampleElement); ``` ## Examples #### Simple ```html

``` #### Icon ```html

``` #### Multi-level ```html

``` #### Set item selected: You can set an item to be selected by adding a **`selected`** attribute to it ```html

``` #### Expand nested items: When you have a multi level menu, you can expand the child items by adding **`expanded`** attribute to the parent: ```html

``` ## Running the demo locally 1. Fork the 'side-menu' repository and clone it. 1. Run 'npm-install' to install the dependencies. 1. Run 'npm start' and the browser will automatically open the component demo.

View on GitHub
View on NPM

side-menu version 1.0.2
### Dependencies * polyserve#^0.27.15 * @polymer/iron-icon#3.0.1 * @polymer/iron-icons#3.0.1 * @webcomponents/webcomponentsjs#2.4.4 * lit-element#2.4.0 * @polymer/paper-tooltip#^3.0.1

side-menu version 1.0.3
### Dependencies * polyserve#^0.27.15 * @polymer/iron-icon#3.0.1 * @polymer/iron-icons#3.0.1 * @webcomponents/webcomponentsjs#2.4.4 * lit-element#2.4.0 * @polymer/paper-tooltip#^3.0.1

side-menu version 1.0.4
### Dependencies * @polymer/iron-icon#3.0.1 * @polymer/iron-icons#3.0.1 * @polymer/paper-tooltip#^3.0.1 * @rollup/plugin-node-resolve#^10.0.0 * @webcomponents/webcomponentsjs#2.4.4 * lit-element#2.4.0 * polyserve#^0.27.15 * rollup-plugin-commonjs#^10.1.0 * rollup-plugin-copy#^3.3.0 * rollup-plugin-filesize#^9.0.2 * rollup-plugin-minify-html-literals#^1.2.5 * rollup-plugin-terser#^7.0.2

side-menu version 1.0.5
### Dependencies * @polymer/iron-icon#3.0.1 * @polymer/iron-icons#3.0.1 * @polymer/paper-tooltip#^3.0.1 * lit-element#2.4.0

side-menu version 1.0.6
### Dependencies * @polymer/iron-icon#3.0.1 * @polymer/iron-icons#3.0.1 * @polymer/paper-tooltip#^3.0.1 * lit-element#2.4.0

side-menu version 1.0.7
### Dependencies * @polymer/iron-icon#3.0.1 * @polymer/iron-icons#3.0.1 * @polymer/paper-tooltip#^3.0.1 * lit-element#2.4.0

side-menu version 1.0.8
### Dependencies * @polymer/iron-icon#3.0.1 * @polymer/iron-icons#3.0.1 * @polymer/paper-tooltip#^3.0.1 * lit-element#2.4.0

side-menu version 1.0.10
### Dependencies * @polymer/iron-icon#3.0.1 * @polymer/iron-icons#3.0.1 * @polymer/paper-tooltip#^3.0.1 * lit-element#2.4.0

side-menu version 1.0.11
### Dependencies * @polymer/iron-icon#3.0.1 * @polymer/iron-icons#3.0.1 * @polymer/paper-tooltip#^3.0.1 * lit-element#2.4.0

side-menu version 1.0.9
### Dependencies * @polymer/iron-icon#3.0.1 * @polymer/iron-icons#3.0.1 * @polymer/paper-tooltip#^3.0.1 * lit-element#2.4.0

side-menu version 1.0.12
### Dependencies * @polymer/iron-icon#3.0.1 * @polymer/iron-icons#3.0.1 * @polymer/paper-tooltip#^3.0.1 * lit-element#2.4.0

side-menu version 1.0.13
### Dependencies * @polymer/iron-icon#3.0.1 * @polymer/iron-icons#3.0.1 * @polymer/paper-tooltip#^3.0.1 * lit-element#2.4.0

side-menu version 1.0.14
### Dependencies * @polymer/iron-icon#3.0.1 * @polymer/iron-icons#3.0.1 * @polymer/paper-tooltip#^3.0.1 * lit-element#2.4.0