<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

  • In the Vanilla API, use a <nav> tag instead of a <div>. If not possible, place a role="navigation" on the wrapper element.
  • 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.

Best practices

Do

  • Keep the taxonomy shallow.

Don't

  • 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

Was this page useful?

Thanks for your feedback!

Feel free to include your name if you wish to have a follow up conversation.


Published: Jan 25, 2022Last updated: Sep 18, 2024