Getting Started
Components
Search for a command to run...
Navigation menus provide organized access to different sections of your application or website. They support dropdown panels with rich content, keyboard navigation, and automatically highlight the active page or section.
"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>
)
}
npm install @strongtie/design-system
import { NavigationMenu } from "@strongtie/design-system/navigation-menu"This module exports the following components:
NavigationMenuNavigationMenuContentNavigationMenuIndicatorNavigationMenuItemNavigationMenuLinkNavigationMenuListNavigationMenuTriggerNavigationMenuViewport<NavigationMenu>| Prop | Type | Default | Description |
|---|---|---|---|
viewport | boolean | - |
"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>
)
}
Components can be styled using the className prop. The design system uses Tailwind CSS for styling.
CSS classes used by this component:
navigation-menunavigation-menu-contentnavigation-menu-indicatornavigation-menu-itemnavigation-menu-linknavigation-menu-listnavigation-menu-triggernavigation-menu-viewportEnsure proper accessibility attributes are added when implementing this component.