Navigation Bars
Navigation bars allow users to explore and switch between top-level destinations in an app. Adapt’s navigation bar implementation is based on the Material 3 Navigation Bar, with minor visual customizations to align with Niyo’s branding. The functionality remains consistent with the Material 3 guidelines.
Overview
Navigation bars provide quick access to the most important sections of an app. They are typically displayed at the bottom of the screen on mobile and at the side on larger screens like tablets or desktops. Niyo’s implementation primarily focuses on bottom navigation for mobile experiences.
Visual Customization
While the functionality aligns with Material 3, Adapt has customized the following visual aspects:
- Background Color: The navigation bar background color has been adjusted to better integrate with Niyo’s visual style.
- Active & Selected States: The visual treatment for active and selected navigation items has been refined to provide clearer feedback to the user.
Structure
A navigation bar consists of three to five destinations. Each destination is represented by an icon and a text label. Niyo’s design system only utilizes the icon + text variant and does not include the icon-only variation. This decision prioritizes clarity and ease of use for our users.
Behavior
- Selection: Tapping a destination icon navigates the user to the corresponding view.
- Current Destination: The currently active destination is visually highlighted to provide context to the user.
Usage
Navigation bars should be used for top-level navigation within an app. Avoid using navigation bars for secondary navigation or within individual screens. Instead, use tabs or other navigation patterns for those purposes.
Adhering to these guidelines, designers and developers can ensure consistent and user-friendly navigation within Niyo’s applications. For a deeper understanding of the underlying behavior and accessibility considerations, please refer to the official Material 3 Navigation Bar documentation linked above.