Navigation Menu

A collection of links for navigating websites.

Usage

Import the component. It's mandatory to wrap the whole component with the Tailwind tag.

const { Tailwind } = VM.require("uiisnear.near/widget/tailwind");
 
const {
  NavigationMenu,
  NavigationMenuContent,
  NavigationMenuItem,
  NavigationMenuLink,
  NavigationMenuList,
  NavigationMenuTrigger,
  navigationMenuTriggerClassname,
} = VM.require("uiisnear.near/widget/navigationMenu");
 
if (Tailwind == undefined) return "";

<Tailwind>
  <NavigationMenu>
    <NavigationMenuList>
      <NavigationMenuItem>
      <NavigationMenuTrigger>Item One</NavigationMenuTrigger>
      <NavigationMenuContent>
          <NavigationMenuLink>Link</NavigationMenuLink>
      </NavigationMenuContent>
      </NavigationMenuItem>
    </NavigationMenuList>
  </NavigationMenu>
</Tailwind>

API Reference

NavigationMenu

Contains all the parts of a navigation menu.

NavigationMenuList

Contains the top level menu items.

NavigationMenuItem

The button that toggles the content.

NavigationMenuTrigger

The button that toggles the content.

NavigationMenuContent

Contains the content associated with each trigger.

NavigationMenuLink

A navigational link.

NavigationMenuIndicator

An optional indicator element that renders below the list, is used to highlight the currently active trigger.

NavigationMenuViewport

An optional viewport element that is used to render active content outside of the list.

Classnames

Classnames available to customize the component.