App bar

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.

Previewlink

app bar overview

Different versions to display your navigation, brand & titlelink

Depending of your product needs and the level of navigation, you have the choice between different variations of the appbar.

app bar navigation

Structurelink

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.

structure-right

From the right part, you can perform a global search, get notifications. You can also switch between other applications and access to your profile.

structure-left

Mobile versionlink

Mobile version comes with smaller paddings and font style.

app bar on mobile

Extended versionlink

You can adjust the height and width of the app bar to match your needs.

extended app bar Download App bar Adobe XD