App Bar UI design tutorial

Mastering the Appbar: Unlock the anatomy, states, styling, use cases, and usability tips to create a seamless and visually pleasing UX.
September 2021 · 4 mins read

by Roman Kamushken

The App Bar serves as a crucial navigation element that remains consistent throughout an application. It allows users to easily switch between screens or access important features, ensuring a seamless and intuitive user experience.
App Bar (also known as the Application Bar or Navbar) – is a prominent and persistent UI component located at the top of an application or screen.

Designed to provide consistent navigation and access to essential functions, the App Bar serves as a central hub that allows users to switch between screens, access important features, and maintain contextual awareness throughout their app journey.

Appbar typically includes various interactive elements such as menus, buttons, icons, search bars, and notifications. These elements enable users to perform common actions and navigate to different sections of the application.

Now let's dive deeper into the App Bar UI design details ↓
Application Bar UI design tutorial

Table of contents

App Bar Anatomy
  • Left controls
  • Center section
  • Right controls
Styles & Themes
  • Flat
  • Raised
  • Shaded
  • Inverted
  • Transparent
UX & Usability
  • Selected state
  • Bottom positioning
  • Shadow on scroll
  • Blurred background
  • Hide items on resize


Let's review separately the left, center, and right elements of App Bar. You may hide unused sections, and implement partial App Bars, for example without a title, or no right controls at all.
Application Bar UI design anatomy

Left controls

Sustain any kind of actions at the App Bar's left side you want to focus the user's attention on by keeping them in sight.

System navigation controls are a common choice for most cases and the users are familiar with this pattern.

They may lead to:
  • Back
  • Menu
  • Close
  • Custom (e.g. settings, profile, etc)
Application Bar UI design anatomy
Either, you may use other types of controls, you want to emphasise as attainable on a particular screen.
Application Bar UI design anatomy
On the desktop screen you are allowed to compound combinations of elements in order to use more App Bar's space functionally.

Combine logo, search inputs, dropdowns, icons (as buttons) and so on.
Application Bar UI design desktop

Center section

App Bar's middle space is committed to title an application screen mostly. If necessary, you can replace it with additional controls specific to the current app section.

Center may contain:

  • Title (with possible subtitle)
  • Userpic (with possible name)
  • Logo
  • Segmented controls
  • Search input
  • Navigation items (Tabs, Button Group, Breadcrumbs, etc)
You may use a single title for the app section naming or extend to more informational purposes by enabling a sub-title.
Application Bar UI design anatomy
Adding a Chevron/Caret item is clearly distinguish there is something to reveal after a title was tapped.
Application Bar UI design menu
May be used for providing particular user details especially when interacting with Profiles, Messengers, Social apps.
Application Bar UI design avatar
Put a logo into a central part of App Bar to prioritize the brand identity. Fits especially for Home/Start screens where a user's journey usually begins.
Application Bar UI design logo
Segmented control
On mobiles place a Segmented Control into App Bar to toggle screen states or content properties within just a single action.
Application Bar UI design tabs
Search input
Generally used for desktop App Bars, center-based input may be utilized in order to have a search on hand.

On mobiles it usually migrates as the App Bar's second level when resized.
Application Bar UI design search
Navigation items
Tabs, Buttons Group, Breadcrumbs are common navigation components to locate at the App Bar's center.

Either as for the previous case, they migrate on a second level when shrunk to the mobile viewport.
Application Bar UI design navigation

Right controls

Maintain any kind of components on the App Bar's right side. Place a single control or a combination of frequently used,

which may be:

  • Avatar
  • Icons (as Buttons)
  • Buttons (Call to action)
  • Search Input (mostly desktop)
  • Dropdown (e.g. for an account swap, language)
To call out a function related to user properties, place an tappable Avatar at the top right area of App Bar.

A tap may lead to profile settings or reveal popover menu.
Application Bar UI design anatomy
Using icons as Buttons aimed to represent popular in-app actions ergonomically.
Place here the most used controls you want to have permanently on a users' sight.
Application Bar UI design icons
You may hide behind a popping menu all the items used less often. Especially fits for apps with 5 or more independent sections.

Works well when you want your user to have 5+ in-app links on hand.
Application Bar UI design menu
Place Buttons into the right-sided region to call to action. Use styles and color wisely when having several buttons to distinguish primary and secondary actions associated with the business logic of the app.

You may have a variety of shapes: Square, Circle, Pill buttons. And a variety of styles: Filled, Raised, Outlined (Ghost), Flat and so on depending on a necessity to grab user's attention.
Application Bar UI design buttons
Search input
Have a quickly accessible search input by placing it at the right as a single component, or among other controls. Mostly fits desktop cases.
Application Bar UI design input
To toggle users, accounts, languages, etc. use Dropdown nested into App Bar's right section. Applied often for tablet/desktop resolutions.
Application Bar UI design dropdown

