Class AppBar

A customizable top app bar that provides content and actions related to the current screen.

Inheritance
object
CallbackEventHandler
Focusable
VisualElement
BaseVisualElement
ExVisualElement
AppBar
Implements
Inherited Members
VisualElement.Focus()
VisualElement.Overlaps(Rect)
VisualElement.ToString()
VisualElement.TryGetBinding(BindingId, out Binding)
VisualElement.TryGetDataSourceContext(BindingId, out DataSourceContext)
VisualElement.TryGetLastBindingToUIResult(in BindingId, out BindingResult)
VisualElement.TryGetLastBindingToSourceResult(in BindingId, out BindingResult)
VisualElement.GetFirstOfType<T>()
VisualElement.GetFirstAncestorOfType<T>()
VisualElement.canGrabFocus
VisualElement.focusController
VisualElement.cacheAsBitmap
CallbackEventHandler.RegisterCallback<TEventType>(EventCallback<TEventType>, TrickleDown)
CallbackEventHandler.RegisterCallbackOnce<TEventType>(EventCallback<TEventType>, TrickleDown)
CallbackEventHandler.RegisterCallback<TEventType, TUserArgsType>(EventCallback<TEventType, TUserArgsType>, TUserArgsType, TrickleDown)
CallbackEventHandler.RegisterCallbackOnce<TEventType, TUserArgsType>(EventCallback<TEventType, TUserArgsType>, TUserArgsType, TrickleDown)
CallbackEventHandler.RegisterCallback<TEventType>(EventCallback<TEventType>, CallbackOptions)
CallbackEventHandler.RegisterCallback<TEventType, TUserArgsType>(EventCallback<TEventType, TUserArgsType>, TUserArgsType, CallbackOptions)
CallbackEventHandler.UnregisterCallback<TEventType>(EventCallback<TEventType>, TrickleDown)
CallbackEventHandler.UnregisterCallback<TEventType>(EventCallback<TEventType>, CallbackOptions)
CallbackEventHandler.UnregisterCallback<TEventType, TUserArgsType>(EventCallback<TEventType, TUserArgsType>, TrickleDown)
CallbackEventHandler.UnregisterCallback<TEventType, TUserArgsType>(EventCallback<TEventType, TUserArgsType>, CallbackOptions)
CallbackEventHandler.NotifyPropertyChanged(in BindingId)
Namespace: Unity.AppUI.UI
Assembly: Unity.AppUI.dll
Syntax
[UxmlElement]
public class AppBar : ExVisualElement, IEventHandler, IResolvedStyle, ITransform, ITransitionAnimations, IExperimentalFeatures, IVisualElementScheduler, IContextOverrideElement, IAdditionalDataHolder
Remarks

The AppBar is a flexible navigation component that displays information and actions relating to the current screen. It provides consistent navigation and helps users identify where they are in the app.

The AppBar supports both fixed and collapsible (stretching) behaviors, making it suitable for various navigation patterns. It can display a title, navigation buttons (back and drawer), and custom actions.

Key features include:

  • Dynamic height adjustment with stretching behavior
  • Support for back and drawer navigation buttons
  • Customizable action buttons
  • Compact and regular size modes
  • Flexible space for custom content
  • Configurable elevation levels

The AppBar is commonly used in conjunction with other navigation components like Drawer and NavigationRail to create a cohesive navigation experience.

Examples

Basic AppBar with title and actions. Creating a basic AppBar with a title and action buttons.

<AppBar title="My App">
    <ActionButton icon="settings" />
    <ActionButton icon="account" />
</AppBar>

Collapsible AppBar with navigation. Setting up a collapsible AppBar with navigation and actions.

<AppBar
    stretch="true"
    expanded-height="150"
    show-back-button="true"
    elevation="1"
    title="Details Page">
    <ActionButton icon="share" />
    <ActionButton icon="more" />
</AppBar>

Compact AppBar with drawer. Creating a compact AppBar with drawer button and search action programmatically.

var appBar = new AppBar();
appBar.compact = true;
appBar.showDrawerButton = true;
appBar.title = "Dashboard";

// Add a search action
var searchButton = new ActionButton ;
appBar.AddAction(searchButton);

Constructors

AppBar()

Creates a new AppBar.

Declaration
public AppBar()

Fields

actionContainerUssClassName

USS class name of the AppBar's action container.

Declaration
public const string actionContainerUssClassName = "appui-appbar__action-container"
Field Value
Type Description
string

backButtonUssClassName

USS class name of the AppBar's back button.

