Navigational Components

Users interact with navigational components in order to move throughout an application - or move through elements and forms within an applicaton.


Tabs

Use tabs if the user needs to navigate through multiple pages of content, without causing a page refresh. Tabs are useful in helping the user maintain where they are within the hierarchy of information.

sp1gv-info-tabs-example

Menus

These menus allow users to access to more options under a relevant title.

sp1gv-interface-header-menu-dropdown

Expanders

Also referred to as "Accordions," expanders allow forms and information to be "hidden" under a relevant header until clicked. Expanders are also useful when the agent needs to add a lot of information for a list of items, such as in this example.

sp1gv-nav-expanders

Sliders

These sliding areas, usually indicated by arrows, should be offered when the content within a section is too much, or spreads to far, to contain within the section.

Below are a few examples of sliders:

In the first example, there are too many segments within this trip to display them all on the upper section. The user can use the slider arrows to navigate over to outlying segments so they can access them. The second example is a similar situation.

An image slider is another good example of content that can be scanned via a slider within the slider area.

sp1gv-inputcontrols-sliders01 sp1gv-inputcontrols-sliders02 sp1gv-inputcontrols-sliders03