Sub Navigation

General Guidelines

Sub Navigation is an organized and structured list of links to internal web pages. Sub Navigation is typically used in user interfaces to navigate through different pages within a larger category. It most commonly appears in the sub-header of a web page or application, allowing users to quickly navigate through pages.

When to use

Sub Navigation is typically used in user interfaces to navigate through different pages within a larger category.

When it is required to provide a way to organize and navigate between related sections within a page, use Tabs instead, Follow guidelines for Tabs usage.

Behaviors

Sub Navigation has three states: active/selected, inactive, and hover.

If the page real estate is not enough to accommodate all of the Sub Navigation links a scrollbar should appear to access all the links.

Anatomy

The Sub Navigation consists of horizontally arranged links, and each link should be in text form.

• Container - Box for each navigation link.
• Text Label - It describes the content of each Sub Navigation link.
• Active/Selected Indicator - This provides visual cues of the current active page.

Do's and Don'ts

The length of each Sub Navigation container link depends individually on the size of the text label.