The App Bar is designed to help anchor the user and can provide key interaction points. It is a prime location for brand and product identity. As a consistent component throughout the application, the App Bar is where company logos and product names are typically displayed. In addition to company logos, the App Bar also inherits primary theme colors to help visually anchor users on any page within the application.



App Bars are used on all applications at the highest level of hierarchy. The App Bar can serve as the top level of navigation in an application through the use of a “menu” button and can become a “contextual” App Bar to better serve user needs based on required functionality for a given application context.


This component is responsible for the header layout and positioning. AppBarLink can be placed in its slots to achieve the desired layout.


contentID of the main content of the page. Needed for accessibilityStringtrue-
labelsobject containing labels used by this component. See Labels exampleObjecttrue-
fullWidthwhen true the header content will take up the full widthBooleanfalse-
scrollHidewhen true the header will hide when scrolling down and reappear if user scrolls upBooleanfalse-


  skip: "REQUIRED",
  expand: "Click to expand",


  • left - should be used for the product logo. AppBarLink as home type should be used
  • center - used for bespoke scenarios where custom CSS is required for center-alignment or special responsive behaviour
  • right - puts content to the right of the App Bar

AppBarLink provides link functionality in the header. Currently we only support the use of icons in this component. round icons will be the most frequently used. The home configuration is largely used for brand icons that would link to the home page.


iconicon to be displayedObjecttrue-
titletitle of the iconStringtrue-
urllocation for navigating toStringtrue-
typetype of link to render. round or homeStringfalseround