Reddot UI Library

Docs
Navigation Menu

Navigation Menu

A collection of links for navigating websites.

Installation

$npx shadcn@latest add https://reddot.dottools.xyz/r/navigation-menu.json

Utilisation

import {
  NavigationMenu,
  NavigationMenuContent,
  NavigationMenuItem,
  NavigationMenuLink,
  NavigationMenuList,
  NavigationMenuTrigger,
  navigationMenuTriggerStyle
} from "@/components/ui/navigation-menu"
 
export function NavigationMenuDemo() {
  return (
    <NavigationMenu>
      <NavigationMenuList>
        <NavigationMenuItem>
          <NavigationMenuTrigger>Item One</NavigationMenuTrigger>
          <NavigationMenuContent>
            <NavigationMenuLink>Link</NavigationMenuLink>
          </NavigationMenuContent>
        </NavigationMenuItem>
      </NavigationMenuList>
    </NavigationMenu>
  )
}

Composant Link

Vous pouvez utiliser la prop asChild pour faire qu'un autre composant ressemble à un déclencheur de menu de navigation :

import { Link } from "next/link"
 
export function NavigationMenuDemo() {
  return (
    <NavigationMenuItem>
      <NavigationMenuLink asChild>
        <Link href="/docs">Documentation</Link>
      </NavigationMenuLink>
    </NavigationMenuItem>
  )
}

API Reference

NavigationMenu

Contient tous les éléments du menu de navigation.

PropTypeDefaultDescription
defaultValuestring-La valeur de l'élément qui doit être ouvert lors du rendu initial.
valuestring-La valeur contrôlée de l'élément à ouvrir. Doit être utilisée avec onValueChange.
onValueChange(value: string) => void-Gestionnaire d'événement appelé lorsque la valeur change.
delayDurationnumber200La durée à partir du moment où la souris entre dans un déclencheur jusqu'à l'ouverture du contenu.
skipDelayDurationnumber300Durée pendant laquelle un utilisateur peut passer directement à d'autres déclencheurs sans encourir de délai.
dir"ltr" | "rtl"-La direction de lecture du menu de navigation.
orientation"horizontal" | "vertical""horizontal"L'orientation du menu de navigation.

NavigationMenuList

Contient les éléments de niveau supérieur du menu de navigation.

NavigationMenuItem

Un élément de menu de navigation de niveau supérieur, contient un déclencheur avec une combinaison de contenu.

NavigationMenuTrigger

Le bouton qui bascule le contenu. Par défaut, le NavigationMenuContent se positionnera contre le déclencheur.

PropTypeDefaultDescription
onPointerMovePointerEventHandler-Gestionnaire d'événement appelé lorsque le pointeur se déplace.
onPointerLeavePointerEventHandler-Gestionnaire d'événement appelé lorsque le pointeur quitte.

NavigationMenuContent

Le composant qui apparaît lorsque le menu est ouvert.

PropTypeDefaultDescription
onPointerMovePointerEventHandler-Gestionnaire d'événement appelé lorsque le pointeur se déplace.
onPointerLeavePointerEventHandler-Gestionnaire d'événement appelé lorsque le pointeur quitte.
forceMountbooleanfalseUtilisé pour forcer le montage lorsque plus de contrôle est nécessaire.

NavigationMenuLink

Un lien de menu de navigation.

PropTypeDefaultDescription
activebooleanfalseUtilisé pour indiquer le lien actif.
onSelect(event: Event) => void-Gestionnaire d'événement appelé lorsque l'utilisateur sélectionne un lien.

Références