Menu
Logo
Universal Search
App Nav
Universal Search
The app header Universal Search uses the Dynamic Search component to allow use to search across campaigns, groups and tactics.
Default
Active
Breakpoint Behavior
App Header
X-large: Right side navigation items display visible labels.
Large: Right side navigation items labels become hidden
Medium: Search input becomes more narrow
Small: App logo becomes smaller and search input becomes a button
1. Global
The app header should be displayed globally across all pages. The app header provides a familiar and persistent way for user to navigate. The app header should be hidden is if a modal is open.
2. Consistent
The content of of the app header should remain consistent across all pages. For pages such as the login page, where the user is unauthenticated, a version of the app header with only the logo may be used.
3. Fixed
If the page has scrollable content, the app header should remain fixed and visible at the top of the screen.
4. Hover States
The nav items should display a visible hover state. If a nav item opens a menu or a tooltip, the nav item should remain in an active state.
Related Components
Additional Reading
The Fastest Navigation Layout for a Three-Level Menu https://uxmovement.com/navigation/the-fastest-navigation-layout-for-a-three-level-menu/
The Rules for Modern Navigation https://www.uxbooth.com/articles/the-rules-for-modern-navigation/