// In your Payload CMS globals config
export const MainNav = {
  slug: "main-nav",
  fields: [
    {
      name: "items",
      type: "array",
      fields: [
        { name: "label", type: "text", localized: true, required: true },
        {
          name: "type",
          type: "select",
          options: [
            { label: "Link", value: "link" },
            { label: "Dropdown", value: "dropdown" },
          ],
        },
        {
          name: "href",
          type: "text",
          admin: { condition: (data, siblingData) => siblingData?.type === "link" },
        },
        {
          name: "children",
          type: "array",
          admin: { condition: (data, siblingData) => siblingData?.type === "dropdown" },
          fields: [
            { name: "label", type: "text", localized: true },
            { name: "description", type: "text", localized: true },
            { name: "href", type: "text" },
          ],
        },
      ],
    },
  ],
}

Rendering the Navigation

import {
  NavigationMenu,
  NavigationMenuList,
  NavigationMenuItem,
  NavigationMenuTrigger,
  NavigationMenuContent,
  NavigationMenuLink,
} from "@mordecai-design-system/ui"

export function MainNavigation({ items }) {
  return (
    <NavigationMenu>
      <NavigationMenuList>
        {items.map((item) => (
          <NavigationMenuItem key={item.label}>
            {item.type === "dropdown" ? (
              <>
                <NavigationMenuTrigger>{item.label}</NavigationMenuTrigger>
                <NavigationMenuContent>
                  <ul className="grid gap-3 p-4 w-[400px]">
                    {item.children.map((child) => (
                      <li key={child.href}>
                        <NavigationMenuLink href={child.href}>
                          <div className="font-medium">{child.label}</div>
                          <p className="text-muted-foreground">{child.description}</p>
                        </NavigationMenuLink>
                      </li>
                    ))}
                  </ul>
                </NavigationMenuContent>
              </>
            ) : (
              <NavigationMenuLink href={item.href}>
                {item.label}
              </NavigationMenuLink>
            )}
          </NavigationMenuItem>
        ))}
      </NavigationMenuList>
    </NavigationMenu>
  )
}

Basic Usage

Navigation MenuA site navigation with dropdown

Installation

pnpm add @corew500/ui

Usage

import {
  NavigationMenu,
  NavigationMenuList,
  NavigationMenuItem,
  NavigationMenuTrigger,
  NavigationMenuContent,
  NavigationMenuLink,
} from "@mordecai-design-system/ui"

<NavigationMenu>
  <NavigationMenuList>
    <NavigationMenuItem>
      <NavigationMenuTrigger>Getting started</NavigationMenuTrigger>
      <NavigationMenuContent>
        <ul className="grid gap-3 p-4 w-[400px]">
          <li>
            <NavigationMenuLink href="/docs">
              Documentation
            </NavigationMenuLink>
          </li>
        </ul>
      </NavigationMenuContent>
    </NavigationMenuItem>
    <NavigationMenuItem>
      <NavigationMenuLink href="/about">
        About
      </NavigationMenuLink>
    </NavigationMenuItem>
  </NavigationMenuList>
</NavigationMenu>

Examples

With Rich Content

<NavigationMenuContent>
  <ul className="grid w-[400px] gap-3 p-4 md:w-[500px] md:grid-cols-2">
    <li className="row-span-3">
      <NavigationMenuLink href="/" className="flex h-full flex-col justify-end rounded-md bg-gradient-to-b from-muted/50 to-muted p-6 no-underline">
        <div className="mb-2 text-lg font-medium">shadcn/ui</div>
        <p className="text-sm text-muted-foreground">
          Beautifully designed components
        </p>
      </NavigationMenuLink>
    </li>
    <li>
      <NavigationMenuLink href="/docs">
        <div className="font-medium">Introduction</div>
        <p className="text-muted-foreground">Get started with the basics</p>
      </NavigationMenuLink>
    </li>
  </ul>
</NavigationMenuContent>

Sub-components

| Component | Description | |-----------|-------------| | NavigationMenu | Root container | | NavigationMenuList | List of menu items | | NavigationMenuItem | Individual menu item | | NavigationMenuTrigger | Button that opens dropdown | | NavigationMenuContent | Dropdown content container | | NavigationMenuLink | Navigation link | | NavigationMenuIndicator | Visual indicator for active item |

Props

Prop	Type	Default	Description
`actionsRef`	RefObject<NavigationMenuRootActions>	—	A ref to imperative actions.
`onOpenChangeComplete`	(open: boolean) => void	—	Event handler called after any animations complete when the navigation menu is closed.
`value`	any	`null`	The controlled value of the navigation menu item that should be currently open. When non-nullish, the menu will be open. When nullish, the menu will be closed. To render an uncontrolled navigation menu, use the `defaultValue` prop instead.
`defaultValue`	any	`null`	The uncontrolled value of the item that should be initially selected. To render a controlled navigation menu, use the `value` prop instead.
`onValueChange`	(value: any, eventDetails: NavigationMenuRootChangeEventDetails) => void	—	Callback fired when the value changes.
`delay`	number	`50`	How long to wait before opening the navigation menu. Specified in milliseconds.
`closeDelay`	number	`50`	How long to wait before closing the navigation menu. Specified in milliseconds.
`orientation`	enum	`'horizontal'`	The orientation of the navigation menu.
`style`	enum	—	Style applied to the element, or a function that returns a style object based on the component’s state.
`className`	enum	—	CSS class applied to the element, or a function that returns a class based on the component’s state.
`render`	enum	—	Allows you to replace the component’s HTML element with a different tag, or compose it with another component. Accepts a `ReactElement` or a function that returns the element to render.

NavigationMenuContent

Prop	Type	Default	Description
`style`	enum	—	Style applied to the element, or a function that returns a style object based on the component’s state.
`className`	enum	—	CSS class applied to the element, or a function that returns a class based on the component’s state.
`render`	enum	—	Allows you to replace the component’s HTML element with a different tag, or compose it with another component. Accepts a `ReactElement` or a function that returns the element to render.

NavigationMenuLink

Prop	Type	Default	Description
`active`	enum	`false`	Whether the link is the currently active page.
`closeOnClick`	enum	`false`	Whether to close the navigation menu when the link is clicked.
`style`	enum	—	Style applied to the element, or a function that returns a style object based on the component’s state.
`className`	enum	—	CSS class applied to the element, or a function that returns a class based on the component’s state.
`render`	enum	—	Allows you to replace the component’s HTML element with a different tag, or compose it with another component. Accepts a `ReactElement` or a function that returns the element to render.

Navigation Menu

CMS Demo

Payload Global Example