This brings more focus to the content area’s primary task. NavigationView controls automatically rests on the app's base layer. In Windows 11, Notepad is a good example of an app that uses a menu bar silhouette. This example depicts a text editor using 12epx margins to compliment the utility of the app. This brings more focus to the content area’s primary task, in this case composition and editing. Menu bar silhouetteĪ MenuBar can be used as part of the of the base layer along with a CommandBar. In Windows 11, Photos is a good example of an app that uses a top navigation silhouette. Use smaller margins for smaller/tighter content needs. This example uses 56epx margins, complementing large pieces of media. Placing navigation on the same row as commands can be useful when trying to maximize the amount of vertical space for the content below.Ĭontent margins can vary. Note the location of user identity/person/picture control when using top navigation. Top navigation silhouetteĪ NavigationView can be used at the top of the app’s content layer, building a connection with the content below. This article focuses on the common silhouettes as used in several Windows in-box apps.Īlso refer to Content Basics for common arrangements of content and controls. Silhouettes indicate a common pattern of relationships between elements such as app layering, menus, navigation, commanding and content areas.

Silhouette icons