Back to catalog
Component detail entry
Navigation
@vean/ui
SNavigationMenu

NavigationMenu

NavigationMenu belongs to the Navigation category. Start with demos and usage, then use the API tables to finish integration and styling decisions.

Use the quick jump panel to reach overview, usage, demos, and API first, then continue through the full page.

Quick jump

Related components

If you are composing interactions in the same family, these components usually pair well together.

NavigationMenu (removed in v0.50.0)

⚠️ Removed: NavigationMenu / SNavigationMenu and the whole navigation-menu family are gone in v0.50.0. Nothing is exported any more — use NavMenu instead.

The family was frozen for one release cycle and then removed inside the v0.50.0 breaking window, together with the date / table / form engine replacements. This page is kept for one release cycle so existing code has a single place to migrate from; it documents only the removal and the mapping to NavMenu.

What was removed

SurfaceStatus
@vean/aria/navigation-menu sub-pathRemoved — every NavigationMenu* primitive and type
NavigationMenu* symbols in the headless root exportRemoved (and from the Headless.* namespaced export)
SNavigationMenu in @vean/uiRemoved — no styled counterpart is shipped
provideNavigationMenuUiRemoved — use provideNavMenuUi
Docs examples, component API data, changelog component pageRemoved
ui/navigation-menu registry item (vean)Removed

Migrating to NavMenu

NavMenu models the same domain — site-level navigation with hover/click triggers, keyboard navigation, a positioned viewport, and a data-driven items API — but on a single shared Popper surface: one PopperPositioner whose reference switches to the active trigger, with hover timing driven by one shared state machine. Root props are largely isomorphic (modelValue / defaultValue, orientation, dir, delayDuration, skipDelayDuration, disableClickTrigger, disableHoverTrigger, disablePointerLeaveClose).

- import { SNavigationMenu } from '@vean/ui';
+ import { SNavMenu } from '@vean/ui';

- <SNavigationMenu :items="items" />
+ <SNavMenu :items="items" />
- import { NavigationMenuRoot, NavigationMenuItem } from '@vean/aria/navigation-menu';
+ import { NavMenuRoot, NavMenuItem } from '@vean/aria/nav-menu';

Component mapping

RemovedNavMenu
SNavigationMenu / NavigationMenuCompactSNavMenu / NavMenuCompact
NavigationMenuRoot / List / Item / Trigger / Content / Link / Viewportsame name with the NavMenu prefix
NavigationMenuSubListNavMenuSubTrigger + NavMenuSubContent
NavigationMenuIndicator— (the shared NavMenu viewport carries a PopperArrow)
provideNavigationMenuUiprovideNavMenuUi

Type mapping

Every removed NavigationMenu* type has a NavMenu* counterpart with the same suffix: NavigationMenuRootProps → NavMenuRootProps, NavigationMenuOptionData → NavMenuOptionData, NavigationMenuUiSlot → NavMenuUiSlot, and so on.

Behavioral differences

  • Submenu surfaces — NavigationMenu rendered sub-items inside an indicator + viewport pair; NavMenu opens a nested flyout next to the item’s trigger (NavMenuSubTrigger / NavMenuSubContent), with sideOffset available on both NavMenuViewport and NavMenuSubContent.
  • Indicator — NavMenu has no separate indicator primitive; the arrow lives on the shared viewport and follows the active trigger.
  • Mount control — NavigationMenuRoot exposed unmountOnHide; NavMenu instead honors forceMount on its content primitives.
  • UI slots — the slot sets differ (the removed NavigationMenuUiSlot declared 19 slots, NavMenuUiSlot declares 20 including subTrigger / subContent / positioner); class, size, and the ui prop keep the same meaning.