Overview
Forms & inputs
Design Systemv1.3.0Search documentation
Search for a command to run or a page to navigate to.
Design Systemv1.3.0Search for a command to run or a page to navigate to.
A collection of links for site navigation, typically displayed in a horizontal menu bar.
"use client"
import Link from "next/link"
import {
NavigationMenu,
NavigationMenuContent,
NavigationMenuItem,
NavigationMenuLink,
NavigationMenuList,
NavigationMenuTrigger,
} from "@strongtie/design-system/navigation-menu"
const components = [
{
title: "Alert Dialog",
href: "/docs/components/alert-dialog",
description:
"A modal dialog that interrupts the user with important content.",
},
{
title: "Hover Card",
href: "/docs/components/hover-card",
description:
"For sighted users to preview content available behind a link.",
},
{
title: "Progress",
href: "/docs/components/progress",
description:
"Displays an indicator showing the completion progress of a task.",
},
]
export function NavigationMenuDefault() {
return (
<NavigationMenu viewport={false}>
<NavigationMenuList>
<NavigationMenuItem>
<NavigationMenuTrigger>Getting started</NavigationMenuTrigger>
<NavigationMenuContent>
<ul className="grid gap-3 p-6 md:w-[400px] lg:w-[500px] lg:grid-cols-[.75fr_1fr]">
<li className="row-span-3">
<NavigationMenuLink asChild>
<Link
className="from-muted/50 to-muted flex h-full w-full flex-col justify-end rounded-md bg-gradient-to-b p-6 no-underline outline-none select-none focus:shadow-md"
href="/"
>
<div className="mt-4 mb-2 text-lg font-medium">
Design System
</div>
<p className="text-muted-foreground text-sm leading-tight">
Beautiful components built with Radix UI and Tailwind CSS.
</p>
</Link>
</NavigationMenuLink>
</li>
<li>
<NavigationMenuLink asChild>
<Link
className="hover:bg-accent hover:text-accent-foreground focus:bg-accent focus:text-accent-foreground block space-y-1 rounded-md p-3 leading-none no-underline transition-colors outline-none select-none"
href="/docs/introduction"
>
<div className="text-sm leading-none font-medium">
Introduction
</div>
<p className="text-muted-foreground line-clamp-2 text-sm leading-snug">
Re-usable components built using Radix UI and Tailwind
CSS.
</p>
</Link>
</NavigationMenuLink>
</li>
<li>
<NavigationMenuLink asChild>
<Link
className="hover:bg-accent hover:text-accent-foreground focus:bg-accent focus:text-accent-foreground block space-y-1 rounded-md p-3 leading-none no-underline transition-colors outline-none select-none"
href="/docs/installation"
>
<div className="text-sm leading-none font-medium">
Installation
</div>
<p className="text-muted-foreground line-clamp-2 text-sm leading-snug">
How to install dependencies and structure your app.
</p>
</Link>
</NavigationMenuLink>
</li>
</ul>
</NavigationMenuContent>
</NavigationMenuItem>
<NavigationMenuItem>
<NavigationMenuTrigger>Components</NavigationMenuTrigger>
<NavigationMenuContent>
<ul className="grid w-[400px] gap-3 p-4 md:w-[500px] md:grid-cols-2 lg:w-[600px]">
{components.map((component) => (
<li key={component.title}>
<NavigationMenuLink asChild>
<Link
className="hover:bg-accent hover:text-accent-foreground focus:bg-accent focus:text-accent-foreground block space-y-1 rounded-md p-3 leading-none no-underline transition-colors outline-none select-none"
href={component.href}
>
<div className="text-sm leading-none font-medium">
{component.title}
</div>
<p className="text-muted-foreground line-clamp-2 text-sm leading-snug">
{component.description}
</p>
</Link>
</NavigationMenuLink>
</li>
))}
</ul>
</NavigationMenuContent>
</NavigationMenuItem>
<NavigationMenuItem>
<NavigationMenuLink asChild>
<Link href="/docs">Documentation</Link>
</NavigationMenuLink>
</NavigationMenuItem>
</NavigationMenuList>
</NavigationMenu>
)
}
import { NavigationMenu } from "@strongtie/design-system/navigation-menu"Not installed yet? Add the package to your app:
npm install @strongtie/design-system
This module exports the following components:
NavigationMenuNavigationMenuContentNavigationMenuIndicatorNavigationMenuItemNavigationMenuLinkNavigationMenuListNavigationMenuTriggerNavigationMenuViewport<NavigationMenu>| Prop | Type | Default | Description |
|---|---|---|---|
viewport | boolean | - |