UI Thing

Navigation Menu

A collection of links for navigating websites.

Radix-Vue
API Reference

Source code

Click here 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.

Vertical Navigation Menu

We can change the orientation of the Navigation Menu to vertical by using the orientation prop.

To get things to look how we want, we would then need to add some custom styles.

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.