Menu

Menus present commands in a space-efficient way, revealing relevant actions when users interact with them.
Menu
Best Practices

When designing menus for mobile apps or games, aim to keep options concise, well-organized, and clear in their purpose. People often already know how to use menus, so maintaining familiar behaviors — like a tap or press that opens a list of commands — can help streamline interaction.

Use familiar cues. Provide clear visual feedback (such as highlighting or dimming) for unavailable commands and indicate when further user input is required by appending an ellipsis (...).

Keep menu items discoverable. Overly long or deeply nested menus can feel unwieldy, so consider subdividing or grouping items thoughtfully.

Avoid clutter. Place important or frequently used options at the top to reduce scanning time.

Style

In many mobile design systems, menus typically use subtle backgrounds, simple separators, or short gaps to distinguish grouped items. Keeping the design minimal focuses attention on the commands rather than ornamental graphics.

Text and icon clarity. If you choose to include icons or symbols, pair them with text labels unless the symbol’s meaning is instantly recognizable.

Readable labels. For short, multi-word items, use title-style capitalization (capitalizing most words except articles and short prepositions).

Separators. A thin line or extra spacing between grouped commands helps people see related items at a glance.

Content

A well-structured menu item label conveys exactly what the command does. Where space is limited, omit articles like “the” or “a” to keep labels concise, and use straightforward verbs when describing actions.

Labels. Write succinct, descriptive commands (e.g., “View,” “Edit,” “Close”). Consider including keyboard shortcuts only where they’re relevant and clearly understood.

States and toggles. If a menu item toggles an interface element or a feature on and off, make sure the label clearly indicates its function (e.g., “Show Sidebar” vs. “Hide Sidebar”).

Ellipses. Append ... to indicate a command that leads to a follow-up view or requires additional user input.

Organization

Grouping related commands can reduce visual scanning time and help people build a mental map of your menu’s layout.

Prioritization. Place the most common or important commands near the top.

Logical grouping. Group items that belong to the same task or context (e.g., editing commands, camera views) under one section separated by a horizontal rule or a small gap.

Submenus. If an item contains multiple related choices — like difficulty levels or filter sets — a submenu can keep your primary menu shorter and more approachable.

Handling large sets. Some menus naturally grow (like history or bookmarks). In these cases, a scrollable list is acceptable and expected.

Role

Menus serve multiple roles across different contexts, helping users stay focused on their current view while still accessing secondary or advanced commands.

Contextual actions. Pop-up menus and context menus can expose frequently used actions in place, reducing the need for dedicated buttons.

Navigation shortcuts. A menu can offer quick, direct access to major app sections without overwhelming the interface with persistent tabs or buttons.

Mode switching. In games or feature-rich apps, a menu might let players switch difficulty levels, toggle settings, or select items without opening numerous separate screens.

By combining succinct labeling, clear organization, and a familiar interactive model, menus can streamline user journeys and help people accomplish tasks with minimal friction in mobile experiences.

Check another components

View all

Ready to take your app UI to the next level?

Appetite UI is everything you’ve been looking for in a design system – powerful, flexible, and built to streamline your creative process. Start building beautiful apps today!
Unlock the UI kit