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-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

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.

7KB

Home-Active.zip

archive

Open

Home-Active

7KB

Bookings-Active.zip

archive

Open

Bookings-Active

11KB

My-Pros-Active.zip

archive

Open

My-Pros-Active

8KB

Messages-Active.zip

archive

Open

Messages-Active

Inactive Icon States Folders include PNGs, SVG, and PDF files of each icon.

7KB

Home-Inactive.zip

archive

Open

Home-Inactive

6KB

Bookings-Inactive.zip

archive

Open

Bookings-Inactive

10KB

My-Pros-Inactive.zip

archive

Open

My-Pros-Inactive

8KB

Messages-Inactive.zip

archive

Open

Message-Inactive

9KB

Account-Inactive.zip

archive

Open

Account-Inactive

Pro App

Active Icon States Folders include PNGs, SVG, and PDF files of each icon.

8KB

Claims-Active.zip

archive

Open

Claims-Active

Inactive Icon States Folders include PNGs, SVG, and PDF files of each icon.

8KB

Claims-Inactive.zip

archive

Open

Claims-Inactive