Navigation

Breadcrumbs

Codes
*VPN connection required
Designs
Breadcrumbs are a navigational element that helps users know their current location within a product.
Breadcrumbs
Breadcrumbs

Sizes
Breadcrumbs-small
Breadcrumbs
Breadcrumbs-small
Breadcrumbs

States
Breadcrumbs
Breadcrumbs

Masthead

Codes
*VPN connection required
Designs
The masthead functions as a type of toolbar for global actions, such as navigation, search and application settings actions.

⚠️ Please note: The masthead is part of the Stage 1 OpenText Rebranding. Make sure to check the new guidelines in the Rebranding section
Light
COLOR STYLESPrimary (brand)
SHADOW STYLESShadows/Elevation 2
BACKGROUND STYLESPrimary (brand)
Dark
COLOR STYLESPrimary (brand)
SHADOW STYLESShadows/Elevation 2
BACKGROUND STYLESPrimary (brand)

Variants

Navigation tabs

Codes
*VPN connection required
Designs
Tabs help divide content into different categories to help users find information easier.
Tab_group-complete/Default
Tab_group-complete/Default

Types
card
card
card
card

Variants

Pagination

Designs
Pagination is used for splitting up content or data into several pages, with a control for navigating back and forth.
Pagination Flat
Pagination Flat

Side navigation

Codes
*VPN connection required
Designs
The side navigation lets users navigate the entire content of a product or a section.
sidenav
COLOR STYLESElevations/Elevation 2
SHADOW STYLESShadows/Elevation 2
BACKGROUND STYLESElevations/Elevation 2
Side
COLOR STYLESElevations/Elevation 2
SHADOW STYLESShadows/Elevation 2
BACKGROUND STYLESElevations/Elevation 2

States
Example
COLOR STYLESElevations/Elevation 2
SHADOW STYLESShadows/Elevation 2
BACKGROUND STYLESElevations/Elevation 2
COLOR STYLESElevations/Elevation 2
SHADOW STYLESShadows/Elevation 2
BACKGROUND STYLESElevations/Elevation 2
Example
COLOR STYLESElevations/Elevation 2
SHADOW STYLESShadows/Elevation 2
BACKGROUND STYLESElevations/Elevation 2
COLOR STYLESElevations/Elevation 2
SHADOW STYLESShadows/Elevation 2
BACKGROUND STYLESElevations/Elevation 2

States

Tree

Codes
*VPN connection required
Designs
Tree views represent a hierarchical file system, displaying items in folders that can be expanded and collapsed.
Frame 627431
COLOR STYLESElevations/Elevation 2
STROKEGeneral styles/Border
SHADOW STYLESShadows/Elevation 2
BACKGROUND STYLESElevations/Elevation 2
Frame 627432
COLOR STYLESElevations/Elevation 2
STROKEGeneral styles/Border
SHADOW STYLESShadows/Elevation 2
BACKGROUND STYLESElevations/Elevation 2

States