The page navigation is complete. You may now navigate the page content as you wish.
Skip to main content

Used as the primary navigation of an application.

The SideNav provides users with access to the main pages of the product and should be used as the primary navigation in the application.

Usage

When to use

  • To display the primary navigation of the application on a page.

When not to use

  • To move between views within the same context or page, consider Tabs.

The navigation header displays persistent UI elements that give users quick access to important sections and resources within the application or platform.

The home link gives users consistent and quick access to the application's main page or section. Generally, the home or dashboard.

For cloud products, the icon set should always be the HCP service icon. For standalone or open-source products, it should be the product’s service icon (e.g. Terraform).

Home link in side-nav's header

Help dropdown

Use the help dropdown to provide users with access to support and helpful resources that can be easily accessible from anywhere within the application—for example, links to the help center, documentation, or tutorials.

Avoid placing non-help related links or actions, such as user settings or navigation links within the menu.

Help dropdown menu in side-nav's header

User dropdown

The user dropdown gives users quick and easy access to their settings and preferences. The menu should contain links or actions related to the user's profile, settings, and/or preferences.

Avoid placing links to unrelated pages or actions, such as support or navigation items within the menu.

User dropdown menu in side-nav's header

Custom content

The custom type supports any custom content, local components, or Helios components within the header via an instance swap property (customInstance) in Figma.

Generic container within the side-nav header

Body

The body consists of a group of sections with vertical lists of links, typically to the most important parts of the application. Any custom content or component is also supported by an additional generic container.

List

With title

Side-nav section with a title

Without title

Side-nav section without a title

  • A title can help users scan the sections and provide context about the links inside each section.
  • Titles should be meaningful and related to the content within the section.

List items

Without icon

List items without icons

With icon

List items with icons

  • Use icons to help users recognize and scan the links they are paired with.
  • We recommend only using icons in the main or top level navigation.
  • Avoid overwriting color styles in icons.
Do

List items with correct use of icons

Don’t

List items with incorrect use of icons

With badge

List item with a badge

With count

List item with badge-count

With nested items

Use hasSubItems to show or signify that a link has a nested level of navigation.

List item with sub-items

Use isLinkExternal to show that the list item is a hyperlink pointing to a page outside the product or platform.

List item with a external link

Use external links sparingly. Avoid using this property to link pages that are unrelated to the product's navigation.

Custom content

Toggle hasCustomContent on to support any additional custom content, local components, or Helios components within the body container via an instance swap property (customInstance) in Figma.

Generic container within the side-nav body

Context switcher

The context switcher allows users to switch between different contexts within your product or application. For example, the navigation or application can change based on a particular organization or workspace the user selects.

Context switcher

Positioning, and responsive behaviour

The SideNav should always be positioned on the left side of the viewport, occupying 100% of the viewport height to ensure that the navigation is always visible and accessible to the user..

On smaller viewports, the SideNav should collapse to maximize the available real estate on tablet and mobile devices. By tapping the menu icon, users can expand and access the full menu when needed.

Responsive side-nav

This section provides in-depth instructions on how consumers can use the full-featured Hds::SideNav component to build a "standard" sidebar navigation with responsive behavior, animations/transitions, support for portals, etc.

It also provides generic guidance on how to use the layout-only Hds::SideNav::Base component to build a customized sidebar navigation (if that would be necessary).

Given the complexity and level of customization that an application's navigation may require, it is not possible to cover all the possible use cases in this documentation. For this reason, if you need to implement a navigation element using this component, we suggest contacting the Design Systems Team for guidance and support.

The SideNav component is intended to be used in combination with the Hds::AppFrame component:

  • AppFrame takes care of providing a top-level layout for the application's page, but is agnostic of what the actual content is and what dimensions it has.
  • SideNav takes care of providing the visual elements used to build a top-level navigation for the application, but is agnostic of where it's used (even though it has intrinsic sizing).

The Hds::SideNav component provides a set of advanced features out of the box: layout, content (base elements + portals), responsiveness, accessibility.

Layout

The SideNav component provides a top-level layout for the sidebar navigation.

It exposes three "slots" (named blocks) where the consumers can yield the navigation content, and add business logic to control this content: <:header>, <:body> and <:footer>.

