tarve
Docs GitHub

NavigationMenu

Top-level navigation with dropdown link panels.

NavigationMenuProps packages/core/src/advanced-controls.ts:144 ↗

Import

import { NavigationMenu } from "@tarve/core";

Usage

NavigationMenu.tsx
import { NavigationMenu } from "@tarve/core";

let value = "docs";
let openValue: string | undefined;

<NavigationMenu
  value={value}
  openValue={openValue}
  items={[
    {
      value: "docs",
      label: "Docs",
      links: [
        { value: "start", label: "Getting started", description: "Install and run your first window." },
        { value: "components", label: "Components", description: "Every built-in control." },
      ],
    },
    { value: "blog", label: "Blog" },
  ]}
  onValueChange={(next) => {
    value = next;
  }}
  onOpenValueChange={(next) => {
    openValue = next;
  }}
/>

Props

PropTypeDefault
items required readonly NavigationMenuItem[]—
onOpenValueChange (value: string | undefined) => void—
onValueChange (value: string) => void—
openValue string—
value string—

Common props

Shared by every component. See descriptions →

childrenhighlightidkeymotionFromonHighlightonPasteonTransitionEndrovingGroupstyle

Types

NavigationMenuItem
interface NavigationMenuItem {
  value: string;
  label: string;
  disabled?: boolean;
  links?: readonly NavigationMenuLink[];
}