Generic selectors

Exact matches only

Search in title

Search in content

Post Type Selectors

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.

topbar_dummy
  • 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.

Top Bar Anatomy
  • 1: Main Menu
  • 2: Header Name
  • 3: Search
  • 4: Selector
  • 5: Utilities
Top Bar Applied to a Product

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.

topbar_usage_dont2
Top Bar with Context Specific Actions

Demo

Access the Figma file and inspect the element using Dev Mode.

Top Bar Pattern in Figma

Search

A Search component enhances user experience by enabling quick, intuitive, and refined information retrieval …