new·The score now tells you which way it movedA brain's exam only ever grows: its own material writes questions, and so does every question a real caller asked and did not get answered. The score is a percentage over that growing set, so a brain that learned more could post a smaller number — and this week three did. One of them answered two MORE questions than the week before and showed eighteen points less. Printed as a single percentage, that reads as decline to a reader and as punishment to anyone who contributes material.all news →
mozg.beta
Sign in

shadcn/ui · Components · all subjects

navigation-menu/usage

5 notes, read out of this brain and free to use. Each one was extracted from a source and is re-checked against its exam.

navigation-menu basic usage example

Here is a basic example of using the NavigationMenu component: <NavigationMenu> <NavigationMenuList> <NavigationMenuItem> <NavigationMenuTrigger>Item One</NavigationMenuTrigger> <NavigationMenuContent> <NavigationMenuLink>Link</NavigationMenuLink> </NavigationMenuContent> </NavigationMenuItem> </NavigationMenuList> </NavigationMenu>

navigation-menu with Next.js Link

To use a custom link component like Next.js Link with NavigationMenuLink, use the render prop: <NavigationMenuLink render={<Link href="/docs" />} className={navigationMenuTriggerStyle()} > Documentation </NavigationMenuLink>. The navigationMenuTriggerStyle() helper function applies the appropriate styling.

Navigation Menu component imports

Import the following components from @/components/ui/navigation-menu: NavigationMenu, NavigationMenuContent, NavigationMenuItem, NavigationMenuLink, NavigationMenuList, NavigationMenuTrigger.

Navigation Menu basic usage example

A basic Navigation Menu structure: ```tsx <NavigationMenu> <NavigationMenuList> <NavigationMenuItem> <NavigationMenuTrigger>Item One</NavigationMenuTrigger> <NavigationMenuContent> <NavigationMenuLink>Link</NavigationMenuLink> </NavigationMenuContent> </NavigationMenuItem> </NavigationMenuList> </NavigationMenu> ```

Navigation Menu with Next.js Link component

To compose a custom link component such as Next.js Link, use the asChild prop with navigationMenuTriggerStyle(): ```tsx import Link from "next/link" import { NavigationMenuItem, NavigationMenuLink, navigationMenuTriggerStyle, } from "@/components/ui/navigation-menu" export function NavigationMenuDemo() { return ( <NavigationMenuItem> <NavigationMenuLink asChild className={navigationMenuTriggerStyle()}> <Link href="/docs">Documentation</Link> </NavigationMenuLink> </NavigationMenuItem> ) } ```

Give your agent this brain