Windows apps
Collapse the table of content
Expand the table of content

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.


A screenshot illustrating the standard app bar control

Related topics

For designers
Command patterns
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



© 2018 Microsoft