Navigation
The navigation bar allows users to navigate to and access information on different pages.
Usage of Navigation
The navigation bar is anchored to the bottom of the screen and allows users to navigate between major places on the app. The navigation bar slides down when a user goes through a flow or a subpage.
Anatomy of Navigation Bar
1. Selected When a user is on a page, icon will be replaced with its active state.
a-text-label:
font-color: blue-medium2. Unselected Default state of icon
a-text-label:
font-color: slate-medium-dark3. Structure:
max-width: 100%
max-height: 50px
border-top: 1px, slate-light-mediumNav Bar Iconography
Nav Bar Iconography is made custom and there are 2 sets for the pro and consumer apps.
Consumer App
Active Icon States Folders include PNGs, SVG, and PDF files of each icon.
Inactive Icon States Folders include PNGs, SVG, and PDF files of each icon.
Pro App
Active Icon States Folders include PNGs, SVG, and PDF files of each icon.
Inactive Icon States Folders include PNGs, SVG, and PDF files of each icon.
Last updated
Was this helpful?