Navigation Menu - rafty/ui Docs

A collection of links for navigating websites. This component is made on top of Radix UIs Navigation Menu Component with our styling conventions. This component has been shared with you, ensuring that all its native properties are accessible. If you need to apply your own styling you can use the isBarebone (to remove styling from entire component and its subcomponents) or isUnstyled (to remove styling from a particular subcomponent).

Anatomy

Import all parts and piece them together.

import {
  NavigationMenu,
  NavigationMenuContent,
  NavigationMenuIndicator,
  NavigationMenuItem,
  NavigationMenuLink,
  NavigationMenuList,
  NavigationMenuListItem,
  NavigationMenuTrigger,
} from "@rafty/ui";

<NavigationMenu>
  <NavigationMenuListItem>
    <NavigationMenuItem>
      <NavigationMenuTrigger />
      <NavigationMenuContent>
        <NavigationMenuLink />
        <NavigationMenuList />
      </NavigationMenuContent>
    </NavigationMenuItem>
    <NavigationMenuIndicator />
  </NavigationMenuListItem>
</NavigationMenu>;

Usage

<NavigationMenu>
  <NavigationMenuList>
    <NavigationMenuItem>
      <NavigationMenuTrigger>
        Learn
      </NavigationMenuTrigger>
      <NavigationMenu.Content>
        <NavigationMenuListItem
          href="#"
          title="Stitches"
        >
          CSS-in-JS with best-in-class developer experience.
        </NavigationMenuListItem>
        <NavigationMenuListItem
          href="#"
          title="Colors"
        >
          Beautiful, thought-out palettes with auto dark mode.
        </NavigationMenuListItem>
        <NavigationMenuListItem
          href="#"
          title="Icons"
        >
          A crisp set of 15x15 icons, balanced and consistent.
        </NavigationMenuListItem>
      </NavigationMenu.Content>
    </NavigationMenuItem>
    <NavigationMenuItem>
      <NavigationMenuTrigger>
        Overview
      </NavigationMenuTrigger>
      <NavigationMenu.Content className="grid w-[300px] grid-cols-2 md:w-[600px]">
        <NavigationMenuListItem
          href="#"
          title="Introduction"
        >
          Build high-quality, accessible design systems and web apps.
        </NavigationMenuListItem>
        <NavigationMenuListItem
          href="#"
          title="Getting started"
        >
          A quick tutorial to get you up and running with Radix Primitives.
        </NavigationMenuListItem>
        <NavigationMenuListItem
          href="#"
          title="Styling"
        >
          Unstyled and compatible with any styling solution.
        </NavigationMenuListItem>
        <NavigationMenuListItem
          href="#"
          title="Animation"
        >
          Use CSS keyframes or any animation library of your choice.
        </NavigationMenuListItem>
        <NavigationMenuListItem
          href="#"
          title="Accessibility"
        >
          Tested in a range of browsers and assistive technologies.
        </NavigationMenuListItem>
        <NavigationMenuListItem
          href="#"
          title="Releases"
        >
          Radix Primitives releases and their changelogs.
        </NavigationMenuListItem>
      </NavigationMenu.Content>
    </NavigationMenuItem>
    <NavigationMenuItem>
      <NavigationMenuLink href="https://github.com/rhinobase/raftyui">
        Github
      </NavigationMenuLink>
    </NavigationMenuItem>
  </NavigationMenuList>
</NavigationMenu>

Content Size

Pass the size prop if you need to adjust the size of the navigation-menu content. Values can be sm, md, lg.

