NavigationMenu
Provides site-level links with optional rich flyout content.
Contract
| Decision | Choose |
|---|---|
| destination | direct Link, or Trigger plus Content for a small related group |
| orientation | horizontal or vertical; default horizontal |
| position | side: top/right/bottom/left; align: start/center/end |
| narrow screens | replace the desktop composition with a drawer containing the same destinations |
Use task-oriented flyouts and keep direct destinations as links. This is site navigation, not an application command menubar.
Install
pnpm add @tinyrack/uiScroll inside the code area to read long lines.
Styles
@import '@tinyrack/ui/components/navigation-menu.css';Scroll inside the code area to read long lines.
Imports
import { TRNavigationMenu } from '@tinyrack/ui/components/navigation-menu';Scroll inside the code area to read long lines.
Playground
Usage
Examples
Mark destination state
Choose navigation direction
Place flyout content
Preserve destinations on narrow screens
Follow the keyboard model
API
The anatomy is Root, List, Item, Trigger, Icon, Content, Portal, Backdrop, Positioner, Popup, Arrow, Viewport, and Link. Every part and its prop/state types are named exports.
Root owns controlled value with onValueChange, uncontrolled defaultValue, orientation ('horizontal' | 'vertical', default horizontal), pointer delay, and closeDelay. Trigger can be disabled. Icon renders ChevronDown by default and accepts custom children. Link.active sets aria-current="page"; closeOnClick dismisses flyout content.
Positioner.side accepts top, right, bottom, and left; align accepts start, center, and end. sideOffset defaults to 8; collision avoidance shifts alignment and flips sides. Portal accepts a custom container. Popup owns the surface and Viewport receives active Content.
Import CSS from the public subpath. Tokens include --tr-navigation-menu-popup-max-width. The composition supports SSR and hydration; portal content mounts in its container after hydration. On narrow screens, render the same destinations in a touch-sized drawer instead of compressing the desktop keyboard model.