Native Navigation Overview
Learn how to add native navigation menus (top bar, sidebar, bottom tab bar) to your app for platform-consistent UI that loads before your web content.
Native navigation menus let you build high-performance mobile apps with intuitive, platform-consistent UI that matches the look and feel of top iOS and Android applications. Median supports four types of native navigation components: Top Navigation Bar, Sidebar Navigation, Bottom Tab Bar, and on iOS a Contextual Navigation Toolbar.
These menus improve user experience by displaying instantly, before your web content loads, and persisting across internal or third-party pages in your app. That makes them especially useful for enterprise and multi-source web apps, with seamless transitions between embedded services.
Related Documentation
Top Navigation Bar
Configure the header bar with dynamic titles, back button, action buttons (refresh, share, custom), and native search. Control how in-app pages are presented.
Sidebar Navigation
Add a slide-out sidebar with collapsible menu items, visual editor, and icons. Ideal for apps with many pages or complex navigation hierarchies.
Bottom Tab Bar
Define a bottom tab bar with icons and labels, active/inactive states, and URL-based highlighting. Best for 2–5 main sections (e.g. Home, Search, Profile).
Custom Icons
Use custom SVG icons or supported libraries (Font Awesome, Material Design) for menu items. Configure icons per item in top bars, sidebars, and bottom tab bars.
iOS Contextual Navigation Toolbar
Configure the contextual navigation toolbar on iOS for platform-consistent navigation and actions in your app.
Benefits of Native Navigation
Native navigation menus offer advantages over web-only navigation:
- Flexible UI control - Configure at build time or at runtime via the Median JavaScript Bridge.
- Cross-service navigation - Use deep links across apps and services via native tabs or sidebars.
- Persistent navigation - Shown across internal and external (third-party) web pages.
- Immediate rendering - Displayed before any web content loads.
You can use native navigation to integrate and switch between multiple web-based applications in one app—for example, an intranet site, corporate contacts, a scheduling system, and a third-party HR portal—all with one consistent navigation frame.
Icon Support
Median supports standard and custom icon libraries so you can control your app’s design. You can set different icons for active and inactive tab bar items to give clear visual feedback. Icons can be configured per menu item in top bars, sidebars, and bottom tab bars, at build time or at runtime through the JavaScript Bridge. See Custom Icons for details.
Platform Guidelines
Median follows platform-specific UI/UX best practices for compatibility with current app store guidelines. For reference:
- iOS: Apple Human Interface Guidelines - navigation bars, tab bars, sidebars.
- Android: Material Design Guidelines - app bars, bottom navigation, navigation drawer.
Summary
Native navigation menus help you create an intuitive native app experience comparable to widely used iOS and Android apps. Median supports a Top Navigation Bar, Sidebar Navigation, Bottom Tab Bar, and on iOS a Contextual Navigation Toolbar. Configure them at build time or at runtime via the JavaScript Bridge to match your app’s structure and branding.
Updated about 1 month ago