https://github.com/gero1992/side-menu
A Web UI navigation implemented with LitElement
https://github.com/gero1992/side-menu
drawer-navigation javascript lit-element litelement navigation
Last synced: 3 months ago
JSON representation
A Web UI navigation implemented with LitElement
- Host: GitHub
- URL: https://github.com/gero1992/side-menu
- Owner: gero1992
- License: mit
- Created: 2020-11-28T23:56:11.000Z (over 5 years ago)
- Default Branch: master
- Last Pushed: 2024-01-19T13:47:14.000Z (over 2 years ago)
- Last Synced: 2025-10-04T01:09:24.554Z (8 months ago)
- Topics: drawer-navigation, javascript, lit-element, litelement, navigation
- Language: JavaScript
- Homepage:
- Size: 2.12 MB
- Stars: 6
- Watchers: 1
- Forks: 3
- Open Issues: 0
-
Metadata Files:
- Readme: README.md
- License: LICENSE
Awesome Lists containing this project
README
[](https://www.npmjs.com/package/@maksu/side-menu)
[](https://www.webcomponents.org/element/@maksu/side-menu)
[](https://vaadin.com/directory/component/gero1992side-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
import '@maksu/side-menu/side-menu.js'
import '@maksu/side-menu/side-menu-item.js'
```
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.