Multi Level Sidemenu
Ionic 3 component for a two-level side menu with accordion and default modes.
What is Multi Level Sidemenu?
Ionic2-MultiLevelSideMenu is a reusable UI component for Ionic 3 apps that implements a two-level hierarchical side menu. It solves the problem of organizing complex navigation structures in mobile applications by providing expandable/collapsible menu items with suboptions. The component supports both accordion and default interaction modes, allowing developers to tailor the navigation experience.
Ionic 3 developers building mobile applications with complex navigation needs, such as apps with categorized settings, multi-level content, or hierarchical data structures.
Developers choose this component for its deep customization options, including dynamic badges, special action handling, and advanced selection syncing, without needing to build a side menu from scratch. It saves development time while offering production-ready features.
Overview
Ionic 3 demo of a two-level side menu.
Use Cases
Best For
- Building Ionic 3 apps with categorized settings menus
- Implementing hierarchical navigation in mobile applications
- Creating accordion-style side menus for better UX on small screens
- Adding dynamic badges to menu items based on real-time data
- Handling non-navigation menu actions like login/logout
- Syncing menu selection with page navigation in complex flows
Not Ideal For
- Projects using Ionic 4 or later frameworks, as it's built specifically for Ionic 3.
- Applications requiring more than two levels of nested menu navigation, since it only supports two levels.
- Teams seeking a plug-and-play npm package, due to manual file copying and lack of package management.
Pros & Cons
Pros
Supports both accordion-style collapsing and default multi-level expansion, allowing developers to choose based on UX needs, as demonstrated in the README with animated gifs.
Offers a detailed settings interface to adjust option height, arrow icons, selection highlighting, and suboption indentation per platform (iOS, MD, WP), providing fine-grained control.
Menu items can display badges that update dynamically via Observable streams, enabling live data reflection like unread counts without manual refreshes.
Provides decorators like SideMenuDisplayText and events to keep menu selection in sync with page navigation, even for complex scenarios like multiple options linking to the same page.
Cons
Only supports two levels of menu items, requiring workarounds like tabs for deeper hierarchies, as explicitly admitted in the README as a limitation.
Tightly coupled with Ionic 3 and Ionic-Angular 3.9.2, making it obsolete for projects on newer Ionic versions without significant migration effort.
Utilizing decorators for selection syncing necessitates a non-standard injector setup in the app module, adding boilerplate and complexity compared to simpler solutions.
Frequently Asked Questions
Related Projects
Scrollabel TabsIonic 2 Scrollable Tabs is a plugin that extends the standard Ionic 2 tabs component by adding horizontal scrolling functionality. This is particularly useful for mobile applications with many tabs, as it allows users to swipe through tabs that don't fit on the screen, improving navigation and user experience. ## Key Features - **Horizontal Scrolling** — Enables swipe navigation through tabs when they exceed the available screen width. - **Ionic 2 Integration** — Designed as a drop-in component for Ionic 2 applications, maintaining framework compatibility. - **Customizable Options** — Provides configuration options to tailor the scrolling behavior and tab display. - **Directive-Based Implementation** — Uses a directive (`scrollable-tabs`) for easy integration into existing `ion-tabs` elements. ## Philosophy The plugin follows Ionic's component-based architecture, aiming to enhance the default tabs with minimal setup while preserving the native look and feel of Ionic applications.
Circular TabsIonic 2 Circular Tabs is a plugin that provides circular tab navigation components for Ionic 2 mobile applications. It offers an alternative UI pattern to traditional linear tabs, enhancing visual appeal and user interaction in hybrid mobile apps. ## Key Features - **Circular Tab Interface** — Replaces standard linear tabs with a circular layout for a distinctive navigation experience. - **Platform-Specific Styling** — Includes design adaptations for iOS, Material Design (Android), and Windows Phone platforms. - **Easy Integration** — Can be copied into existing Ionic 2 projects and imported via app.module.ts and tab components. - **Visual Customization** — Supports property adjustments to tailor the circular tabs to app-specific needs. ## Philosophy The project focuses on expanding Ionic 2's UI component library with innovative navigation patterns that prioritize both aesthetics and functionality.
Fab Toolbarfab-toolbar is an Ionic v2 component that implements a Material Design floating action button (FAB) that can transform into a toolbar. It provides a compact, interactive UI element for accessing related actions, text fields, search, or other items directly from a FAB. ## Key Features - **Dynamic Transformation** — The floating action button can expand into a toolbar upon press or scroll, and collapse back. - **Customizable Actions** — Supports an array of buttons with configurable icons, titles, colors, and click handlers. - **Flexible Positioning** — Allows placement on the left or right side of the screen. - **Backdrop Control** — Option to keep the toolbar open when clicking the backdrop by setting `enableBackdropDismiss`. - **Handler Integration** — Button handlers can control toolbar closure; returning `false` prevents auto-close. ## Philosophy The component follows Material Design principles to deliver a sleek, intuitive floating action toolbar that enhances user interaction within Ionic mobile applications.
Popover SidemenuAn attempt to create a menu like experience without dealing with the fact that menus in ionic 2 reload angular components.
Found a gem we're missing?
Open-Awesome is built by the community, for the community. Submit a project, suggest an awesome list, or help improve the catalog on GitHub.