Sign In

Navigation

Navigation Styles and Usage

Overview

One of the single most important usability aspects of any digital products is that navigation is clear and consistent. Here we’ll define how to make navigational areas recognizable and showcase some of the patterns we use to make them easy to discover and use.

Naming and Terms

Top Bar

The navigation bar that sits at the top of the prodcut view

Side Navigation

The primary navigation. The navigation is a vertical pane of links, placed on the left side of the product view and is capable of being hidden or minimized.

Secondary Navigation

A vertical navigation pane that extends out from the side navigation.

Search Bar

The primary Beeline One search bar.

Quick Links

links or buttons usually accompanied with an action panel that allow the user to quickly access views.

Style and Structure

Here’s some of the defining style characteristics of navigational areas

Navigation Background Color

All navigation sections use Blue5 as the backgorund color for that section. We do this so that any user’s in our system can recognized navigational areas by this color.

Name: Blue5
Hex: #001b38
RGB: rgb(0,27,56)
nav top bar

Top Bar

The top bar is positioned at the top of the view. It’s a fixed bar that doesn’t scroll with the page content

  1. Main Menu Toggle

    The first item in the top bar is the main menu toggle button. This button toggles the side navigation open and close

  2. Product Logo

    For all product logos you can visit Logos in the Brand Guidelines section

  3. Search Bar

    When we did a usability test on the existing VMS navigation we found that the majority of user’s ignored the navigation all together and used the search bar to find their way around the products. For that reason, we allow the search bar to take up as much horizontal space that is available after the product logo

  4. Quick LInks

    Quick Links are not required but many of products have needs for certain views to be quickly accessed. Quick links work great with Action Panels , and although it’s not a rule we encourage no more than 4 quick links at any given time.

navigation imagery

Side Navigation

The side navigation pane is our primary navigation. It is collapsable and grows vertically. It should extend the entire height of the view
  1. Menu Header
    All side navigation menus have a header that tells the user what the purpose of the navigation pane is. The background color of this view is Blue Primary: #0575e6
  2. Links
    Links should be accompanied with an icon, the font weight is bold
  3. Main Menu Toggle
    When the side navigation is expanded the main menu toggle changes to a close icon
  4. Secondary Navigation Button
    This icon button indicates that “Requests” has a secondary navigation pane that is triggered when clicked
  5. Overlay
    When the side navigation is expanded we place an overlay over the page content to block any activity while open. Clicking on this overlay triggers the side navigation to close. The background color for the overlay is rgba(0, 0, 0, 0.4);
  6. Hover State
    Background Color Font Color Transition
    Blue 1: #4fa7ff White: #ffffff all 0.3s ease;
  7. Navigation Panel
    The navigation panel is the outer container that holds the side navigation.
    Background Color Width
    Blue 5: #001b38 250px
navigation imagery

Secondary Navigation

In the past we’ve used a mega menu style horizontal menu system. This was never ideal but it was carried over from our legacy UI because we were not in a position to make a drastic change to the navigation without a lot of change management. However, most of our primary links are really just top level categories that have sub views that our user’s access. The secondary navigation pane is a pattern that allows our navigation to grow indefinitely, whereas the older mega menu pattern had limits.

  1. Active State

    When hovering or when a user clicks to load a secondary navigation pane we indicate these events by changing the text color to
    Blue 1: #4fa7ff

  2. Secondary Navigation Panel

    The secondary navigation panel carries the same style properties as the main navigation panel

responsive navigation imagery

Responsive Navigation

We understand that the legacy VMS cannot be fully responsive without extensive work. However, any new products are expected to to be fully responsive and accessible on any desktop or mobile device. the above image demonstrates the layout and positioning of the navigation UI elements when in mobile view. We define mobile view any screen size that has a width less than or equal to 1024px.

Mobile Navigation

Our mobile menu pattern uses a push and shrink animation. Essentially the existing view scales down .8 of it’s size and pushes over off screen but leaves some of the screen in view, while the navigational elements slide in from the left.

  1. Close Icon
  2. User Profile Data (Optional)
  3. Active State
    Background: color Blue 1: #4fa7ff
    Font Color: White: #ffffff
    Transition: all 0.3s ease;
  4. Menu Items with icons
  5. Background Color is our standard navigation background color
    Name: Blue5
    Hex:
    #001b38
    RGB:
    rgb(0,27,56)
  6. Product Logo
  7. View of current active screen
mobile navigation imagery