Introducing the ultimate sidemenu plugin for Ionic!

The Lumen Sidemenu plugin contains several styles and designs for sidemenus in Ionic. It also contains dynamically changing frosted glass background based on profile pic, giving apps a more native look when run under iOS and of course also beautiful on Android as well.

Looking for a sidemenu for Ionic 2? Try our new Lumen Sidemenu for Ionic 2.

The plugin comes with a couple of features:

• Frosted glass background based on dynamic avatar picture or custom image
• Gradient or single color background
• Large or small sidemenu profile picture element
• Several presets for selected menu items

By utilizing the features, you will be capable of designing a countless variety of sidemenu styles.

How to use on an existing project

Load dependencies

Load the sidemenu.js into your index.html file.

```html

```

Load the sidemenu module into your app.js file.

javascript angular.module('starter', ['ionic', 'sidemenu'])

Load the sidemenu stylesheet into your index.html.

javascript <link href="css/sidemenu.css" rel="stylesheet">

*Configure your style *

Apply the sidemenu directives to ion-content of your sidemenu template, and choose one of the sidemenu styles you wish to apply:

sidemenu-glass-avatar: frosted glass background based on the profile picture

javascript <ion-content sidemenu="sidemenu-glass-avatar">

sidemenu-glass: frosted glass background based on static picture

javascript <ion-content sidemenu="sidemenu-glass">

sidemenu-gradient: sidemenu background based on a gradient effect.

javascript <ion-content sidemenu="sidemenu-gradient">

sidemenu-fill: sidemenu background based on single color

javascript <ion-content sidemenu="sidemenu-fill “>

sidemenu-glass: sidemenu background based on static background image

html <ion-content sidemenu="sidemenu-glass “>

Choose profile avatar style

The ion-content div contains a child div which uses the profile directive. Choose your profile avatar style.

profile-small-transparant: a small profile avatar picture

javascript <div profile=“profile-small-transparant“>

profile-large-transparant: a profile avatar picture

````javascript