Left Hand Navigation

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

<nav class="left-hand-navigation">
  <h2 class="left-hand-navigation-header" id="exampleLeftNavHeadingMain">
    <!-- doesn't have to be an <h2> tag; use <h*> tag as appropriate -->
    Left-Hand Nav Header
  </h2>
  <hr class="hr-skin-strong" />
  <ul class="link-list" aria-labelledby="exampleLeftNavHeadingMain">
    <li class="listitem">Item 1a</li>
    <li class="listitem">Item 2a</li>
  </ul>
  <hr class="hr-skin-strong" />
  <h3 class="link-list-heading" id="exampleLeftHandNavHeading">
    <!-- doesn't have to be an <h3> tag; use <h*> tag as appropriate -->
    Link list heading
  </h3>
  <ul class="link-list" aria-labelledby="exampleLeftHandNavHeading">
    <li class="listitem">Item 1b</li>
    <li class="listitem">Item 2b</li>
  </ul>
</nav>

Skins

The "button menu" skin gives the menu items a button-like appearance. The currently-selected page in the menu can also be shown as selected.

<GridContainer>
  <Row>
    <Column span={4}>
      <LeftHandNavigation skin="button-menu">
        <LinkList>
          <ListItem selected>Item 1</ListItem>
          <ListItem>
            <a href="somehref">Item 2</a>
          </ListItem>
          <ListItem>
            <a href="somehref">Item 3</a>
          </ListItem>
          <ListItem>
            <a href="somehref">Item 4</a>
          </ListItem>
        </LinkList>
      </LeftHandNavigation>
    </Column>
  </Row>
</GridContainer>

Components

Guidelines

Designer Guidelines

• Don't use more than two levels of hierarchy (parent and child).

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

• A section for additional content may be used at the bottom of the navigation list, and can link to other site sections.

• Keep the taxonomy shallow.

• Keep the list height reasonable; consult with UX.

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

Accessibility Guidelines

• For accessibility, the Left Hand Navigation should use a <nav> tag. If for some reason you cannot use the <nav> tag, you must instead place role="navigation" on the wrapper element.

• The React components LeftHandNavigationHeader and LinkListHeading will create <h2> and <h3> tags by default. If these do not represent the proper document structure for your page, use the component prop on these components to change the tags.

• If the Left Hand Navigation has a heading(s), then the Link List that a heading labels should have an aria-labelledby attribute whose value is the id of its heading.

• See the documentation for Link List for the accessibility needs of the Link Lists that go inside Left Hand Navigation.