The App Bar is a critical element in your application's UX. It establishes hierarchy, provides essential navigation, and communicates your brand. Follow these guidelines to use app bars effectively.

Use an App Bar when

• You need to display a page title or screen name
• Your application requires persistent navigation
• You want to establish consistent branding across pages
• You need to provide quick access to key actions
• Your application spans multiple sections or views that users navigate between
• You need to display user information or account actions

Avoid App Bars when

• You're building a simple, single-purpose page with no navigation
• Space is extremely limited (consider simplifying to essential elements only)
• The app bar would duplicate navigation already provided elsewhere

• Ensure the app bar has sufficient color contrast (WCAG AA compliant)
• Use semantic HTML and ARIA labels for navigation
• Make interactive elements keyboard accessible
• Ensure the app bar doesn't interfere with screen reader navigation
• Use proper heading hierarchy within the app bar content
• Provide visible focus indicators for all interactive elements

Props

• children: The content of the component
• classes: Override or extend the styles applied to the component
• color: The color of the component ("default" | "inherit" | "primary" | "secondary" | "transparent" | "error" | "info" | "success" | "warning")
• component: The component used for the root node. Either a string to use a HTML element or a component
• elevation: Shadow depth, corresponds to dp in the spec. It accepts values between 0 and 24 inclusive
• enableColorOnDark: If true, the color prop is applied in dark mode
• position: The positioning type ("absolute" | "fixed" | "relative" | "static" | "sticky")
• square: If false, rounded corners are enabled
• sx: The system prop that allows defining system overrides as well as additional CSS styles