Contact us
Get started

Directory

← Back

side-menu

A Web UI navigation implemented with LitElement

Author

Contributors

Rating

Links

npm version Published on webcomponents.org

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:
  1. Compact and normal modes
  2. Adding icons to the elements
  3. Multi level navigation

Example of side-menu

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

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

Compatibility

(Loading compatibility data...)

Last updated: 2000-01-01

Was this helpful? Need more help?
Leave a comment or a question below. You can also join the chat on Discord or ask questions on StackOverflow.

Version

Dependencies

  • @polymer/iron-icon#3.0.1
  • @polymer/iron-icons#3.0.1
  • @polymer/paper-tooltip#^3.0.1
  • lit-element#2.4.0
Released
2021-03-28
Maturity
IMPORTED
License
MIT License

Compatibility

Framework
Browser
Browser Independent
Online