Menu
Documentation

Navigation Menu

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

Show code
vue
<template>
  <TairoMenu>
    <TairoMenuList class="flex-col lg:flex-row">
      <TairoMenuItem>
        <TairoMenuLink as-child>
          <NuxtLink to="/demos" active-class="text-primary-500">
            Prebuilt pages
          </NuxtLink>
        </TairoMenuLink>
      </TairoMenuItem>

      <TairoMenuItem>
        <TairoMenuLink as-child>
          <NuxtLink to="/documentation" active-class="text-primary-500">
            Documentation
          </NuxtLink>
        </TairoMenuLink>
      </TairoMenuItem>

      <TairoMenuItem>
        <TairoMenuTrigger>
          <span>Featured</span>
          <Icon
            name="lucide:chevron-down"
            class="transition-transform duration-200 ease-in group-data-[state=open]:-rotate-180"
          />
        </TairoMenuTrigger>
        <TairoMenuContent>
          <TairoMenuListItems
            class="m-0 grid list-none gap-x-[10px] p-[22px] sm:w-[600px]"
          >
            <li class="row-span-3 grid">
              <div
                class="grid sm:grid-cols-5 gap-4"
              >
                <div class="hidden sm:block sm:col-span-2">
                  <div class="flex flex-col justify-end h-full w-full bg-primary-950 rounded-xl p-4">
                    <div>
                      <TairoLogo class="size-10 text-white mb-3" />
                      <BaseHeading class="text-white mb-2">
                        Amazing UI
                      </BaseHeading>
                      <BaseParagraph size="xs" class="max-w-[260px] text-white">
                        Build high-quality, accessible design systems and web apps.
                      </BaseParagraph>
                    </div>
                  </div>
                </div>
                <div class="sm:col-span-3 flex flex-col justify-between">
                  <TairoMenuLink as-child>
                    <NuxtLink to="/layouts">
                      <BaseHeading size="sm" weight="medium" class="text-muted-900 dark:text-white in-[.router-link-exact-active]:text-primary-500">
                        Design System
                      </BaseHeading>
                      <BaseParagraph size="sm" class="max-w-[260px] text-muted-600 dark:text-muted-400">
                        Create your design system with a set of consistent design patterns.
                      </BaseParagraph>
                    </NuxtLink>
                  </TairoMenuLink>
                  <TairoMenuLink>
                    <NuxtLink to="/layouts/projects">
                      <BaseHeading size="sm" weight="medium" class="text-muted-900 dark:text-white in-[.router-link-exact-active]:text-primary-500">
                        Amazing UI
                      </BaseHeading>
                      <BaseParagraph size="sm" class="max-w-[260px] text-muted-600 dark:text-muted-400">
                        Build high-quality, accessible design systems and web apps.
                      </BaseParagraph>
                    </NuxtLink>
                  </TairoMenuLink>
                  <TairoMenuLink as-child>
                    <NuxtLink to="#">
                      <BaseHeading size="sm" weight="medium" class="text-muted-900 dark:text-white in-[.router-link-exact-active]:text-primary-500">
                        Amazing UI
                      </BaseHeading>
                      <BaseParagraph size="sm" class="max-w-[260px] text-muted-600 dark:text-muted-400">
                        Build high-quality, accessible design systems and web apps.
                      </BaseParagraph>
                    </NuxtLink>
                  </TairoMenuLink>
                </div>
              </div>
            </li>
          </TairoMenuListItems>
        </TairoMenuContent>
      </TairoMenuItem>
    </TairoMenuList>

    <div
      class="absolute top-full start-0 flex w-full mt-[10px] z-50"
    >
      <TairoMenuViewport />
    </div>
  </TairoMenu>
</template>

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.

class
default:-
unknown
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$3

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

key
default:-
PropertyKey
orientation
default:-
Orientation

The orientation of the menu.

ref
default:-
VNodeRef
ref-for
default:-
boolean
ref-key
default:-
string
skip-delay-duration
default:-
number

How much time a user has to enter another trigger without incurring a delay again.

style
default:-
unknown
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.

class
default:-
unknown
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.

key
default:-
PropertyKey
ref
default:-
VNodeRef
ref-for
default:-
boolean
ref-key
default:-
string
style
default:-
unknown
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.

class
default:-
unknown
force-mount
default:-
boolean

Used to force mounting when more control is needed. Useful when controlling animation with Vue animation libraries.

key
default:-
PropertyKey
ref
default:-
VNodeRef
ref-for
default:-
boolean
ref-key
default:-
string
style
default:-
unknown
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.

class
default:-
unknown
key
default:-
PropertyKey
ref
default:-
VNodeRef
ref-for
default:-
boolean
ref-key
default:-
string
style
default:-
unknown
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.

class
default:-
unknown
key
default:-
PropertyKey
ref
default:-
VNodeRef
ref-for
default:-
boolean
ref-key
default:-
string
style
default:-
unknown
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.

class
default:-
unknown
key
default:-
PropertyKey
ref
default:-
VNodeRef
ref-for
default:-
boolean
ref-key
default:-
string
style
default:-
unknown
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.

class
default:-
unknown
key
default:-
PropertyKey
ref
default:-
VNodeRef
ref-for
default:-
boolean
ref-key
default:-
string
style
default:-
unknown
Slot Type
#default
{}

TairoMenuListItems

Prop Type
class
default:-
unknown
key
default:-
PropertyKey
ref
default:-
VNodeRef
ref-for
default:-
boolean
ref-key
default:-
string
style
default:-
unknown
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.

class
default:-
unknown
disabled
default:-
boolean

When `true`, prevents the user from interacting with item

key
default:-
PropertyKey
ref
default:-
VNodeRef
ref-for
default:-
boolean
ref-key
default:-
string
style
default:-
unknown
Slot Type
#default
{}

TairoMenuViewport

NavigationMenuViewport
Prop Type
align
default:-
"start" | "center" | "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.

class
default:-
unknown
force-mount
default:-
boolean

Used to force mounting when more control is needed. Useful when controlling animation with Vue animation libraries.

key
default:-
PropertyKey
ref
default:-
VNodeRef
ref-for
default:-
boolean
ref-key
default:-
string
style
default:-
unknown