@vibe-labs/design-components-menus

Navigation menu component tokens, styles, and TypeScript types for the Vibe Design System. For persistent, structural navigation (sidebars, top bars, multi-level). Distinct from dropdowns (triggered popups).

Usage

@import "@vibe-labs/design-components-menus";

import { MenuFlyoutAlignments } from "@vibe-labs/design-components-menus/types";
import type { MenuStyleProps, MenuItemStyleProps, MenuFlyoutStyleProps } from "@vibe-labs/design-components-menus/types";

Contents

Tokens (menu.css)

CSS custom properties defined in @layer vibe.tokens:

Item

Token	Default	Description
--menu-item-height	2.25rem	Minimum item height
--menu-item-px	--space-3	Horizontal padding
--menu-item-radius	--radius-md	Border radius
--menu-item-font-size	--text-sm	Font size
--menu-item-font-weight	400	Default weight
--menu-item-color	--text-secondary	Text color
--menu-item-hover-bg	--surface-hover-overlay	Hover background
--menu-item-active-bg	--surface-active-overlay	Active/current background
--menu-item-active-color	--text-primary	Active text color
--menu-item-active-font-weight	--font-semibold	Active weight
--menu-item-active-indicator	--color-accent	Active indicator bar color

Icons

Token	Default
--menu-icon-size	1.125rem
--menu-icon-color	--text-muted
--menu-icon-active-color	--color-accent

Groups & Dividers

Token	Default
--menu-group-label-font-size	--text-xs
--menu-group-label-color	--text-muted
--menu-group-label-font-weight	--font-semibold
--menu-divider-color	--border-subtle

Nesting

Token	Default	Description
--menu-indent	--space-4	Nested menu left padding
--menu-nested-indicator-width	1px	Vertical tree line width
--menu-nested-indicator-color	--border-subtle	Tree line color

Submenu (Flyout)

Token	Default
--menu-submenu-bg	--surface-elevated
--menu-submenu-border-color	--border-subtle
--menu-submenu-radius	--radius-lg
--menu-submenu-shadow	--shadow-lg
--menu-submenu-z	--z-dropdown
--menu-collapse-speed	--duration-normal

Generated Styles (menu.g.css)

Component classes generated into @layer vibe.components.

Menu Container

• menu — vertical flex column, reset list styles
• horizontal modifier — switches to row layout

Menu Item

• Full-width interactive row with hover/focus/disabled states
• aria-current sets active background, color, weight, and indicator bar
• Vertical: left-side accent bar indicator (3px, 50% height)
• Horizontal: bottom bar indicator (2px, 50% width)
• Inset focus ring via box-shadow

Item Slots

• menu-icon — leading icon (accent-colored when active)
• menu-label — flex-grow text with ellipsis overflow
• menu-trail — trailing badge/count text
• menu-chevron — rotates 90° when aria-expanded="true"

Groups & Dividers

• menu-group — flex column wrapper
• menu-group-label — uppercase section header
• menu-divider — horizontal separator

Nested Menus

• Indented with vertical tree-line indicator via ::before
• menu-collapse — smooth grid-template-rows expand/collapse animation
• expanded modifier — opens the collapsed section

Flyout Submenus

• Absolutely positioned popup with fade-in animation
• Alignment: right (default, to the right) · bottom (below)
• open modifier — shows the flyout

Compact Mode

• Hides labels, trails, chevrons, and group labels
• Centers items for icon-only sidebar navigation
• Hides nested tree-line indicators

TypeScript Types (types/)

MenuFlyoutAlignments // ["right", "bottom"]
type MenuFlyoutAlignment

interface MenuStyleProps { horizontal?: boolean; compact?: boolean }
interface MenuItemStyleProps { disabled?: boolean }
interface MenuIconStyleProps {}
interface MenuLabelStyleProps {}
interface MenuTrailStyleProps {}
interface MenuChevronStyleProps {}
interface MenuGroupStyleProps {}
interface MenuGroupLabelStyleProps {}
interface MenuDividerStyleProps {}
interface MenuCollapseStyleProps { expanded?: boolean }
interface MenuFlyoutStyleProps { align?: MenuFlyoutAlignment; open?: boolean }

Dist Structure

File	Description
index.css	Barrel — imports tokens + generated styles
menu.css	Token definitions
menu.g.css	Generated component styles
index.js / index.d.ts	TypeScript types + runtime constants

Dependencies

Requires tokens from @vibe-labs/design (surfaces, borders, spacing, typography, colors, transitions, elevation, z-index).

Build

npm run build