🚀 saastro/ui (Astro)
⚛️ shadcn/ui (React)
Installation
npx saastro add navigation-menuUsage
---
import {
NavigationMenu,
NavigationMenuList,
NavigationMenuItem,
NavigationMenuTrigger,
NavigationMenuContent,
NavigationMenuLink,
} from "@/components/ui-saastro/navigation-menu";
---
<NavigationMenu>
<NavigationMenuList>
<NavigationMenuItem>
<NavigationMenuTrigger>Item One</NavigationMenuTrigger>
<NavigationMenuContent>
<NavigationMenuLink href="/link-1">Link 1</NavigationMenuLink>
<NavigationMenuLink href="/link-2">Link 2</NavigationMenuLink>
</NavigationMenuContent>
</NavigationMenuItem>
<NavigationMenuItem>
<NavigationMenuLink href="/about">About</NavigationMenuLink>
</NavigationMenuItem>
</NavigationMenuList>
</NavigationMenu>Props
NavigationMenu
| Prop | Type | Default | Description |
|---|---|---|---|
| viewport | boolean | true | Whether to render a shared viewport for content |
NavigationMenuLink
| Prop | Type | Default | Description |
|---|---|---|---|
| href | string | "#" | Link destination |
| variant | "default" | "highlight" | "default" | Visual style variant |
| active | boolean | false | Whether the link is currently active |
Keyboard Navigation
| Key | Action |
|---|---|
ArrowRight | Move to next trigger |
ArrowLeft | Move to previous trigger |
ArrowDown | Focus first link in open content |
Escape | Close open menu |
Benchmark
Performance Benchmark
Bundle Size
vs
Hydration
0ms vs
Sin hydration
Open Response
vs
Saastro (Vanilla JS)
shadcn (React)