Declaration
public const string backButtonUssClassName = "appui-appbar__back-button"
Field Value
Type Description
string

barUssClassName

USS class name of the AppBar's bar.

Declaration
public const string barUssClassName = "appui-appbar__bar"
Field Value
Type Description
string

bottomBorderUssClassName

USS class name of the AppBar's bottom border element.

Declaration
public const string bottomBorderUssClassName = "appui-appbar__bottom-border"
Field Value
Type Description
string

bottomUssClassName

USS class name of the AppBar's bottom element.

Declaration
public const string bottomUssClassName = "appui-appbar__bottom"
Field Value
Type Description
string

compactTitleUssClassName

USS class name of the AppBar's compact title.

Declaration
public const string compactTitleUssClassName = "appui-appbar__compact-title"
Field Value
Type Description
string

compactUssClassName

USS class name of the AppBar's compact variant.

Declaration
public const string compactUssClassName = "appui-appbar--compact"
Field Value
Type Description
string

drawerButtonUssClassName

USS class name of the AppBar's drawer button.

Declaration
public const string drawerButtonUssClassName = "appui-appbar__drawer-button"
Field Value
Type Description
string

elevationUssClassName

USS class name of the AppBar's elevation.

Declaration
public const string elevationUssClassName = "appui-elevation-"
Field Value
Type Description
string

flexibleSpaceUssClassName

USS class name of the AppBar's flexible space.

Declaration
public const string flexibleSpaceUssClassName = "appui-appbar__flexible-space"
Field Value
Type Description
string

largeTitleUssClassName

USS class name of the AppBar's large title.

Declaration
public const string largeTitleUssClassName = "appui-appbar__large-title"
Field Value
Type Description
string

spacerUssClassName

USS class name of the AppBar's bar spacer.

Declaration
public const string spacerUssClassName = "appui-appbar__spacer"
Field Value
Type Description
string

stretchUssClassName

USS class name of the AppBar's stretch variant.

Declaration
public const string stretchUssClassName = "appui-appbar--stretch"
Field Value
Type Description
string

ussClassName

Main USS class name of the AppBar.

Declaration
public const string ussClassName = "appui-appbar"
Field Value
Type Description
string

Properties

bottom

Container element for the AppBar's bottom element. This element is located below the flexible space.

Declaration
public VisualElement bottom { get; }
Property Value
Type Description
VisualElement

compact

The compactness of the AppBar. Set to true to make it compact. Set to false to use the default size.

Declaration
public bool compact { get; set; }
Property Value
Type Description
bool

contentContainer

The content container of this element.

Declaration
public override VisualElement contentContainer { get; }
Property Value
Type Description
VisualElement
Overrides

elevation

The elevation of the AppBar.

Declaration
public int elevation { get; set; }
Property Value
Type Description
int

expandedHeight

The height of the AppBar when it is expanded. See stretch.

Declaration
public float expandedHeight { get; set; }
Property Value
Type Description
float

flexibleSpace

The flexible space element.

Declaration
public VisualElement flexibleSpace { get; }
Property Value
Type Description
VisualElement

scrollOffset

Set this value based on the scrollview's scrollOffset in order to stretch the AppBar accordingly.

Declaration
public float scrollOffset { get; set; }
Property Value
Type Description
float

showBackButton

Display or hide the AppBar's back button.

Declaration
public bool showBackButton { get; set; }
Property Value
Type Description
bool

showDrawerButton

Display or hide the AppBar's drawer button.

Declaration
public bool showDrawerButton { get; set; }
Property Value
Type Description
bool

stretch

The stretch of the AppBar. Set to true to make it stretchable. Set to false to make it fixed.

Declaration
public bool stretch { get; set; }
Property Value
Type Description
bool

title

The AppBar's title.

Declaration
public string title { get; set; }
Property Value
Type Description
string

Methods

AddAction(VisualElement)

Add a new action to the AppBar.

Declaration
public void AddAction(VisualElement actionVisualElement)
Parameters
Type Name Description
VisualElement actionVisualElement

The action to add.

Events

backButtonTriggered

Event triggered when the AppBar's back button is pressed.

Declaration
public event Action backButtonTriggered
Event Type
Type Description
Action

drawerButtonTriggered

Event triggered when the AppBar's drawer button is pressed.

Declaration
public event Action drawerButtonTriggered
Event Type
Type Description
Action

stretchTriggered

Event triggered when the AppBar is being stretched. The float parameter is the stretch ratio (0.0 to 1.0).

Declaration
public event Action<float> stretchTriggered
Event Type
Type Description
Action<float>

Implements

Extension Methods