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.
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
Framework Support
Browser Independent
Install with
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