Top Navigation
The top navigation provides global navigation, search functionality, notifications, and user account access across the application.
Components
Notifications Panel (With Notifications)
Notifications
|
New user have been added to XYZ
5/1/25, 5:33am
New user have been added to XYZ
5/1/25, 5:33am
New user have been added to XYZ
5/1/25, 5:33am
New user have been added to XYZ
5/1/25, 5:33am
Notifications Panel (Empty State)
Notifications
|
You're all done.
You will find your notifications here
User Menu
Best practices
- Keep the navigation bar fixed at the top for easy access
- Display notification counts prominently to draw user attention
- Provide clear breadcrumbs for navigation context
- Make the search bar easily accessible and responsive
Interactive Example
Dashboard
Clear Hierarchy
Do
- Top navigation should:
- Maintain consistent positioning across all pages
- Show notification badges clearly when there are updates
- Provide quick access to search functionality
- Display user information and account options
Cluttered Interface
Avoid adding too many elements to the top navigation. Keep it clean and focused on essential actions.
Don't
- Don't hide critical navigation elements in dropdown menus without visual indicators
- Don't make the navigation bar too tall; it should be compact but functional
- Don't ignore mobile responsiveness for the navigation components