<NavigationMenu>
  <NavigationMenuList>
    <NavigationMenuItem>
      <NavigationMenuTrigger>
        Learn
      </NavigationMenuTrigger>
      <NavigationMenu.Content
        className="grid w-[300px] grid-cols-2 md:w-[600px]"
        size="sm"
      >
        <NavigationMenuListItem
          href="#"
          title="Stitches"
        >
          CSS-in-JS with best-in-class developer experience.
        </NavigationMenuListItem>
        <NavigationMenuListItem
          href="#"
          title="Colors"
        >
          Beautiful, thought-out palettes with auto dark mode.
        </NavigationMenuListItem>
        <NavigationMenuListItem
          href="#"
          title="Icons"
        >
          A crisp set of 15x15 icons, balanced and consistent.
        </NavigationMenuListItem>
      </NavigationMenu.Content>
    </NavigationMenuItem>
    <NavigationMenuItem>
      <NavigationMenuTrigger>
        Overview
      </NavigationMenuTrigger>
      <NavigationMenu.Content className="grid w-[300px] grid-cols-2 md:w-[600px]">
        <NavigationMenuListItem
          href="#"
          title="Introduction"
        >
          Build high-quality, accessible design systems and web apps.
        </NavigationMenuListItem>
        <NavigationMenuListItem
          href="#"
          title="Getting started"
        >
          A quick tutorial to get you up and running with Radix Primitives.
        </NavigationMenuListItem>
        <NavigationMenuListItem
          href="#"
          title="Styling"
        >
          Unstyled and compatible with any styling solution.
        </NavigationMenuListItem>
        <NavigationMenuListItem
          href="#"
          title="Animation"
        >
          Use CSS keyframes or any animation library of your choice.
        </NavigationMenuListItem>
        <NavigationMenuListItem
          href="#"
          title="Accessibility"
        >
          Tested in a range of browsers and assistive technologies.
        </NavigationMenuListItem>
        <NavigationMenuListItem
          href="#"
          title="Releases"
        >
          Radix Primitives releases and their changelogs.
        </NavigationMenuListItem>
      </NavigationMenu.Content>
    </NavigationMenuItem>
    <NavigationMenuItem>
      <NavigationMenuLink href="https://github.com/rhinobase/raftyui">
        Github
      </NavigationMenuLink>
    </NavigationMenuItem>
  </NavigationMenuList>
</NavigationMenu>

Barebone

Pass isBarebone prop to remove all style in Navigation Menu.

<NavigationMenu
  className="relative z-10 flex max-w-max flex-1 items-center justify-center"
  isBarebone
>
  <NavigationMenuList className="m-0 flex items-center justify-center rounded-md p-1">
    <NavigationMenuItem>
      <NavigationMenuTrigger className="data-[state=open]:bg-secondary-100 hover:bg-secondary-100 text-secondary-600 dark:text-secondary-300 dark:data-[state=open]:bg-secondary-700/20 dark:hover:bg-secondary-700/20 group flex select-none items-center justify-between gap-1.5 rounded-md px-3 py-2 text-base font-semibold outline-none">
        Learn
      </NavigationMenuTrigger>
      <NavigationMenu.Content className="animate-slide-down-fade dark:bg-secondary-800 absolute top-2.5 grid w-[300px] min-w-[220px] max-w-2xl origin-top grid-cols-2 rounded-md bg-white p-4 text-base drop-shadow-lg duration-200 md:w-[600px]">
        <NavigationMenuListItem
          href="#"
          title="Stitches"
        >
          CSS-in-JS with best-in-class developer experience.
        </NavigationMenuListItem>
        <NavigationMenuListItem
          href="#"
          title="Colors"
        >
          Beautiful, thought-out palettes with auto dark mode.
        </NavigationMenuListItem>
        <NavigationMenuListItem
          href="#"
          title="Icons"
        >
          A crisp set of 15x15 icons, balanced and consistent.
        </NavigationMenuListItem>
      </NavigationMenu.Content>
    </NavigationMenuItem>
    <NavigationMenuItem>
      <NavigationMenuTrigger className="data-[state=open]:bg-secondary-100 hover:bg-secondary-100 text-secondary-600 dark:text-secondary-300 dark:data-[state=open]:bg-secondary-700/20 dark:hover:bg-secondary-700/20 group flex select-none items-center justify-between gap-1.5 rounded-md px-3 py-2 text-base font-semibold outline-none">
        Overview
      </NavigationMenuTrigger>
      <NavigationMenu.Content className="animate-slide-down-fade dark:bg-secondary-800 absolute top-2.5 grid w-[300px] min-w-[220px] max-w-2xl origin-top grid-cols-2 rounded-md bg-white p-4 text-base drop-shadow-lg duration-200 md:w-[600px]">
        <NavigationMenuListItem
          href="#"
          title="Introduction"
        >
          Build high-quality, accessible design systems and web apps.
        </NavigationMenuListItem>
        <NavigationMenuListItem
          href="#"
          title="Getting started"
        >
          A quick tutorial to get you up and running with Radix Primitives.
        </NavigationMenuListItem>
        <NavigationMenuListItem
          href="#"
          title="Styling"
        >
          Unstyled and compatible with any styling solution.
        </NavigationMenuListItem>
        <NavigationMenuListItem
          href="#"
          title="Animation"
        >
          Use CSS keyframes or any animation library of your choice.
        </NavigationMenuListItem>
        <NavigationMenuListItem
          href="#"
          title="Accessibility"
        >
          Tested in a range of browsers and assistive technologies.
        </NavigationMenuListItem>
        <NavigationMenuListItem
          href="#"
          title="Releases"
        >
          Radix Primitives releases and their changelogs.
        </NavigationMenuListItem>
      </NavigationMenu.Content>
    </NavigationMenuItem>
    <NavigationMenuItem>
      <NavigationMenuLink
        className="hover:bg-secondary-100 text-secondary-600 dark:text-secondary-300 dark:hover:bg-secondary-700/20 flex select-none rounded-md px-3 py-2 font-semibold outline-none"
        href="https://github.com/rhinobase/raftyui"
      >
        Github
      </NavigationMenuLink>
    </NavigationMenuItem>
  </NavigationMenuList>
