UI Thing

Navigation Menu

A collection of links for navigating websites.

Reka UI
API Reference

Source code

Click to see the source code for this component on GitHub. Feel free to copy it and adjust it for your own use.

Installation

npx ui-thing@latest add navigation-menu

Anatomy

<template>
  <UiNavigationMenu>
    <UiNavigationMenuList>
      <UiNavigationMenuItem>
        <UiNavigationMenuTrigger />
        <UiNavigationMenuContent>
          <NavigationMenuLink />
        </UiNavigationMenuContent>
      </UiNavigationMenuItem>

      <UiNavigationMenuItem>
        <NavigationMenuLink />
      </UiNavigationMenuItem>

      <UiNavigationMenuItem>
        <UiNavigationMenuTrigger />
        <UiNavigationMenuContent>
          <UiNavigationMenuSub>
            <UiNavigationMenuList />
          </UiNavigationMenuSub>
        </UiNavigationMenuContent>
      </UiNavigationMenuItem>
    </UiNavigationMenuList>
  </UiNavigationMenu>
</template>

Usage

Horizontal Navigation Menu

The default orientation of the Navigation Menu is horizontal.

Shadcn UI

The default orientation of the Navigation Menu is horizontal.

Navbar

A navbar to use in your app. It is rendered as a header element by default but can be changed to a div with the as props.

Number Field

A number field allows a user to enter a number and increment or decrement the value using stepper buttons.