side-menu

by gero1992

A Web UI navigation implemented with LitElement

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

Supported features:

Compact and normal modes
Adding icons to the elements
Multi level navigation

Installation

Install 'side-menu' web component:

npm i @maksu/side-menu --save

After that you can import in an html file:

<head>
    <script type="module">
        import '@maksu/side-menu/side-menu.js'
        import '@maksu/side-menu/side-menu-item.js'
    </script>
</head>

or in another LitElement:

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`
        <side-menu>
            <side-menu-item label='Home' href='https://www.example.com'>
            </side-menu-item>
        </side-menu>
    `;
  }
}

customElements.define('example-element', ExampleElement);

Examples

Simple

<side-menu>
    <side-menu-item label="Home" href="/home"></side-menu-item>
    <side-menu-item label="Accounts" href="/accounts"></side-menu-item>
    <side-menu-item label="Assignments" href="/assignments" target="_blank"></side-menu-item>
</side-menu>

Icon

<side-menu>
   <side-menu-item label="Home" href="/home">
      <iron-icon icon="home" slot="icon"></iron-icon>
   </side-menu-item>
   <side-menu-item label="Accounts" href="/accounts">
      <iron-icon icon="account-circle" slot="icon"></iron-icon>
   </side-menu-item>
   <side-menu-item label="Assignments" href="/assignments" target="_blank">
      <iron-icon icon="assignment-turned-in" slot="icon"></iron-icon>
   </side-menu-item>
</side-menu>

Multi-level

<side-menu>
   <side-menu-item label="Home">
      <iron-icon icon="home" slot="icon"></iron-icon>
   </side-menu-item>
   <side-menu-item label="Favorites" expanded>
      <iron-icon icon="favorite" slot="icon"></iron-icon>
      <side-menu-item label="Learn">
         <side-menu-item
            label="How to"
            href="/howto"
            target="_blank">        
         </side-menu-item>
      </side-menu-item>
      <side-menu-item
         label="Web Components"
         href="/webcomponents"
         target="_blank">
      </side-menu-item>
      <side-menu-item label="Guides" href="guides"></side-menu-item>
   </side-menu-item>
</side-menu>

Set item selected:

You can set an item to be selected by adding a selected attribute to it

<side-menu>
    <side-menu-item label="Home" selected></side-menu-item>
</side-menu>

Expand nested items:

When you have a multi level menu, you can expand the child items by adding expanded attribute to the parent:

<side-menu>
   <side-menu-item label="Parent" expanded>
      <side-menu-item label="Child"></side-menu-item>
   </side-menu-item>
</side-menu>

Running the demo locally

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

Install

Link to this version

ImportedReleased 14 December 2020MIT License

Framework Support

Browser Independent

Install with

npm install @maksu/side-menu"@1.0.9"

Run the above npm command in your project folder. If you have any issues installing, please contact the author.

Release notes - 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