Navigation
The navigation bar allows users to navigate to and access information on different pages.
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.
1. Selected
When a user is on a page, icon will be replaced with its active state.
a-text-label:
font-color: blue-medium
2. Unselected
Default state of icon
a-text-label:
font-color: slate-medium-dark
3. Structure:
max-width: 100%
max-height: 50px
border-top: 1px, slate-light-medium
Nav Bar Iconography is made custom and there are 2 sets for the pro and consumer apps.
Active Icon States
Folders include PNGs, SVG, and PDF files of each icon.
Home-Active.zip
7KB
Binary
Home-Active
Bookings-Active.zip
7KB
Binary
Bookings-Active
My-Pros-Active.zip
11KB
Binary
My-Pros-Active
Messages-Active.zip
8KB
Binary
Messages-Active
Inactive Icon States
Folders include PNGs, SVG, and PDF files of each icon.
Home-Inactive.zip
7KB
Binary
Home-Inactive
Bookings-Inactive.zip
6KB
Binary
Bookings-Inactive
My-Pros-Inactive.zip
10KB
Binary
My-Pros-Inactive
Messages-Inactive.zip
8KB
Binary
Message-Inactive
Account-Inactive.zip
9KB
Binary
Account-Inactive
Active Icon States
Folders include PNGs, SVG, and PDF files of each icon.
Claims-Active.zip
8KB
Binary
Claims-Active
Inactive Icon States
Folders include PNGs, SVG, and PDF files of each icon.
Claims-Inactive.zip
8KB
Binary
Claims-Inactive
Last modified 3yr ago