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.

Related Topics