[](https://www.npmjs.com/package/@maksu/side-menu) [](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  ## 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.