Aspyn

Navigation Menu

Top navigation with rich flyouts.

Installation

npm install @aspyn-io/kit @aspyn-io/tokens
import {
  NavigationMenu,
  NavigationMenuList,
  NavigationMenuItem,
  NavigationMenuTrigger,
  NavigationMenuContent,
  NavigationMenuLink,
  navigationMenuTriggerStyle,
} from "@aspyn-io/kit";

Site navigation with flyouts

Marketing-site-style top navigation with rich dropdown panels.

<NavigationMenu>
  <NavigationMenuList>
    <NavigationMenuItem>
      <NavigationMenuTrigger>Products</NavigationMenuTrigger>
      <NavigationMenuContent>
        <ul className="grid w-96 gap-2 p-3">
          <li><NavigationMenuLink href="/crm">CRM — accounts & subscriptions</NavigationMenuLink></li>
          <li><NavigationMenuLink href="/field-ops">Field Ops — dispatch & routing</NavigationMenuLink></li>
        </ul>
      </NavigationMenuContent>
    </NavigationMenuItem>
    <NavigationMenuItem>
      <NavigationMenuLink href="/pricing" className={navigationMenuTriggerStyle()}>
        Pricing
      </NavigationMenuLink>
    </NavigationMenuItem>
  </NavigationMenuList>
</NavigationMenu>

Notes

  • For app-internal navigation prefer plain links/sidebar; NavigationMenu shines on marketing sites.