An element that appears across the top of all pages containing the application name and primary navigation.
Installation
import '@nvidia-elements/core/page-header/define.js';
<nve-page-header>
<nve-logo slot="prefix" size="sm"></nve-logo>
<h2 slot="prefix" nve-text="heading sm">NVIDIA</h2>
<nve-button selected container="flat"><a href="#">Link 1</a></nve-button>
<nve-button container="flat"><a href="#">Link 2</a></nve-button>
<nve-icon-button slot="suffix" container="flat" icon-name="chat-bubble"></nve-icon-button>
<nve-icon-button slot="suffix" container="flat" icon-name="search"></nve-icon-button>
<nve-icon-button slot="suffix" container="flat" icon-name="switch-apps"></nve-icon-button>
<nve-icon-button slot="suffix" interaction="emphasis" size="sm">EL</nve-icon-button>
</nve-page-header>
App Logo
Use the Logo element when representing an application that is part of a suite of applications in a given problem domain.
Menu Button
Use a Icon Button to represent collapsible top level navigation, optimal for mobile or constrained viewport sizes.
Dropdown Menu
Use dropdowns and menus to allow progressive disclosure of extra navigation or global user actions.
Search
Page header with integrated search functionality for content discovery within the application.
Prefix Navigation
Page header with primary navigation positioned after the logo and branding area.
Center Navigation
Page header with navigation centered in the available space for balanced visual hierarchy.
Suffix Navigation
Page header with all navigation positioned at the end for right-aligned layout patterns.
User Detail
Page header displaying user information and avatar for personalized application experiences.
Release Status
All elements and features go through 3 phases of stability, pre-release, beta and stable.