gsxui

Navigation-menu

Basic

// Package navigationmenu holds the site's example gsx components for
// ui/navigation-menu.
package navigationmenu

import (
	"github.com/gsxhq/gsxui/ui"
)

// Basic mirrors the shape of shadcn's own navigation-menu-demo.tsx: a plain
// top-level link (Home), a trigger opening a small grid of description
// links (Components), and another plain link (Docs). Home/Docs use
// variant="trigger" directly (no dropdown of their own);
// Components opens its own fully-chromed floating panel, positioned under
// its own trigger — this port ships shadcn's viewport={false} configuration
// only (see ui/navigation-menu.gsx's own file header GAP paragraph), so
// there is no shared viewport panel to open instead.
component Basic() {
	<ui.NavigationMenu>
		<ui.NavigationMenuList>
			<ui.NavigationMenuItem>
				<ui.NavigationMenuLink variant="trigger" active={true} href="#">Home</ui.NavigationMenuLink>
			</ui.NavigationMenuItem>
			<ui.NavigationMenuItem>
				<ui.NavigationMenuTrigger>Components</ui.NavigationMenuTrigger>
				<ui.NavigationMenuContent>
					<div class="grid w-80 gap-2">
						<ui.NavigationMenuLink href="#">
							<div class="text-sm font-medium">Dialog</div>
							<div class="text-muted-foreground">
								A window overlaid on the page, rendered with the native &lt;dialog&gt; element.
							</div>
						</ui.NavigationMenuLink>
						<ui.NavigationMenuLink href="#">
							<div class="text-sm font-medium">Dropdown Menu</div>
							<div class="text-muted-foreground">Displays a menu of actions or options, triggered by a button.</div>
						</ui.NavigationMenuLink>
						<ui.NavigationMenuLink href="#">
							<div class="text-sm font-medium">Tooltip</div>
							<div class="text-muted-foreground">A popup that displays information related to an element on hover.</div>
						</ui.NavigationMenuLink>
					</div>
				</ui.NavigationMenuContent>
			</ui.NavigationMenuItem>
			<ui.NavigationMenuItem>
				<ui.NavigationMenuLink variant="trigger" href="#">Docs</ui.NavigationMenuLink>
			</ui.NavigationMenuItem>
		</ui.NavigationMenuList>
	</ui.NavigationMenu>
}

Mega menu with independently-sized panels

package navigationmenu

import (
	"github.com/gsxhq/gsxui/ui"
)

// Mega demonstrates two independently-sized floating panels: Products opens
// a wide three-column grid, Solutions opens a narrow single-column list —
// each is its own self-contained, fully-chromed NavigationMenuContent,
// positioned under its own trigger (this port ships shadcn's
// viewport={false} configuration only; see ui/navigation-menu.gsx's own
// file header GAP paragraph for why there is no shared, JS-measured
// viewport panel morphing between the two instead). Resources is a plain
// link with no dropdown at all, reflected as variant="trigger".
component Mega() {
	<ui.NavigationMenu>
		<ui.NavigationMenuList>
			<ui.NavigationMenuItem>
				<ui.NavigationMenuTrigger>Products</ui.NavigationMenuTrigger>
				<ui.NavigationMenuContent>
					<div class="grid w-[36rem] grid-cols-3 gap-2">
						<ui.NavigationMenuLink href="#">
							<div class="text-sm font-medium">Analytics</div>
							<div class="text-muted-foreground">Track usage and conversion across every surface.</div>
						</ui.NavigationMenuLink>
						<ui.NavigationMenuLink href="#">
							<div class="text-sm font-medium">Automation</div>
							<div class="text-muted-foreground">Wire triggers to actions without writing glue code.</div>
						</ui.NavigationMenuLink>
						<ui.NavigationMenuLink href="#">
							<div class="text-sm font-medium">Billing</div>
							<div class="text-muted-foreground">Usage-based invoices, taxes, and dunning handled for you.</div>
						</ui.NavigationMenuLink>
						<ui.NavigationMenuLink href="#">
							<div class="text-sm font-medium">Search</div>
							<div class="text-muted-foreground">Full-text and vector search over your own data.</div>
						</ui.NavigationMenuLink>
						<ui.NavigationMenuLink href="#">
							<div class="text-sm font-medium">Storage</div>
							<div class="text-muted-foreground">Durable object storage with signed upload URLs.</div>
						</ui.NavigationMenuLink>
						<ui.NavigationMenuLink href="#">
							<div class="text-sm font-medium">Workflows</div>
							<div class="text-muted-foreground">Durable, retryable multi-step background jobs.</div>
						</ui.NavigationMenuLink>
					</div>
				</ui.NavigationMenuContent>
			</ui.NavigationMenuItem>
			<ui.NavigationMenuItem>
				<ui.NavigationMenuTrigger>Solutions</ui.NavigationMenuTrigger>
				<ui.NavigationMenuContent>
					<div class="grid w-56 gap-2">
						<ui.NavigationMenuLink href="#">Startups</ui.NavigationMenuLink>
						<ui.NavigationMenuLink href="#">Enterprise</ui.NavigationMenuLink>
						<ui.NavigationMenuLink href="#">Agencies</ui.NavigationMenuLink>
					</div>
				</ui.NavigationMenuContent>
			</ui.NavigationMenuItem>
			<ui.NavigationMenuItem>
				<ui.NavigationMenuLink variant="trigger" href="#">Resources</ui.NavigationMenuLink>
			</ui.NavigationMenuItem>
		</ui.NavigationMenuList>
	</ui.NavigationMenu>
}

