Skip to main content
USWDS + Tailwind

Side Navigation

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

Examples

Breakpoints

Mobile

320px

Mobile Lg

480px

Tablet

640px

Desktop

1024px
side-navigation-demo.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.

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

PropTypeDescription
isCurrentbooleanMarks this link as the current page.

Items

Renders nested lists from item data.

PropTypeDescription
itemsSideNavigationItem[] (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.