NavigationView
The NavigationView
control provides a top‑level navigation UI that adapts to different device families and app sizes. It is ideal for creating a persistent navigation pane with a header, footer, and a set of selectable items.
Sample: Basic NavigationView
This example demonstrates a simple vertical navigation pane with three items. The pane can be toggled on narrow screens.
Home
Welcome to the home page.
<!-- NavigationView Sample -->
<div class="nav-demo">
<div class="nav-header">My App</div>
<ul class="nav-items">
<li class="nav-item active" data-content="home">Home</li>
<li class="nav-item" data-content="profile">Profile</li>
<li class="nav-item" data-content="settings">Settings</li>
</ul>
</div>
<div class="content-demo" id="contentDemo">
<h3>Home</h3>
<p>Welcome to the home page.</p>
</div>
Key Features
- Automatic responsive behavior – collapses to a top menu on narrow screens.
- Built‑in support for header and footer content.
- Accessible navigation with proper ARIA roles.
- Customizable item template, icons, and selection visual.