Navbar and Tabbar Placement

Choosing Navbar and Tabbar Placement per Platform

Both platforms put primary navigation at the bottom. Apple's guidelines say an iPhone tab bar "floats above content at the bottom of the screen", stays visible across sections, and is for navigation, not actions, which belong in a toolbar. Material 3 15,533 's navigation bar sits at the bottom for "three to five destinations of equal importance" on compact screens.

Where each bar goes on iOS and Material, and the Framework7 572,986 markup for it
Need iOS Material Framework7
Main sections Floating tab bar Navigation bar tabbar toolbar-bottom
Screen title Collapsing large title Large top app bar navbar-large
Screen actions Bottom toolbar Top-bar icons toolbar-bottom-ios
Search Under the title In the top bar subnavbar
Tablet width Sidebar Navigation rail Split View (Routable Tabs and Split View)

Where conventions differ, combine theme classes: toolbar-bottom-ios toolbar-top-md puts one toolbar at the bottom in iOS and at the top in Material. Keep the tab bar visible (no-toolbar only on pushed detail pages), use at most five tabs, and hide the navbar on scroll only on reading screens.