side-menu
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.
Links
Compatibility
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