The Sidemenu

The side menu is a great way to display content without losing a lot of screen real estate. Learn how to add the side menu to your apps.

The side menu is a great way of adding a lot of functionality without taking up a lot of real estate. It’s an easy element to add in Ionic and can be designed to slide out from the left or right.

We’ll start with a basic Ionic app with a controller. I’ve already added a header with a button in for showing the side menu.

To start, let’s add the click action for the side menu. We’ll call the function toggleLeft.

To implement this on the controller, we need to bring in a service that will communicate with the side menus. This is the $ionicSideMenuDelegate. Inject it as a dependency and create the toggleLeft function. It’s purpose is to call toggleLeft on the delegate.

At this point, we’re ready to write markup. Create the ion-side-menus element, with an ion-side-menu. Here’s where we specify the side.

We’ll add some menu items and refresh. Immediately we can see something is wrong: our side menu is sitting on top of our main content!

This is because the side menu system has its own content element. If we create the ion-side-menu-content directive and place the header inside of it, we now have a working side menu.

In a formula, we will go over how to integrate the side menu with the rest of an Ionic application stack, including navigation, routing, and tabs.

Sass Customization

Using Sass, you can override Ionic's default styles and customize an app to fit your needs.

Installing Cordova and the Android SDK on Windows 7 and 8

A walkthrough on installing Cordova, Android, and Ionic on Windows 7 and 8

Making Tabbed Interfaces in Ionic

Learn how to easily make tabbed interfaces, one of the most common UI patterns for mobile, in Ionic.

Ionic Lists - Part 1

A core element to any app is the display of lists. From todos to social feeds, lists are the building block for much more complex UIs. Learn about lists in Ionic in this video.

Introduction to Ionic for iOS

Learn how to start using Ionic for iOS with this video. An introduction, prerequisites, and getting a basic application running on a simulator will all be shown.

Get building with Ionic today!