120k
New

Navigation Menu

PreviousNext

A collection of links for navigating websites.

Installation

pnpm dlx shadcn@latest add @force-ui-vue/navigation-menu

Usage

<script setup lang="ts">
import {
  NavigationMenu,
  NavigationMenuContent,
  NavigationMenuItem,
  NavigationMenuLink,
  NavigationMenuList,
  NavigationMenuTrigger,
} from "@/components/ui/navigation-menu"
</script>
 
<template>
  <NavigationMenu>
    <NavigationMenuList>
      <NavigationMenuItem>
        <NavigationMenuTrigger>Item One</NavigationMenuTrigger>
        <NavigationMenuContent>
          <NavigationMenuLink>Link</NavigationMenuLink>
        </NavigationMenuContent>
      </NavigationMenuItem>
    </NavigationMenuList>
  </NavigationMenu>
</template>

RTL

To enable RTL support in Force UI, see the RTL configuration guide.

API Reference

See the Radix UI Navigation Menu documentation for more information.