The top app bar provides content and actions related to the current screen. It’s used for branding, screen titles, navigation, and actions. It can transform into a contextual action bar. It’s a key component part of the global navigation pattern.
Different versions to display your navigation, brand & title
Depending of your product needs and the level of navigation, you have the choice between different variations of the appbar.
The app bar contains essential items related to your product. It displays a menu, the logo, the product name, and an optional breadcrumb showing the different levels of navigation. By clicking on the logo, user is redirected to the homepage. The menu toggle a sidenav.
From the right part, you can perform a global search, get notifications. You can also switch between other applications and access to your profile.
Mobile version comes with smaller paddings and font style.
You can adjust the height and width of the app bar to match your needs.