---
title: Side Navigation (React) - USWDS + Tailwind
description: Organize related pages in a hierarchy and show the current page
  with side navigation.
---

# Side Navigation

Organize related pages in a hierarchy and show the current page with side navigation.

## Examples

```tsx
import { SideNavigation } from '@uswds-tailwind/react/side-navigation'

export default function SideNavigationDemo() {
  return (
    <SideNavigation.Root aria-label="Program navigation" className="max-w-64">
      <SideNavigation.List>
        <SideNavigation.ListItem><SideNavigation.Link href="#overview" isCurrent>Overview</SideNavigation.Link></SideNavigation.ListItem>
        <SideNavigation.ListItem>
          <SideNavigation.Link href="#eligibility">Eligibility</SideNavigation.Link>
          <SideNavigation.List>
            <SideNavigation.ListItem><SideNavigation.Link href="#requirements">Requirements</SideNavigation.Link></SideNavigation.ListItem>
            <SideNavigation.ListItem><SideNavigation.Link href="#exceptions">Exceptions</SideNavigation.Link></SideNavigation.ListItem>
          </SideNavigation.List>
        </SideNavigation.ListItem>
      </SideNavigation.List>
    </SideNavigation.Root>
  )
}
```

## Component API

Build a nested side navigation with List, ListItem, and Link. Items renders nested lists from an item tree.

### Root `<nav>`

Set a navigation label when the page has multiple navigation landmarks.

### List `<ul>`

Nest another List inside ListItem for child destinations.

### ListItem `<li>`

Contains a link and optional nested List.

### Link `<a>`

Set href to the destination and isCurrent for the active page.

| Prop | Type | Description |
| - | - | - |
| `isCurrent` | `boolean` | Marks this link as the current page. |

### Items

Renders nested lists from item data.

| Prop | Type | Description |
| - | - | - |
| `items` | `SideNavigationItem[] (required)` | Tree of labels, hrefs, current-page flags, and child items. |

### Accessibility

Give Root a useful navigation label when the page has more than one navigation landmark.