Share via


Bottom app bar

A sample of what a standard app bar control looks like

Control description

The bottom app bar is the recommended place to put commands. By moving commands from the app canvas to the app bar, you deliver the most immersive experience possible to the user.

Explore navigation and commanding functionality in more depth as part of our App features, start to finish series: Flat navigation, start to finish (HTML and XAML) and Hierarchical navigation, start to finish (HTML and XAML)

Usage guidance

The standard app bar control is intended for the developer who is interested in implementing an app bar with little to no custom work. While it is easy to create an app bar, it is not easy to ensure that it behaves in accordance with Windows guidance and patterns. The CommandBar class and WinJS.UI.AppBar object are made to align with the intended design and behaviors so the developer doesn't have to think about every little detail, and will be less likely to diverge on the common commanding pattern.

If you want to depart from the standard experience and customize your app bars, use the AppBar control instead of the CommandBar control in XAML.

Examples

A screenshot illustrating the standard app bar control

For designers

Command patterns

Layout

Hub

Top app bar

Guidelines for app bars (Windows Store apps)

Making the app bar accessible

For developers (Windows Store apps using JavaScript and HTML)

WinJS.UI.AppBar object

WinJS.UI.NavBar object

HTML AppBar control sample

HTML NavBar control sample

Navigation and navigation history sample

Your first app - Part 3: PageControl objects and navigation

Adding app bars

Adding nav bars

Navigating between pages (HTML)

For developers (Windows Store apps using C#/VB/C++ and XAML)

Windows.UI.Xaml.Controls AppBar class

Windows.UI.Xaml.Controls CommandBar class

XAML AppBar control sample

XAML Navigation sample

Your first app - Part 3: Navigation, layout, and views

Your first app - Add navigation and views in a C++ Windows Store app (tutorial 3 of 4)

Adding app bars (XAML)

Navigating between pages (XAML)

For developers (Windows Store apps using DirectX and C++)

Creating an app bar or Setting