Menu - Documentation

Search docs...

Ctrl K

The TairoMenu component is a versatile navigation menu that provides a range of features and styling options. It's built on top of Reka UI's NavigationMenu component and extends its functionality with additional components and styling.

Example

Components

TairoMenu

NavigationMenuRoot

Model	Type
`v-model`	`string` The controlled value of the menu item to activate. Can be used as `v-model`.

Prop	Type
`as` default:`-`	`AsTag \| Component` The element or component this component should render as. Can be overwritten by `asChild`.
`as-child` default:`-`	`boolean` Change the default rendered element for the one passed as a child, merging their props and behavior. Read our [Composition](https://www.reka-ui.com/docs/guides/composition) guide for more details.
`default-value` default:`-`	`string` The value of the menu item that should be active when initially rendered. Use when you do not need to control the value state.
`delay-duration` default:`-`	`number` The duration from when the pointer enters the trigger until the tooltip gets opened.
`dir` default:`-`	`Direction_4` The reading direction of the combobox when applicable. If omitted, inherits globally from `ConfigProvider` or assumes LTR (left-to-right) reading mode.
`disable-click-trigger` default:`-`	`boolean` If `true`, menu cannot be open by click on trigger
`disable-hover-trigger` default:`-`	`boolean` If `true`, menu cannot be open by hover on trigger
`disable-pointer-leave-close` default:`-`	`boolean` If `true`, menu will not close during pointer leave event
`orientation` default:`-`	`Orientation_2` The orientation of the menu.
`skip-delay-duration` default:`-`	`number` How much time a user has to enter another trigger without incurring a delay again.
`unmount-on-hide` default:`-`	`boolean` When `true`, the element will be unmounted on closed state.

Slot	Type
`#default`	`{}`

TairoMenuContent

NavigationMenuContent

Prop	Type
`as` default:`-`	`AsTag \| Component` The element or component this component should render as. Can be overwritten by `asChild`.
`as-child` default:`-`	`boolean` Change the default rendered element for the one passed as a child, merging their props and behavior. Read our [Composition](https://www.reka-ui.com/docs/guides/composition) guide for more details.
`disable-outside-pointer-events` default:`-`	`boolean` When `true`, hover/focus/click interactions will be disabled on elements outside the `DismissableLayer`. Users will need to click twice on outside elements to interact with them: once to close the `DismissableLayer`, and again to trigger the element.
`force-mount` default:`-`	`boolean` Used to force mounting when more control is needed. Useful when controlling animation with Vue animation libraries.

Event	Emitted Value Type
`escape-key-down`	`[event: KeyboardEvent]`
`pointer-down-outside`	`[event: PointerDownOutsideEvent]`
`focus-outside`	`[event: FocusOutsideEvent]`
`interact-outside`	`[event: PointerDownOutsideEvent \| FocusOutsideEvent]`

Slot	Type
`#default`	`{}`

TairoMenuIndicator

NavigationMenuIndicator

Prop	Type
`as` default:`-`	`AsTag \| Component` The element or component this component should render as. Can be overwritten by `asChild`.
`as-child` default:`-`	`boolean` Change the default rendered element for the one passed as a child, merging their props and behavior. Read our [Composition](https://www.reka-ui.com/docs/guides/composition) guide for more details.
`force-mount` default:`-`	`boolean` Used to force mounting when more control is needed. Useful when controlling animation with Vue animation libraries.

Slot	Type
`#default`	`{}`

TairoMenuItem

NavigationMenuItem

Prop	Type
`as` default:`-`	`AsTag \| Component` The element or component this component should render as. Can be overwritten by `asChild`.
`as-child` default:`-`	`boolean` Change the default rendered element for the one passed as a child, merging their props and behavior. Read our [Composition](https://www.reka-ui.com/docs/guides/composition) guide for more details.
`value` default:`-`	`string` A unique value that associates the item with an active value when the navigation menu is controlled. This prop is managed automatically when uncontrolled.

Slot	Type
`#default`	`{}`

TairoMenuLink

NavigationMenuLink

Prop	Type
`active` default:`-`	`boolean` Used to identify the link as the currently active page.
`as` default:`-`	`AsTag \| Component` The element or component this component should render as. Can be overwritten by `asChild`.
`as-child` default:`-`	`boolean` Change the default rendered element for the one passed as a child, merging their props and behavior. Read our [Composition](https://www.reka-ui.com/docs/guides/composition) guide for more details.
`variant` default:`"default"`	`"default" \| "tab"`

Event	Emitted Value Type
`select`	`[payload: CustomEvent<{ originalEvent: Event; }>]`

Slot	Type
`#default`	`{}`

TairoMenuLinkTab

NavigationMenuLink

Prop	Type
`active` default:`-`	`boolean` Used to identify the link as the currently active page.
`as` default:`-`	`AsTag \| Component` The element or component this component should render as. Can be overwritten by `asChild`.
`as-child` default:`-`	`boolean` Change the default rendered element for the one passed as a child, merging their props and behavior. Read our [Composition](https://www.reka-ui.com/docs/guides/composition) guide for more details.

Event	Emitted Value Type
`select`	`[payload: CustomEvent<{ originalEvent: Event; }>]`

Slot	Type
`#default`	`{}`

TairoMenuList

NavigationMenuList

Prop	Type
`as` default:`-`	`AsTag \| Component` The element or component this component should render as. Can be overwritten by `asChild`.
`as-child` default:`-`	`boolean` Change the default rendered element for the one passed as a child, merging their props and behavior. Read our [Composition](https://www.reka-ui.com/docs/guides/composition) guide for more details.

Slot	Type
`#default`	`{}`

TairoMenuListItems

Slot	Type
`#default`	`{}`

TairoMenuTrigger

NavigationMenuTrigger

Prop	Type
`as` default:`-`	`AsTag \| Component` The element or component this component should render as. Can be overwritten by `asChild`.
`as-child` default:`-`	`boolean` Change the default rendered element for the one passed as a child, merging their props and behavior. Read our [Composition](https://www.reka-ui.com/docs/guides/composition) guide for more details.
`disabled` default:`-`	`boolean` When `true`, prevents the user from interacting with item

Slot	Type
`#default`	`{}`

TairoMenuViewport

NavigationMenuViewport

Prop	Type
`align` default:`-`	`"center" \| "start" \| "end"` Placement of the viewport for css variables `(--reka-navigation-menu-viewport-left, --reka-navigation-menu-viewport-top)`.
`as` default:`-`	`AsTag \| Component` The element or component this component should render as. Can be overwritten by `asChild`.
`as-child` default:`-`	`boolean` Change the default rendered element for the one passed as a child, merging their props and behavior. Read our [Composition](https://www.reka-ui.com/docs/guides/composition) guide for more details.
`force-mount` default:`-`	`boolean` Used to force mounting when more control is needed. Useful when controlling animation with Vue animation libraries.

Input

Mobile drawer

On This Page

Example
Components