Popup Nav

A navigation component that displays a popup menu with grouped links.

Code

<PopupNav
  label="Products & Services"
  groups={[
    {
      id: "products",
      title: "Products",
      links: [
        {
          label: "Analytics Platform",
          href: "/products/analytics",
          description: "Comprehensive data analysis and visualization tools"
        },
        // More products...
      ]
    },
    {
      id: "services",
      title: "Services",
      links: [
        {
          label: "Implementation",
          href: "/services/implementation",
          description: "Expert services to get your systems up and running"
        },
        // More services...
      ]
    }
  ]}
/>

Props

Name	Type	Required	Description
`label`	string	Yes	Label for the popup navigation trigger button
`groups`	Group[]	Yes	Array of link groups to display in the popup

Group Props

Name	Type	Required	Description
`id`	string	No	Unique identifier for the group. Auto-generated if title is provided
`title`	string	No	Optional title for the group of links
`links`	Link[]	Yes	Array of links in this group

Link Props

Name	Type	Required	Description
`label`	string	Yes	Text label for the link
`href`	string	Yes	URL for the link
`description`	string	No	Optional description text for the link
`current`	boolean	No	Whether this link represents the current page

Usage

✅ Do’s

Use for complex navigation structures
Include descriptive text for each link when possible
Group related links with titles
Keep the link labels simple and scannable

❌ Don’t’s

Don’t use if there are very few links
Don’t nest additional popups inside

Accessibility

Keyboard Navigation

Tab key moves focus to the popup trigger
Enter/Space opens and closes the popup
Tab key navigates through links when popup is open
Escape closes the popup and returns focus to the trigger

Screen Reader Support

The expandable button context is announced to screen readers
Trigger button has aria-expanded to indicate its expanded/collapsed state
Each list is labelled by the group title via aria-labelledby
A link may have aria-current="page" to indicate the current page