Lucent UI
← ToastNavMenuFilterSearch →
✦ LLM-ready

NavMenu

molecule

Hierarchical navigation for sidebar and top-bar layouts with a DOM-driven sliding highlight pill. Compound API with Item, Group, Sub, and Separator. Three highlight states (child active, collapsed-with-active-child, self-active parent), CSS hover with translucent tint, inverse mode with accent right-border, three sizes, and collapsible groups with height animation.

"Add a NavMenu from lucent-ui with a sidebar layout. Include NavMenu.Group for collapsible sections and NavMenu.Item for navigation links. Set hasIcons for icon alignment."

Usage

React / JSX
import { NavMenu } from 'lucent-ui'

<NavMenu orientation="vertical" size="md" />

Installation

pnpm add lucent-ui

API Reference

NavMenu props — * required

PropTypeDefaultDescription
orientation"vertical" | "horizontal""vertical"Layout direction.
inversebooleanfalseSurface background with accent right-border and elevation shadow.
size"sm" | "md" | "lg""md"Text and padding size.
hasIconsbooleanfalseControls left-padding alignment for icon consistency.
aria-labelstring—Accessible label for the nav element.
styleReact.CSSProperties—Custom styles for the root element.
NavMenu.Itemcompound—Navigation item. Props: href, isActive, icon, badge, onClick, disabled, as, children.
NavMenu.Groupcompound—Collapsible group with header. Props: label, defaultOpen, icon, children.
NavMenu.Subcompound—Nested submenu with horizontal dropdown and viewport collision detection. Props: label, icon, children.
NavMenu.Separatorcompound—Visual separator between items.