Left Hand Navigation

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

UsageGuidelinesAPI

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.

ReactVanilla

<GridContainer>
  <Row>
    <Column span={3}>
      <LeftHandNavigation>
        <LeftHandNavigationHeader>
          Left-Hand Nav Header
        </LeftHandNavigationHeader>
        <Divider />
        <LinkList>
          <ListItem>
            <a href="./">Item 1a</a>
          </ListItem>
          <ListItem>
            <a href="./">Item 2a</a>
          </ListItem>
          <ListItem>
            <a href="./">Item 3a</a>
          </ListItem>
        </LinkList>
        <Divider />
        <LinkListHeading>Link list heading</LinkListHeading>
        <LinkList>
          <ListItem>
            <a href="./">Item 1b</a>
          </ListItem>
          <ListItem>
            <a href="./">Item 2b</a>
          </ListItem>
          <ListItem>
            <a href="./">Item 3b</a>
          </ListItem>
        </LinkList>
      </LeftHandNavigation>
    </Column>
  </Row>
</GridContainer>

<GridContainer>
  <Row>
    <Column span={3}>
      <LeftHandNavigation>
        <LeftHandNavigationHeader>
          Left-Hand Nav Header
        </LeftHandNavigationHeader>
        <Divider />
        <LinkList>
          <ListItem>
            <a href="./">Item 1a</a>
          </ListItem>
          <ListItem>
            <a href="./">Item 2a</a>
          </ListItem>
          <ListItem>
            <a href="./">Item 3a</a>
          </ListItem>
        </LinkList>
        <Divider />
        <LinkListHeading>Link list heading</LinkListHeading>
        <LinkList>
          <ListItem>
            <a href="./">Item 1b</a>
          </ListItem>
          <ListItem>
            <a href="./">Item 2b</a>
          </ListItem>
          <ListItem>
            <a href="./">Item 3b</a>
          </ListItem>
        </LinkList>
      </LeftHandNavigation>
    </Column>
  </Row>
</GridContainer>

<div class="swan-grid-container">
  <div class="swan-row">
    <div class="swan-col-3">
      <nav class="swan-lhn">
        <h2 class="swan-lhn-header">Left-Hand Nav Header</h2>
        <hr class="swan-divider" />
        <ul class="swan-link-list">
          <li><a href="./">Item 1a</a></li>
          <li><a href="./">Item 2a</a></li>
          <li><a href="./">Item 3a</a></li>
        </ul>
        <hr class="swan-divider" />
        <h3 class="swan-link-list-heading">Link list heading</h3>
        <ul class="swan-link-list">
          <li><a href="./">Item 1b</a></li>
          <li><a href="./">Item 2b</a></li>
          <li><a href="./">Item 3b</a></li>
        </ul>
      </nav>
    </div>
  </div>
</div>

<div class="swan-grid-container">
  <div class="swan-row">
    <div class="swan-col-3">
      <nav class="swan-lhn">
        <h2 class="swan-lhn-header">Left-Hand Nav Header</h2>
        <hr class="swan-divider" />
        <ul class="swan-link-list">
          <li><a href="./">Item 1a</a></li>
          <li><a href="./">Item 2a</a></li>
          <li><a href="./">Item 3a</a></li>
        </ul>
        <hr class="swan-divider" />
        <h3 class="swan-link-list-heading">Link list heading</h3>
        <ul class="swan-link-list">
          <li><a href="./">Item 1b</a></li>
          <li><a href="./">Item 2b</a></li>
          <li><a href="./">Item 3b</a></li>
        </ul>
      </nav>
    </div>
  </div>
</div>

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

ReactVanilla

<GridContainer>
  <Row>
    <Column span={3}>
      <LeftHandNavigation skin="button-menu">
        <LeftHandNavigationHeader>
          Left-Hand Nav Header
        </LeftHandNavigationHeader>
        <Divider />
        <LinkList>
          <ListItem selected>
            <a href="./">Item 1a</a>
          </ListItem>
          <ListItem>
            <a href="./">Item 2a</a>
          </ListItem>
          <ListItem>
            <a href="./">Item 3a</a>
          </ListItem>
        </LinkList>
        <Divider />
        <LinkListHeading>Link list heading</LinkListHeading>
        <LinkList>
          <ListItem>
            <a href="./">Item 1b</a>
          </ListItem>
          <ListItem>
            <a href="./">Item 2b</a>
          </ListItem>
          <ListItem>
            <a href="./">Item 3b</a>
          </ListItem>
        </LinkList>
      </LeftHandNavigation>
    </Column>
  </Row>
</GridContainer>

<GridContainer>
  <Row>
    <Column span={3}>
      <LeftHandNavigation skin="button-menu">
        <LeftHandNavigationHeader>
          Left-Hand Nav Header
        </LeftHandNavigationHeader>
        <Divider />
        <LinkList>
          <ListItem selected>
            <a href="./">Item 1a</a>
          </ListItem>
          <ListItem>
            <a href="./">Item 2a</a>
          </ListItem>
          <ListItem>
            <a href="./">Item 3a</a>
          </ListItem>
        </LinkList>
        <Divider />
        <LinkListHeading>Link list heading</LinkListHeading>
        <LinkList>
          <ListItem>
            <a href="./">Item 1b</a>
          </ListItem>
          <ListItem>
            <a href="./">Item 2b</a>
          </ListItem>
          <ListItem>
            <a href="./">Item 3b</a>
          </ListItem>
        </LinkList>
      </LeftHandNavigation>
    </Column>
  </Row>
</GridContainer>

<div class="swan-grid-container">
  <div class="swan-row">
    <div class="swan-col-3">
      <nav class="swan-lhn swan-lhn-skin-button-menu">
        <h2 class="swan-lhn-header">Left-Hand Nav Header</h2>
        <hr class="swan-divider" />
        <ul class="swan-link-list">
          <li class="swan-list-item-selected">Item 1a</li>
          <li><a href="./">Item 2a</a></li>
          <li><a href="./">Item 3a</a></li>
        </ul>
        <hr class="swan-divider" />
        <h3 class="swan-link-list-heading">Link list heading</h3>
        <ul class="swan-link-list">
          <li><a href="./">Item 1b</a></li>
          <li><a href="./">Item 2b</a></li>
          <li><a href="./">Item 3b</a></li>
        </ul>
      </nav>
    </div>
  </div>
</div>

<div class="swan-grid-container">
  <div class="swan-row">
    <div class="swan-col-3">
      <nav class="swan-lhn swan-lhn-skin-button-menu">
        <h2 class="swan-lhn-header">Left-Hand Nav Header</h2>
        <hr class="swan-divider" />
        <ul class="swan-link-list">
          <li class="swan-list-item-selected">Item 1a</li>
          <li><a href="./">Item 2a</a></li>
          <li><a href="./">Item 3a</a></li>
        </ul>
        <hr class="swan-divider" />
        <h3 class="swan-link-list-heading">Link list heading</h3>
        <ul class="swan-link-list">
          <li><a href="./">Item 1b</a></li>
          <li><a href="./">Item 2b</a></li>
          <li><a href="./">Item 3b</a></li>
        </ul>
      </nav>
    </div>
  </div>
</div>

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.

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.

prop	type	required	description	default
skin	`"standard" \| "button-menu" \| null`	false	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.

Was this page useful?

Published: Jan 25, 2022Last updated: Nov 26, 2024

Hidden

Link