NavGroup

Deprecated

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

Categorymolecules

Sourcepatterns/molecules/navgroup.html

AI HintUse for grouped UI patterns. Combine atoms into functional units.

Sidebar nav-group.

NavGroup

Navigation — Family 5

Sidebar nav-group.

Usage

Sidebar nav-group. Refer to the DS component index for full prop details.

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

Props

Preview

NavGroup

Prop

Type

Required

Default

Description

label

string

Required

—

No description.

id

string

Required

—

No description.

children

React.ReactNode

Required

—

No description.

Quick use:<NavGroup />

Accessibility

ARIA rolelist (aria-labelledby)

Usage

Import

tsxSnippet

import { NavGroup } from "@epasslive/design-system"

Example 1

tsxSnippet

<Nav items={[{label: "Home", href: "/"}]} />

Anti-patterns

— Do not hardcode data in molecules

— Avoid complex business logic in molecules