| category | state | created | updated |
|---|---|---|---|
component design guidance |
approved |
2024-10-30 |
2024-10-30 |
The page header component defines the top of a page. Provides a consistent place for branding, navigation, search, and access to global application actions like settings and notifications.
- Each page must have only one header, placed at the top. This improves navigation, and readability.
- Headers must not be used in smaller containers like popups or dialogs. This avoids confusion and clarifies page-level vs. contextual navigation.
- Headers must not be overloaded with excessive items. Top-level navigation should be limited to four items. This ensures clarity and ease of use for users.
- Considering its application importance, the search feature should be incorporated into the header to enhance user efficiency and navigation.
- Headers should use the right-side action area for global actions and top-level navigation items that are important but less frequently visited. This optimizes header space, prioritizes key actions, and streamlines navigation.
- Design teams must not use headings that do not clearly convey their meaning or purpose. Instead, they should ensure that all headings are short and concise, providing users with clear context for navigation.
- Design teams should pair icons with text when the text adds relevant context for the user, such as the user's name, to enhance clarity and understanding.
- 2024-10-30: Initial guidance