Sidebar Navigation

Note: The Side Navigation has been deprecated. Instead please use the Left Navigation.

Example

<vega-flex>
  <div data-shrink="0">
    <vega-sidenav footnote="Version 2.0.0" open-by-default="disableCollapse">
      <vega-sidenav-link icon="hb-menu" url="#">Company Name</vega-sidenav-link>
      <vega-sidenav-link icon="fas fa-shopping-bag fa-lg" url="#"
        >Order Equipment</vega-sidenav-link
      >
      <vega-sidenav-group icon="fas fa-file-alt fa-lg" label="Dashboard">
        <vega-sidenav-link url="#">Form W-9</vega-sidenav-link>
        <vega-sidenav-link url="#" selected="true"
          >Form W-8BEN</vega-sidenav-link
        >
        <vega-sidenav-link url="#"
          >Very very very very very very very very long title</vega-sidenav-link
        >
      </vega-sidenav-group>
      <vega-sidenav-group icon="fas fa-user fa-lg" label="Main Heading">
        <vega-sidenav-link url="#">Sub-Heading</vega-sidenav-link>
        <vega-sidenav-link url="#">Sub-Heading</vega-sidenav-link>
        <vega-sidenav-link url="#">Sub-Heading</vega-sidenav-link>
      </vega-sidenav-group>
      <vega-sidenav-link icon="fas fa-comment-dots fa-lg" url="#"
        >Support</vega-sidenav-link
      >
    </vega-sidenav>
  </div>
  <div>
    <!-- Main Content -->
  </div>
</vega-flex>

Usage

The vega-sidenav is a complex fully contained component which will provide two different navigation interfaces: one for larger screens and one for mobile devices.

It contains other complex components, including the vega-sidenav-group and the vega-sidenav-link.

To use the vega-sidenav component properly, it is recommended to use it inside a vega-flex component as shown:

<body>
  <vega-flex>
    <div data-shrink="0">
      <vega-sidenav>
        <!-- the mix of <vega-sidenav-group> and <vega-sidenav-link> -->
      </vega-sidenav>
    </div>
    <div>
      <!-- Main Content -->
    </div>
  </vega-flex>
</body>

You may use vega-sidenav-group to group together listings of links with the vega-sidenav-link component as shown:

<vega-sidenav-group icon="XXX" label="XXX">
  <!-- a list of <vega-sidenav-link> -->
</vega-sidenav-group>

Properties

Name	Description	Default
footnote	The footnote of the sidenav string	""
source	The data source of the sidenav array
headerConfig	The header config of the sidenav. collapseLogo, expandLogo type is an image src `Object<{headline: "string", expandLogo: "string", collapseLogo: "string"}`>
open-by-default	Optional values are “open”, “close”, and “disableCollapse” (Note: this will only work when the screen width is larger or equal to 1024px). By setting this value to “open” you can force the sidenav to be open for screens larger or equal to 1024px. Note: The openByDefault property can only be set once for initialization and cannot be overridden.	close
show-side-bar-on-click-link	Indicator allowing the sidebar to close on clicking. Boolean	false

Mobile

In mobile view, the sidenav is hidden by default, but will instead show a hamburger menu which will then display the side navigation as an overlay.

Note:

The expandLogo and collapseLogo in the header-config property support customization. The image can be displayed using the path of the image. When using expandLogo, we recommend using an image with a width and height of 142 x 26px, and a maximum height of 80px.

collapseLogo supports a fixed width and height of 56px.

As shown in the above example, we recommend using <vega-sidenav> inside <vega-flex> to ensure it works as designed.

For more details, view in Storybook.

Accessibility

Ensures the contrast between foreground and background colors meets WCAG 2 AA contrast ratio thresholds.
Ensures role attribute has an appropriate value for the element.
Ensures aria-hidden elements do not contain focusable elements.
Ensure that text spacing set through style attributes can be adjusted with custom stylesheets.
Ensures the contrast between foreground and background colors meets WCAG 2 AA contrast ratio thresholds.
Ensures every id attribute value is unique.
Ensure that links with the same accessible name serve a similar purpose.
Ensures elements have alternate text or a role of none or presentation.
Ensure image alternative is not repeated as text.
Ensures links have discernible text.

Best Practices

Place vertical navigation on the left. User visual attention (at least in cultures with LTR languages) leans to the left side of the screen.
Ensure that the navigation is visually distinct from content on the page.
Do not duplicate the same menu on the left and the top of the page. Redundancy serves no positive purpose and can confuse users.
Hiding the left navigation behind icons is generally considered to cause a negative user experience. For this reason it may make sense to set the toggle() attribute to be default as “open” so that all users see the content of the menu, but provide the option to close it.
Place more important items near the top,and less important ones further down on the page. This is particularly the case if the menu may drift below the “fold” or initial page view. While evidence shows that users do scroll, they may not necessarily focus on menu items that are out of site.