NavItem

Deprecated

Sidebar navigation item — 20px icon + label + optional badge. Active state shows 4px teal accent on left edge, white background, and teal-700 text. Superseded by sidebar.

Categorymolecules

Sourcepatterns/molecules/navitem.html

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

Sidebar nav item.

NavItem

Navigation — Family 5

Sidebar nav item.

Usage

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

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

Props

Preview

NavItem

Prop

Type

Required

Default

Description

label

string

Required

—

No description.

icon

React.ReactNode

Required

—

No description.

href

string

Optional

—

No description.

active

boolean

Optional

False

No description.

Quick use:<NavItem />

Accessibility

ARIA rolelink | button

Usage

Import

tsxSnippet

import { NavItem } 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