Top Bar
The Top Bar is a top-anchored component that provides context for the screen and facilitates easy navigation through different flows. Users depend on this Top Bar to navigate and orient themselves within your UI, and this pattern highlights the qualities that make a Top Bar consistent, familiar, and user-friendly.
- Overview
- Specs
- Guidelines
Pattern
The Top Bar is a vital component of a product’s user interface, providing a stable and accessible area for both product-specific and system-wide features. Like the Menu Bar in macOS or the Start Bar in Windows, it offers a reliable place for local navigation and quick access to universal features like system settings, notifications, and cross-product navigation.
This pattern details the basics of using Compose components for both internal and cross-product navigation and offers strategies for maintaining consistency across various products.

- 1: Main Menu
- 2: Header Name
- 3: Search
- 4: Selector
- 5: Utilities

Used for:
Consistent navigation
You want to provide a consistent navigation experience across all pages of your app or website.
Access to key features
You need a space for essential features like search, notifications, user profile, or settings.
Branding
You want to prominently display your brand’s logo or name.
Global utilities
You need a fixed place for global utilities that users can access from any page, such as help or account management.
Don’t use for:
Context-specific actions
The primary actions are highly context-specific and vary significantly from page to page, making a Top Bar less useful.
Simple single-page apps
Your app or website is a simple single-page application with minimal navigation needs.
Single-purpose tools
Tools designed for a single, focused task (e.g. calculators, timers) typically don’t benefit from a Top Bar since navigation is minimal or non-existent.
Demo
Access the Figma file and inspect the element using Dev Mode.