LifeDS

Component

Navigation Menu

Horizontal nav bar with animated dropdown panels. Supports triggers, plain links and rich content layouts.

NavigationMenualign: start · center · end
NavigationMenuTriggeropens dropdown on hover/click
NavigationMenuContentanimated panel
NavigationMenuLinkhref · data-active
navigationMenuTriggerStyleCVA style for plain link items
Playground

Simple links — no dropdown

Rich content — 2-column grid

Featured panel — asymmetric layout

Icon-based links — status pairs

Active state — data-active

RTL support

Tokens used

9 semantic tokens consumed by this component.

--backgroundBackground
bg-background
--foregroundForeground
text-foreground
--primaryPrimary
bg-primarytext-primaryborder-primaryring-primary
--mutedMuted
bg-mutedtext-mutedborder-muted
--muted-foregroundMuted Foreground
text-muted-foreground
--accentAccent
bg-accenttext-accentborder-accent
--accent-foregroundAccent Foreground
text-accent-foreground
--borderBorder
border-borderborder
--ringRing
ring-ringring