</NavigationMenu>

UnStlyed

<NavigationMenu>
  <NavigationMenuList>
    <NavigationMenuItem>
      <NavigationMenuTrigger>
        Learn
      </NavigationMenuTrigger>
      <NavigationMenu.Content
        className="animate-slide-down-fade dark:bg-secondary-800 absolute top-2.5 min-w-[220px] max-w-2xl origin-top rounded-md bg-white p-4 text-base drop-shadow-lg duration-200"
        isUnstyled
      >
        <NavigationMenuListItem
          href="#"
          title="Stitches"
        >
          CSS-in-JS with best-in-class developer experience.
        </NavigationMenuListItem>
        <NavigationMenuListItem
          href="#"
          title="Colors"
        >
          Beautiful, thought-out palettes with auto dark mode.
        </NavigationMenuListItem>
        <NavigationMenuListItem
          href="#"
          title="Icons"
        >
          A crisp set of 15x15 icons, balanced and consistent.
        </NavigationMenuListItem>
      </NavigationMenu.Content>
    </NavigationMenuItem>
    <NavigationMenuItem>
      <NavigationMenuTrigger>
        Overview
      </NavigationMenuTrigger>
      <NavigationMenu.Content className="grid w-[300px] grid-cols-2 md:w-[600px]">
        <NavigationMenuListItem
          href="#"
          title="Introduction"
        >
          Build high-quality, accessible design systems and web apps.
        </NavigationMenuListItem>
        <NavigationMenuListItem
          href="#"
          title="Getting started"
        >
          A quick tutorial to get you up and running with Radix Primitives.
        </NavigationMenuListItem>
        <NavigationMenuListItem
          href="#"
          title="Styling"
        >
          Unstyled and compatible with any styling solution.
        </NavigationMenuListItem>
        <NavigationMenuListItem
          href="#"
          title="Animation"
        >
          Use CSS keyframes or any animation library of your choice.
        </NavigationMenuListItem>
        <NavigationMenuListItem
          href="#"
          title="Accessibility"
        >
          Tested in a range of browsers and assistive technologies.
        </NavigationMenuListItem>
        <NavigationMenuListItem
          href="#"
          title="Releases"
        >
          Radix Primitives releases and their changelogs.
        </NavigationMenuListItem>
      </NavigationMenu.Content>
    </NavigationMenuItem>
    <NavigationMenuItem>
      <NavigationMenuLink href="https://github.com/rhinobase/raftyui">
        Github
      </NavigationMenuLink>
    </NavigationMenuItem>
  </NavigationMenuList>
</NavigationMenu>

API

Root

Property	Description	Type	Default
isBarebone	Removes style from whole component	`boolean`	-

List

Property	Description	Type	Default
isUnstyled	Removes style from component	`boolean`	`false`

Trigger

Property	Description	Type	Default
isUnstyled	Removes style from component	`boolean`	`false`

Content

Property	Description	Type	Default
isUnstyled	Removes style from component	`boolean`	`false`

Link

Property	Description	Type	Default
isUnstyled	Removes style from component	`boolean`	`false`