The small top app bar is the standard top app bar for most use cases. It has a default height of 64dp and includes:

• Leading navigation icon: Usually a back or menu button, depending on screen context
• Title: Showing the current screen name or app title
• Trailing actions: Common actions for the current screen

The top app bar remains visible as users scroll, providing consistent access to navigation and actions.

Material Design offers four types of top app bars to match different UX needs:

• Center-aligned: For root pages, with the title centered in the bar
• Small: For compact layouts or sub-pages requiring back navigation
• Medium: For initial states that highlight the screen title (112dp height)
• Large: For maximum headline emphasis with a 152dp height

The type can be selected based on information hierarchy needs, with medium and large variants creating more visual space between content sections.

Top app bars have two key scroll behaviors:

• Color change: The top app bar fills with a surface container color to create visual separation from content when scrolling.
• Compress effect: Medium and large app bars can compress to the small size when scrolling down, optimizing screen space.

These behaviors help maintain context while maximizing content area. The app bar returns to its original state when scrolled back to the top.

The Top App Bar provides several API methods and events:

• Title Management: Use setTitle() and getTitle() to update or retrieve the current title.
• Scroll Events: Listen for scroll events to respond to scrolling behavior.
• Type Switching: Use setType() to change between small, medium, large, or center-aligned variants.
• Element Access: Methods like getHeadlineElement(), getLeadingContainer(), and getTrailingContainer() provide access to key elements.

Try scrolling in the demo area above or using the control buttons to see the events and API methods in action.