#App Bar

# Design

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.

# Example

# Usage

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.

# AppBar

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

# Props

# Labels

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

# Slots

• 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

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.

# Props