maui-docs/controls/navigationview/visual-structure.md

title	page_title	description	position	slug
Visual Structure	.NET MAUI NavigationView Documentation - Visual Structure	Learn what visual elements are displayed by the Telerik UI for .NET MAUI NavigationView, and see how these elements build the visual structure of the control.	1	navigationview-visual-structure

.NET MAUI NavigationView Visual Structure

The visual structure of the .NET MAUI NavigationView represents the anatomy of the UI component. Being familiar with the visual elements of the NavigationView allows you to quickly find the information required to configure them.

Displayed Elements

• Navigation View Header—The area that holds the navigation header content and toggle button.
• Navigation View Header Content—Represents the content in the [navigation header]({%slug navigationview-navigation-header%}).
• Navigation View Toggle Button—Used for opening/closing the pane. For more details review the [navigation header]({%slug navigationview-navigation-header%}) article.
• Navigation View Pane—The area that holds the pane header, pane footer, and pane content.
• Pane Header—Sticky area on the top of the [pane]({%slug navigationview-pane%}).
• Pane Content—Scrollable area between [the pane header and the pane footer]({%slug navigationview-pane%}). By default all items in the pane are added to the content, if Position is not explicitly defined.
• Pane Footer—Sticky area to the bottom of the [pane]({%slug navigationview-pane%}).
• NavigationView Content—Represents a content in the NavigationView.

See Also

• [Setting different Display Mode]({%slug navigationview-display-mode%})
• [Selecting an item]({%slug navigationview-selection%})
• [Configure the Navigation Pane]({%slug navigationview-pane%})
• [Configure the Navigation Item]({%slug navigationview-items%})
• [Configure the Navigation Header]({%slug navigationview-navigation-header%})
• [Navigation Item Styling]({%slug navigationview-item-styling%})
• [Navigation Pane Styling]({%slug navigationview-pane-styling%})
• [Navigation Header Styling]({%slug navigationview-styling%})
• [Events]({%slug navigationview-events%})
• [Commands]({%slug navigationview-commands%})