The page navigation is complete. You may now navigate the page content as you wish.
Skip to main content

Used as the primary navigation of an application.

The SideNav provides users with access to the main pages of the product and should be used as the primary navigation in the application.

Usage

When to use

  • To display the primary navigation of the application on a page.

When not to use

  • To move between views within the same context or page, consider Tabs.

The navigation header displays persistent UI elements that give users quick access to important sections and resources within the application or platform.

The home link gives users consistent and quick access to the application's main page or section. Generally, the home or dashboard.

For cloud products, the icon set should always be the HCP service icon. For standalone or open-source products, it should be the product’s service icon (e.g. Terraform).

Home link in side-nav's header

Help dropdown

Use the help dropdown to provide users with access to support and helpful resources that can be easily accessible from anywhere within the application—for example, links to the help center, documentation, or tutorials.

Avoid placing non-help related links or actions, such as user settings or navigation links within the menu.

Help dropdown menu in side-nav's header

User dropdown

The user dropdown gives users quick and easy access to their settings and preferences. The menu should contain links or actions related to the user's profile, settings, and/or preferences.

Avoid placing links to unrelated pages or actions, such as support or navigation items within the menu.

User dropdown menu in side-nav's header

Custom content

The custom type supports any custom content, local components, or Helios components within the header via an instance swap property (customInstance) in Figma.

Generic container within the side-nav header

Body

The body consists of a group of sections with vertical lists of links, typically to the most important parts of the application. Any custom content or component is also supported by an additional generic container.

List

With title

Side-nav section with a title

Without title

Side-nav section without a title

  • A title can help users scan the sections and provide context about the links inside each section.
  • Titles should be meaningful and related to the content within the section.

List items

Without icon

List items without icons

With icon

List items with icons

  • Use icons to help users recognize and scan the links they are paired with.
  • We recommend only using icons in the main or top level navigation.
  • Avoid overwriting color styles in icons.
Do

List items with correct use of icons

Don’t

List items with incorrect use of icons

With badge

List item with a badge

With count

List item with badge-count

With nested items

Use hasSubItems to show or signify that a link has a nested level of navigation.

List item with sub-items

Use isLinkExternal to show that the list item is a hyperlink pointing to a page outside the product or platform.

List item with a external link

Use external links sparingly. Avoid using this property to link pages that are unrelated to the product's navigation.

Custom content

Toggle hasCustomContent on to support any additional custom content, local components, or Helios components within the body container via an instance swap property (customInstance) in Figma.

Generic container within the side-nav body

Context switcher

The context switcher allows users to switch between different contexts within your product or application. For example, the navigation or application can change based on a particular organization or workspace the user selects.

Context switcher

Positioning, and responsive behaviour

The SideNav should always be positioned on the left side of the viewport, occupying 100% of the viewport height to ensure that the navigation is always visible and accessible to the user..

On smaller viewports, the SideNav should collapse to maximize the available real estate on tablet and mobile devices. By tapping the menu icon, users can expand and access the full menu when needed.

Responsive side-nav

This section provides in-depth instructions on how consumers can use the full-featured Hds::SideNav component to build a "standard" sidebar navigation with responsive behavior, animations/transitions, support for portals, etc.

It also provides generic guidance on how to use the layout-only Hds::SideNav::Base component to build a customized sidebar navigation (if that would be necessary).

Given the complexity and level of customization that an application's navigation may require, it is not possible to cover all the possible use cases in this documentation. For this reason, if you need to implement a navigation element using this component, we suggest contacting the Design Systems Team for guidance and support.

The SideNav component is intended to be used in combination with the Hds::AppFrame component:

  • AppFrame takes care of providing a top-level layout for the application's page, but is agnostic of what the actual content is and what dimensions it has.
  • SideNav takes care of providing the visual elements used to build a top-level navigation for the application, but is agnostic of where it's used (even though it has intrinsic sizing).

The Hds::SideNav component provides a set of advanced features out of the box: layout, content (base elements + portals), responsiveness, accessibility.

Layout

The SideNav component provides a top-level layout for the sidebar navigation.

It exposes three "slots" (named blocks) where the consumers can yield the navigation content, and add business logic to control this content: <:header>, <:body> and <:footer>.