App Navigation Structures and Menu Icons
What are the names of common app navigation patterns and menu icons? Common ones are the Bottom tab bar, Navigation drawer, Infinite scroll, Pagination and Breadcrumb, plus the Hamburger, Kebab, Meatball and Waffle menu icons.
These elements decide how users move between screens. They form the skeleton of an app, so decide them first.
Terms and previews
Tap a preview to pause it; tap again to play.
Bottom tab bar
3 to 5 frequent destinations fixed at the bottom of the screen
Navigation drawer
A full menu that slides in from the side
Infinite scroll
Keeps loading more content when you reach the end
Pagination
Splits content into pages numbered 1, 2, 3
Breadcrumb
A path that shows the current location, such as Home > Category > Product
Hamburger menu
Three horizontal lines. Opens the full menu
Kebab menu
Three vertical dots. More actions for this item
Meatball menu
Three horizontal dots. The horizontal version of the kebab
Waffle / Bento menu
Nine dots or squares. Switches to other apps or services
How to use it
- If you have 5 or fewer frequent destinations, a bottom tab bar beats a hamburger. Hidden menus get tapped less.
- Use the kebab only for actions on one row (edit, delete). Using it as a whole-screen menu confuses people.
- Do not put a footer on an infinite-scroll screen. It keeps moving away and cannot be tapped.
- For lists with an end (search results, order history), pagination or a [Load more] button works better.
Prompts to copy
Basic app structure
Build the basic structure of a mobile app. - A Bottom tab bar with 4 tabs: Home, Search, Saved, Profile. Highlight both the icon and the label of the current tab. - Each list item has a Kebab menu on the right. Tapping it opens a Bottom sheet with Edit and Delete. - The home feed uses Infinite scroll. Search results use a [Load more] button.
Source posts: @uxwoodytips, @uxwoodytips