Class NavigationRail

A side navigation component that supports side-rail navigation patterns.

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

The Navigation Rail is a responsive alternative to the bottom navigation bar, designed for larger screen sizes. It provides easy access to top-level destinations in your app when using tablet and desktop screens.

The rail is typically displayed on the left or right edge of the screen, containing navigation destinations represented by icons and labels. It can also include leading and trailing containers for additional UI elements like logos or settings buttons.

Navigation Rails are recommended for apps with 3-7 top-level destinations. Using more destinations can create cluttered navigation that is difficult to scan.

  • Leading container: Optional area at the top for branding, profile, or global actions
  • Main container: Houses the navigation destinations
  • Trailing container: Optional area at the bottom for secondary actions
Examples

Basic Navigation Rail with items — A simple navigation rail with three destinations.

<NavigationRail>
    <NavigationRailItem icon="home" label="Home" selected="true" />
    <NavigationRailItem icon="favorite" label="Favorites" />
    <NavigationRailItem icon="settings" label="Settings" />
</NavigationRail>

Navigation Rail with custom containers — Navigation rail with custom leading and trailing content.

<NavigationRail>
    <Template name="leadingContainer">
        <Image class="logo" />
    </Template>
    <NavigationRailItem icon="dashboard" label="Dashboard" />
    <NavigationRailItem icon="person" label="Profile" />
    <Template name="trailingContainer">
        <Button text="Logout" />
    </Template>
</NavigationRail>

Right-aligned Navigation Rail with selected-only labels — A right-aligned navigation rail showing labels only for selected items.

<NavigationRail anchor="End" labelType="Selected" groupAlignment="Center">
    <NavigationRailItem icon="mail" label="Mail" />
    <NavigationRailItem icon="chat" label="Chat" selected="true" />
    <NavigationRailItem icon="calendar" label="Calendar" />
</NavigationRail>

Constructors

NavigationRail()

Default constructor.

Declaration
public NavigationRail()

Fields

contentContainerUssClassName

The content container styling class.

Declaration
public const string contentContainerUssClassName = "appui-navigation-rail__content-container"
Field Value
Type Description
string

groupAlignmentUssClassName

The NavigationRail group alignment styling class.

Declaration
public const string groupAlignmentUssClassName = "appui-navigation-rail-group-align--"
Field Value
Type Description
string

labelTypeUssClassName

The NavigationRail label type styling class.

Declaration
public const string labelTypeUssClassName = "appui-navigation-rail-label-type--"
Field Value
Type Description
string

leadingContainerUssClassName

The leading container styling class.

Declaration
public const string leadingContainerUssClassName = "appui-navigation-rail__leading-container"
Field Value
Type Description
string

trailingContainerUssClassName

The trailing container styling class.

Declaration
public const string trailingContainerUssClassName = "appui-navigation-rail__trailing-container"
Field Value
Type Description
string

ussClassName

The NavigationRail main styling class.

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

variantUssClassName

The NavigationRail variant styling class.

Declaration
public const string variantUssClassName = "appui-navigation-rail--"
Field Value
Type Description
string

Properties

anchor

The anchor of the NavigationRail. The NavigationRail will be anchored to the left or right side of the screen.

Declaration
[CreateProperty]
[UxmlAttribute]
public NavigationRailAnchor anchor { get; set; }
Property Value
Type Description
NavigationRailAnchor

contentContainer

The content container of the NavigationRail.

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

groupAlignment

The alignment of the group of items.

Declaration
[CreateProperty]
[UxmlAttribute]
public GroupAlignment groupAlignment { get; set; }
Property Value
Type Description
GroupAlignment

labelType

The label type of the NavigationRail.

Declaration
[CreateProperty]
[UxmlAttribute]
public LabelType labelType { get; set; }
Property Value
Type Description
LabelType

leadingContainer

The leading container of the NavigationRail.

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

mainContainer

The main container of the NavigationRail.

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

trailingContainer

The trailing container of the NavigationRail.

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

Methods

GetAnchorUssClassName(NavigationRailAnchor)

Declaration
public static string GetAnchorUssClassName(NavigationRailAnchor enumValue)
Parameters
Type Name Description
NavigationRailAnchor enumValue
Returns
Type Description
string

GetGroupAlignmentUssClassName(GroupAlignment)

Declaration
public static string GetGroupAlignmentUssClassName(GroupAlignment enumValue)
Parameters
Type Name Description
GroupAlignment enumValue
Returns
Type Description
string

GetLabelTypeUssClassName(LabelType)

Declaration
public static string GetLabelTypeUssClassName(LabelType enumValue)
Parameters
Type Name Description
LabelType enumValue
Returns
Type Description
string

Implements

Extension Methods