Style Guide
  • Handy Style Guide
  • Brand Guidelines
    • Logo
    • Color System
    • Line Icons
    • Expressive Icons
    • Typography
  • Native
    • Action Cards
      • Booking Cards
      • Job Cards
      • List Cards
      • Message Cards
      • User Cards
    • Avatars
    • Banners
    • Callouts
    • Buttons
    • Half Sheets
    • Headers
    • Icon Lists
    • Input Fields
    • Marketing
    • Message Bubbles
    • Modal
    • Navigation
    • Pickers
    • Reviews
    • Skeleton Loading States
    • Tabs
    • Typography - Native
      • Native Text Combinations
  • Web
    • Navigation
    • Grid and Layout
    • Forms
    • Typography (Web)
    • Buttons
    • Pickers
    • Modals
    • Cards
Powered by GitBook
On this page
  • Usage of Navigation
  • Anatomy of Navigation Bar
  • Nav Bar Iconography
  • Consumer App
  • Pro App

Was this helpful?

  1. Native

Navigation

The navigation bar allows users to navigate to and access information on different pages.

PreviousModalNextPickers

Last updated 5 years ago

Was this helpful?

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.

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.

7KB
Home-Active.zip
archive
Home-Active
7KB
Bookings-Active.zip
archive
Bookings-Active
11KB
My-Pros-Active.zip
archive
My-Pros-Active
8KB
Messages-Active.zip
archive
Messages-Active
7KB
Home-Inactive.zip
archive
Home-Inactive
6KB
Bookings-Inactive.zip
archive
Bookings-Inactive
10KB
My-Pros-Inactive.zip
archive
My-Pros-Inactive
8KB
Messages-Inactive.zip
archive
Message-Inactive
9KB
Account-Inactive.zip
archive
Account-Inactive
8KB
Claims-Active.zip
archive
Claims-Active
8KB
Claims-Inactive.zip
archive
Claims-Inactive