Class BottomNavBar

A navigation component that enables easy switching between top-level destinations.

Inheritance
object
CallbackEventHandler
Focusable
VisualElement
BaseVisualElement
BottomNavBar
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 BottomNavBar : BaseVisualElement, IEventHandler, IResolvedStyle, ITransform, ITransitionAnimations, IExperimentalFeatures, IVisualElementScheduler, IContextOverrideElement, IAdditionalDataHolder
Remarks

The Bottom Navigation Bar provides quick navigation between top-level destinations in your app. It displays 3-5 destinations at the bottom of the screen, each represented by an icon and an optional text label.

Bottom navigation bars are typically used in mobile applications where quick switching between main features is important. They should be used for important destinations that need to be accessed frequently.

Note: Bottom navigation should be used only for top-level destinations that need to be accessible from anywhere in the app. For other navigation patterns, consider using tabs, drawers, or other navigation components.

The Bottom Navigation Bar consists of individual BottomNavBarItem elements, each representing a destination in your application. The BottomNavBar itself is a simple container, while BottomNavBarItem provides the actual functionality with properties for icons, labels, selection states, and click handling.

Anatomy

Basic Bottom Navigation Bar:

<appui:BottomNavBar>
    <appui:BottomNavBarItem icon="home" label="Home" />
    <appui:BottomNavBarItem icon="search" label="Search" selected="true" />
    <appui:BottomNavBarItem icon="favorite" label="Favorites" />
    <appui:BottomNavBarItem icon="user" label="Profile" />
</appui:BottomNavBar>

Icon-Only Bottom Navigation:

<appui:BottomNavBar>
    <appui:BottomNavBarItem icon="dashboard" />
    <appui:BottomNavBarItem icon="analytics" selected="true" />
    <appui:BottomNavBarItem icon="notifications" />
    <appui:BottomNavBarItem icon="settings" />
</appui:BottomNavBar>

With Badge Indicators:

<appui:BottomNavBar>
    <appui:BottomNavBarItem icon="home" label="Home" />
    <appui:BottomNavBarItem icon="mail" label="Messages" badge-content="3" />
    <appui:BottomNavBarItem icon="notifications" label="Alerts" show-badge="true" />
    <appui:BottomNavBarItem icon="user" label="Profile" selected="true" />
</appui:BottomNavBar>

Five Item Navigation:

<appui:BottomNavBar>
    <appui:BottomNavBarItem icon="home" label="Home" />
    <appui:BottomNavBarItem icon="explore" label="Explore" />
    <appui:BottomNavBarItem icon="add" label="Create" selected="true" />
    <appui:BottomNavBarItem icon="favorite" label="Saved" />
    <appui:BottomNavBarItem icon="user" label="Profile" />
</appui:BottomNavBar>
Examples

Basic Bottom Navigation Bar with three items

<BottomNavBar>
    <BottomNavBarItem icon="home" label="Home" />
    <BottomNavBarItem icon="search" label="Search" />
    <BottomNavBarItem icon="settings" label="Settings" />
</BottomNavBar>

Creating a Bottom Navigation Bar programmatically

var bottomNav = new BottomNavBar();

var homeItem = new BottomNavBarItem("home", "Home", () => {
Debug.Log("Home clicked");
});


var searchItem = new BottomNavBarItem("search", "Search", () => {
Debug.Log("Search clicked");
});


var settingsItem = new BottomNavBarItem("settings", "Settings", () => {
Debug.Log("Settings clicked");
});


bottomNav.Add(homeItem);
bottomNav.Add(searchItem);
bottomNav.Add(settingsItem);

Bottom Navigation Bar integrated with Navigation System

public class MainNavController : INavVisualController
{
    public void SetupBottomNavBar(BottomNavBar bottomNavBar, NavDestination destination, NavController navController)
    {
        var homeItem = new BottomNavBarItem("home", "Home", () =>
            navController.Navigate("home"));
        var searchItem = new BottomNavBarItem("search", "Search", () =>
            navController.Navigate("search"));

    bottomNavBar.Add(homeItem);
    bottomNavBar.Add(searchItem);
}



}

Constructors

BottomNavBar()

Default constructor.

Declaration
public BottomNavBar()

Fields

ussClassName

The BottomNavBar's USS class name.

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

Properties

contentContainer

The content container of the BottomNavBar.

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

Implements

Extension Methods