App Bars
App bars provide content and actions related to the current screen. They’re useful for branding, navigation, search, actions, and more.
Types
There are two types of app bars:
- Top app bars are fixed to the top of the screen.
- Bottom app bars are fixed to the bottom of the screen. They’re best used on mobile, and work well with tabs.
Anatomy
Top App Bar
Top app bars can be used for branding, navigation, search, actions and more.
- Navigation icon: (Optional) Leads to the previous step in an app’s information hierarchy, or to the app’s up-level navigation.
- Title: The app bar title. On desktop, use a short title that describes the current view, and a longer title that describes the parent view on smaller screens.
- Action items: (Optional) Prominent action(s) for the current screen, such as search, compose, or share.
- Overflow menu: (Optional) Additional options that don’t fit within the app bar, such as settings, help, or sign out.
Bottom App Bar
Bottom app bars display navigation and key actions at the bottom of mobile screens. They’re often used with a floating action button (FAB).
- Navigation icon: Leads to an app’s up-level navigation, or to the previous step in the information hierarchy.
- Action items: (Optional) Prominent action(s) for the current screen, such as search or favorite.
- Floating action button (FAB): (Optional) The primary action button for the screen.
Behavior
Scrolling
App bars can respond to scrolling behavior in different ways.
- Fixed app bars remain at the top or bottom of the screen at all times.
- Prominent app bars disappear as the user scrolls down, and reappear as the user scrolls up. They’re a good way to provide persistent actions, while minimizing screen real estate.
- Standard app bars disappear as the user scrolls down, only appearing when the view’s content has scrolled to the top. They’re typically used with tabs.
Usage
Placement
Top app bars are positioned at the top of the screen. Bottom app bars are positioned at the bottom. On mobile, avoid using both top and bottom app bars.
Content
App bars should primarily contain actions relating to the current screen.
- Top app bars should display the name of the view or app on smaller screens, and the name of the section on larger screens.
- Use action icons for common actions, such as search or share.
- Avoid using more than two rows in a top app bar, or more than one row in a bottom app bar.
(Add examples of how app bars are used in your design system, including code snippets if applicable)