Navigation menu - Pharen

Use Navigation menu to build an action or navigation pattern. This page covers every Vue component exported by the public module.

View code

<script setup lang="ts">
import { NavigationMenu, NavigationMenuContent, NavigationMenuItem, NavigationMenuLink, NavigationMenuList, NavigationMenuTrigger } from '@pharen/ui';
</script>

<template>
  <NavigationMenu>
    <NavigationMenuList>
      <NavigationMenuItem>
        <NavigationMenuTrigger>Products</NavigationMenuTrigger>
        <NavigationMenuContent class="p-3">
          <div class="grid w-72 gap-2">
            <NavigationMenuLink href="#hub" class="rounded-md p-2 hover:bg-accent"><strong class="block text-sm">Pharen Hub</strong><span class="text-xs text-muted-foreground">Workflows and agents in one place.</span></NavigationMenuLink>
            <NavigationMenuLink href="#ui" class="rounded-md p-2 hover:bg-accent"><strong class="block text-sm">Pharen UI</strong><span class="text-xs text-muted-foreground">Reusable Vue components.</span></NavigationMenuLink>
          </div>
        </NavigationMenuContent>
      </NavigationMenuItem>
      <NavigationMenuItem><NavigationMenuLink href="#docs" class="px-4 py-2 text-sm">Docs</NavigationMenuLink></NavigationMenuItem>
    </NavigationMenuList>
  </NavigationMenu>
</template>

Installation

npm install @pharen/ui

pnpm add @pharen/ui

yarn add @pharen/ui

bun add @pharen/ui

Import @pharen/ui/styles.css exactly once in your application entrypoint.

Usage

import { NavigationMenu, NavigationMenuContent, NavigationMenuIndicator, NavigationMenuItem, NavigationMenuLink, NavigationMenuList, NavigationMenuTrigger, NavigationMenuViewport } from '@pharen/ui';

Exports

Export	Purpose
`NavigationMenu`	Exported Vue component from this module.
`NavigationMenuContent`	Contains the visible content.
`NavigationMenuIndicator`	Exported Vue component from this module.
`NavigationMenuItem`	Represents one item.
`NavigationMenuLink`	Exported Vue component from this module.
`NavigationMenuList`	Exported Vue component from this module.
`NavigationMenuTrigger`	Opens or activates the component.
`NavigationMenuViewport`	Exported Vue component from this module.

Source

Open the source on GitHub