NavGroup

molecules

Grouped nav items with an uppercase 10px label above (e.g. 'Main', 'Sales', 'Operations'). Bounded to ≤4 items per group (NASA Rule 2).

ARIA Role: list (aria-labelledby)

Demo

Demo for NavGroup (molecules)

Grouped nav items with an uppercase 10px label above (e.g. 'Main', 'Sales', 'Operations'). Bounded to ≤4 items per group (NASA Rule 2).

Props

PropTypeRequiredDefaultDescription
labelstringYes—
idstringYes—
childrenReact.ReactNodeYes—

TypeScript Interface

interface NavGroupProps {
  label: string;
  id: string;
  children: React.ReactNode;
}

Assertions (NASA Rule 5)

  • [type]children required — group must contain ≥1 NavItem, ≤4 (NASA Rule 2)(NASA Rule 2 + 5)
  • [aria]<ul> must have aria-labelledby pointing to label id, and label must be a real heading(WCAG 1.3.1)

Usage

Import

import { Navgroup } from '@epasslive/design-system'

Basic

<Navgroup />

With Variants

<Navgroup variant="primary" size="md" />