RTL

// Package navigationmenu holds the site's example gsx components for
// ui/navigation-menu.
package navigationmenu

import (
	"github.com/gsxhq/gsxui/ui"
	"github.com/gsxhq/gsxui/ui/icon"
)

// Rtl mirrors shadcn's own navigation-menu-rtl demo: a "Getting started"
// trigger opening a list of doc links, a "With Icon" trigger opening a
// small grid of icon links, and a plain Docs link — translated to Arabic
// and wrapped in dir="rtl". shadcn's rtl demo also composes a "Components"
// trigger reusing the same six primitives as its own non-rtl demo; this
// dir's Basic already covers that shape (see basic.gsx), so it's dropped
// here rather than duplicated.
component Rtl() {
	<div dir="rtl" lang="ar">
		<ui.NavigationMenu>
			<ui.NavigationMenuList>
				<ui.NavigationMenuItem>
					<ui.NavigationMenuTrigger>البدء</ui.NavigationMenuTrigger>
					<ui.NavigationMenuContent>
						<div class="grid w-96 gap-2">
							<ui.NavigationMenuLink href="#">
								<div class="text-sm font-medium">مقدمة</div>
								<div class="text-muted-foreground">مكونات قابلة لإعادة الاستخدام مبنية باستخدام Tailwind CSS.</div>
							</ui.NavigationMenuLink>
							<ui.NavigationMenuLink href="#">
								<div class="text-sm font-medium">التثبيت</div>
								<div class="text-muted-foreground">كيفية تثبيت التبعيات وتنظيم تطبيقك.</div>
							</ui.NavigationMenuLink>
							<ui.NavigationMenuLink href="#">
								<div class="text-sm font-medium">الطباعة</div>
								<div class="text-muted-foreground">أنماط للعناوين والفقرات والقوائم...إلخ</div>
							</ui.NavigationMenuLink>
						</div>
					</ui.NavigationMenuContent>
				</ui.NavigationMenuItem>
				<ui.NavigationMenuItem>
					<ui.NavigationMenuTrigger>مع أيقونة</ui.NavigationMenuTrigger>
					<ui.NavigationMenuContent>
						<div class="grid w-48 gap-1">
							<ui.NavigationMenuLink href="#" class="flex-row items-center gap-2">
								<icon.CircleAlert/>
								قائمة الانتظار
							</ui.NavigationMenuLink>
							<ui.NavigationMenuLink href="#" class="flex-row items-center gap-2">
								<icon.CircleDashed/>
								المهام
							</ui.NavigationMenuLink>
							<ui.NavigationMenuLink href="#" class="flex-row items-center gap-2">
								<icon.CircleCheck/>
								منجز
							</ui.NavigationMenuLink>
						</div>
					</ui.NavigationMenuContent>
				</ui.NavigationMenuItem>
				<ui.NavigationMenuItem>
					<ui.NavigationMenuLink variant="trigger" href="#">الوثائق</ui.NavigationMenuLink>
				</ui.NavigationMenuItem>
				<ui.NavigationMenuIndicator/>
			</ui.NavigationMenuList>
		</ui.NavigationMenu>
	</div>
}