Styles & Themes

You can themify App Bars within a variety of styling methods. To match the exterior of your overall in-app UI, you may use the following themes:

  • Flat
  • Raised
  • Shaded
  • Inverted
  • Transparent
Application Bar UI design CSS styles
App Bar's flat theme proposes a minimalistic approach with no separation, where the header and background compounding a visually holistic surface.
Application Bar UI design flat
Elevated style proposes to implement a smooth shadow to easily distinguish App Bar hovering over a background.
Application Bar UI design raised
App Bar filled with solid color with opacity decreased to 8–12%. Thus you may suit an app with the smooth palette of your brand colors.
Application Bar UI design shaded
Dark version of App Bar you may use to distinguish the header by highlighting with color contrast. It's inverted as it's colored opposite to the overall application theme.
Application Bar UI design inverted
Mostly used for mobile App Bars, this style reveals more space for full-size images in some specific sections (e.g. item details, profiles, deals).
Application Bar UI design template

UX & Usability

Let's review some kinds of behaviour extra special for App Bars. There are some cases when the app header can have:

  • Selected state
  • Bottom positioning
  • Shadow on scroll
  • Blurred background
  • Hide items on resize
Selected state
App Bar can dynamically swap themes to provide instant user feedback, e.g. when selecting items, events happening, warning states, etc.
Application Bar UI design usability
Bottom positioning
On mobile viewports, you may attach App Bar to the bottom. Thus all the primary actions become available within fewer fingers stretching.
Application Bar UI design bottom
Conceptually, you may implement the same positioning either for desktop web apps. For example, there is a successfully utilized bottom bar on macOS and Windows and this pattern is familiar to users.
Application Bar UI design desktop
Shadow on scroll
App Bar gets elevated when the screen is scrolled. Mostly fits for flat headers.

Emerged shadow emulates the hovering effect which makes it seem in-app environment more natural and logical.
Application Bar UI design shadow
Blurred background
This tiny visual effect also makes the overall user experience slicker.

Use a CSS property backdrop-filter: blur(16px); to achieve App Bar's surface transparently blurred.
Application Bar UI design blur
Hide items on resize
App Bar's navigation items are sometimes required to collapse and cover behind "More" action (dots), especially when resized from desktop to mobile.
Application Bar UI design viewports
This is all you need to know to design better App Bars.

If you looking for those Application Bar cards - Duplicate for Figma

Hope this exploration will help you to improve your in-app UX. The next chapter is for Badges, probably. Stay tuned!

Related links

More useful tutorials
Avatar UI design exploration — The states of userpic component
Avatar (aka Userpic) — is a component used to represent a user's profile picture. The default content for Avatar is empty state, initials or user's picture.
Accordion UI design exploration — Styles, states, usage, templates
Accordion (aka Expansion panel) — is a vertically stacked list of options that can expand/collapse to reveal or hide more associated content.
Appbar UI design exploration — Anatomy, specs, states, templates
Application Bar (aka Appbar) — displays prior in-app controls related to the current app section.
Badge UI design exploration — Tips & tricks, usability, and use cases review
Badge (aka Tag) — small overlapped UI item which indicates a status, notification, or event that appears in relativity with the underlying object.
Breadcrumbs UI design exploration — Anatomy, UX tips, use cases overview
Breadcrumbs — is a composition of navigational links to reveal the current position in case of multi-level nested structure for a website, dashboard or application.
Buttons UI design – Comprehensive tutorial on UX, styles and usability
Designing buttons that work well requires taking into consideration the style, feedback, and accessibility. The design goal should be to make the them as intuitive as possible so the user can interact with Buttons seamlessly.
Dropdown UI design – A guide for Anatomy, UX tips, and Use cases
Unlock the power of Dropdowns. Discover the core elements, custom theming options, usability tips, and accessibility best practices. Design Dropdowns that captivate users and align with your brand's persona. Ready to embark on this design adventure? Let's dive in!
Chips UI Design – An essential tutorial for optimal UX & usability
Learn the step-by-step process of Chip design. Take a deep dive into component design and learn step-by-step with this comprehensive tutorial, including: Chips anatomy, States, Use cases and Usability tips.
Input UI Design – Optimize data forms UX with expertly crafted text fields
Follow this in-depth guide to create Input components that blend seamlessly with your app UI design, while optimizing forms filling experience and overall usability.
Checkbox UI design – Unlocking anatomy, proven UX tips, and inspiring use cases
This tutorial is dedicated to providing practical answers to your Checkbox design dilemmas: from addressing the complexity of Checkbox styling to solving the challenges of ensuring an inclusive UX.
Subscribe to Setproduct
Once per week we send a newsletter with new releases, freebies and blog publications

More to ☕ read

Show more ⬇︎