iwantcoding.com
🔥 Daily 👥 Rooms 🏆 Top Log in Sign up

Side Menu

By · Reviewed & last updated · Part of Ionic Tutorial

A side menu is the classic hamburger pattern. ion-menu + ion-split-pane gives you a navigation drawer on phones and a persistent sidebar on tablets / desktops — for free.

A responsive side menu

EXAMPLE
<ion-app>
    <ion-split-pane content-id="main" when="md">
        <!-- Hidden on phones (< md), persistent from md up -->
        <ion-menu content-id="main" menu-id="main-menu">
            <ion-header>
                <ion-toolbar>
                    <ion-title>Menu</ion-title>
                </ion-toolbar>
            </ion-header>
            <ion-content>
                <ion-list>
                    <ion-menu-toggle auto-hide="false">
                        <ion-item button routerLink="/feed" routerDirection="root">
                            <ion-icon slot="start" name="home"></ion-icon>
                            <ion-label>Feed</ion-label>
                        </ion-item>
                        <ion-item button routerLink="/profile" routerDirection="root">
                            <ion-icon slot="start" name="person"></ion-icon>
                            <ion-label>Profile</ion-label>
                        </ion-item>
                        <ion-item button routerLink="/settings" routerDirection="root">
                            <ion-icon slot="start" name="settings"></ion-icon>
                            <ion-label>Settings</ion-label>
                        </ion-item>
                    </ion-menu-toggle>
                </ion-list>
            </ion-content>
        </ion-menu>

        <!-- Main content -->
        <ion-router-outlet id="main"></ion-router-outlet>
    </ion-split-pane>
</ion-app>

<!-- In any page, add a menu button to open it on small screens -->
<ion-header>
    <ion-toolbar>
        <ion-buttons slot="start">
            <ion-menu-button menu="main-menu"></ion-menu-button>
        </ion-buttons>
        <ion-title>Feed</ion-title>
    </ion-toolbar>
</ion-header>

Why it matters

ion-split-pane handles the responsive switch automatically — drawer on phones, sidebar on tablets / desktops. No media queries, no two layouts to maintain.

Tip: Tweak the snippet with Try it Yourself », then sit the quiz at the bottom of the page.

Example

Example
<ion-app>
    <ion-split-pane content-id="main">
        <ion-menu content-id="main">
            <ion-content>
                <ion-item routerLink="/home">Home</ion-item>
                <ion-item routerLink="/about">About</ion-item>
            </ion-content>
        </ion-menu>
        <ion-router-outlet id="main"></ion-router-outlet>
    </ion-split-pane>
</ion-app>
Try it Yourself »

Discussion

Loading…