<iframe src="https://www.googletagmanager.com/ns.html?id=GTM-5HGSQD2L" height="0" width="0" style="display:none;visibility:hidden" title="GTM"></iframe>

Left Hand Navigation

A vertical list of links to navigate through different sections of the site.

Use Left Hand Navigation...

  • To navigate through various sections.
  • To structure the information in a hierarchical format.

Don't use Left Hand Navigation...

  • To organize content into separate views within the same context. Use Tabs instead.
  • To navigate between sections within the same page. Use Anchor Bar instead.

The preview has been updated.

Button Menu

Use skin="button-menu" to display the Links as Buttons.

The preview has been updated.

Accessibility

  • Since the Left Hand Navigation is a <nav> tag, it needs an accessible label to make it distinguishable from other navigation landmarks such as the top navigation. The easiest way to accomplish this is to give it an aria-label attribute whose value is localized text describing the navigation.
  • In the React API, LeftHandNavigationHeader and LinkListHeading create <h2> and <h3> tags by default. If these do not represent the proper document structure for your page, use the as prop on these components to change the tags.
  • If the Left Hand Navigation has a heading(s), then the Link List that has heading labels should have an aria-labelledby attribute whose value is the id of its heading. Refer to the Link List documentation.
  • In the Vanilla API, use a <nav> tag instead of a <div>. If not possible, place a role="navigation" on the wrapper element.

Best practices

Do

Keep the taxonomy shallow.

Dont

Use more than two levels of hierarchy (parent and child).

Do

Keep the list height reasonable; consult with UX.

Do

Keep the heading text length short, so as not to wrap.

Do

When used with hierarchy, the heading can be a link.

Do

Use a section for additional content at the bottom of the navigation list to link to other site sections.

Content

  • Use nouns.
  • Use the plural form for product categories and subcategories.
  • Use title case for product names.
  • Use ampersands (&) to keep the text concise.

Refer to Writer styleguide for Left Hand Navigation and also, review styleguide for Links.

Props

LeftHandNavigation
This component is implemented using the <nav /> as the root element. You can utilize the native attributes supported by <nav /> tag. The ref is directly assigned to the root element, allowing you to access and manipulate it as needed.
See core props for additional props that can be applied to this component.
proptyperequireddescriptiondefault
skin"standard" | "button-menu" | nullfalse
The visual style of the Left Hand Navigation. One of: "standard", "button-menu".
standard
LeftHandNavigationHeader
This component is implemented using the <h2 /> as the root element. You can utilize the native attributes supported by <h2 /> tag. The ref is directly assigned to the root element, allowing you to access and manipulate it as needed.
See core props for additional props that can be applied to this component.

Related