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
  • Desktop
  • Drop Downs
  • Mobile Web

Was this helpful?

  1. Web

Navigation

The Handy navigation menu on web and mobile web provides a home for the most important and most used pages on our site.

PreviousWebNextGrid and Layout

Last updated 5 years ago

Was this helpful?

Desktop

The menu bar at the top of our desktop screen provides easy access for the most important and most used pages on our site. The Handy logo is always on the far left and takes users to the home page, and the log in or account information is always on the far right. The navigation items align with our desktop .

Handy Logo: 64px max-width
Padding-left: 32px

Font-weight: Book 
Font-color: Text Black #434343
Top-padding: 20px
Bottom-padding: 20px
Left-padding: 24px
Right-padding: 24px

Drop Downs

Mobile Web

Background-color: White #FFFFFF
Shadow: #000000, R:0; G:0; B:0, Alpha: 20%, 4px blur
Max-width: 232px
font-color: Text-black #434343
font-size: 16pt
font-weight: Book
padding-left: 24px
padding-top: 8px
padding-bottom: 8px

Line-color: Slate-medium-light #DAE2E6

The Handy desktop navigation has two active menus. The All Services menu is always always present, and the user Account menu is available for logged in users.

The Handy mobile web menu is housed in a hamburger icon in the top right corner of the screen and mirrors the options from desktop. The mobile web menu opens by pushing screen content to the left. We use FontAwesome carets to indicate a list item that will push you one level deeper into the menu list. If a list item has no caret, it will take users to a new page when tapped.

angle-right
grid
drop down