Status
Status
Healthy
Figma component
Includes a link to a Figma component that has been imported to Supernova
Principles
Use when
- setting the page-level layout if the product has complex navigations
- creating a responsive navigational structure within your product.
- it needed the show navigational directions (breadcrumb) or user details.
Don't use when
- side navigation is not in use on the layout.
Structure
- Breadcrumb
- User credentials area
Behavior
Positioning
The app header is always positioned at the top of the layout, providing consistent visibility across all pages within the application.
Scaling
The app header is responsive and should adjust dynamically to accommodate changes in screen size and orientation. In usage with side navigation, please avoid two components overlapping.
Component usage
Breadcrumb
The breadcrumb displays the hierarchical navigation path of the current page within the application.
User credentials
The user credentials area provides information about the currently logged-in users, such as their name, profile picture (avatar), and company information. This area includes options for account settings within.
Search bar (WIP)
Interaction
Scrolling
The app header should remain fixed at the top of the screen during vertical scrolling, ensuring continuous access to navigation and user information.
Responsiveness (Nesting actions)
When the screen width decreases, the breadcrumb and user credentials components in the top header are affected. If there are multiple breadcrumb trails, intermediate pages are truncated in the overflow menu. You can find more details on the component's page.
Also, the user credentials section can be integrated with an avatar, so if the name is displayed when the screen width decreases, such information can be included in the overflow menu. This situation should be considered according to the responsive values in the related product.
The components in the top header maintain their positions unchanged during width changes. For example, the breadcrumb is always aligned to the left, and the user credentials area is always aligned to the right.