fma-ui

Navigation Menu

Site-header navigation: a <nav> list of top-level links and disclosure dropdowns. A NavigationMenuItem holds either a NavigationMenuLink or a NavigationMenuTrigger (a button with aria-expanded) plus its NavigationMenuContent (a popover). Escape or a click outside closes the dropdown and returns focus to the trigger; following a link closes it too. Style plain links like triggers with navigationMenuTriggerStyle(), and mark the current page with aria-current="page". Dropdowns open on press; with openOnHover they also open when the pointer rests on a trigger (delay, closeDelay), as a non-modal "peek" that leaves focus alone, switches at once to another trigger and closes when the pointer leaves or on Escape. Pressing a peeked trigger keeps it open as a regular dropdown. Add NavigationMenuIndicator after the list for an arrow that slides under the open trigger. For app command menus use Menubar or DropdownMenu.

NavigationoriginalRegistry JSON

Installation

  1. 1

    Register the @fma-ui namespace in components.json (once)

    components.json
    {
  "registries": {
    "@fma-ui": "https://ui.fmartinsandre.dev.br/r/{name}.json"
  }
}
  2. 2

    Add the item

    pnpm dlx shadcn@latest add @fma-ui/navigation-menu

    Files land in components/fma-ui/navigation-menu.tsx; npm and registry dependencies are installed along with them.

Dependencies

npm
class-variance-authority@^0.7.1cn@^0.4.0lucide-react@^1.52.0react-aria-components@^1.21.1
Registry
None