Toolbar

‍Best Practices

Prioritize key actions. Only place buttons that people need most often or that map to essential tasks. Overcrowding the toolbar can make it harder to scan or tap.

Keep commands context-specific. A toolbar is most effective when its actions relate directly to the content or task on the screen.

Use clear, familiar icons or labels. Make each item’s purpose immediately understandable. If you include text labels for brevity (e.g., “Edit,” “Share”), separate them with fixed spaces if there are multiple buttons.

Avoid mixing with tab bars. A toolbar handles actions for the current view, while a tab bar manages navigation. Combining both at the bottom can lead to confusion.

Style

The iOS toolbar typically appears as a translucent bar anchored at the bottom of the screen:

Visual consistency. Align toolbar colors with your app’s theme, ensuring icons or text remain legible. If the view scrolls behind the toolbar, the system may apply a background material for clarity.

Spacing and grouping. In iOS, toolbars don’t support grouping natively, so ensure each button stands out with adequate spacing.

Icons vs. text. Using system-provided SF Symbols is common. When you use text labels (especially if you have three or fewer buttons), keep them short to avoid crowding.

Content

The toolbar content typically consists of a few core actions—like adding, sharing, or filtering:

Context-sensitive items. Each button should reflect an immediate action relevant to the user’s current screen.

Toggle states. If an item represents a toggle (like activating a feature), provide visual cues to indicate on/off states, keeping users aware of the toolbar’s function at a glance.

No nested menus. Because toolbar space is limited and actions are meant to be immediately accessible, avoid placing deeper submenus here.

Role

Toolbars are a light-touch navigation element focused on actions rather than content hierarchy:

Frequent commands. They serve as an at-a-glance control center for tasks like composing a message, filtering a list, or adjusting settings specific to the current view.

Complementary to main content. The toolbar remains visible so people can quickly apply actions without leaving or obscuring the primary content.

Immediate feedback. Tapping a toolbar button should produce a direct outcome—like opening a new screen or updating the current view—reinforcing the idea that these are high-priority actions.