Koori UI
Components

GlassNavigationMenu

A collection of links for navigating websites with rich flyout panels.

Preview

Usage

import {
  GlassNavigationMenu,
  GlassNavigationMenuList,
  GlassNavigationMenuItem,
  GlassNavigationMenuTrigger,
  GlassNavigationMenuContent,
  GlassNavigationMenuLink,
} from "koori-ui";
 
<GlassNavigationMenu>
  <GlassNavigationMenuList>
    <GlassNavigationMenuItem>
      <GlassNavigationMenuTrigger>Getting Started</GlassNavigationMenuTrigger>
      <GlassNavigationMenuContent>
        <GlassNavigationMenuLink href="/docs">Introduction</GlassNavigationMenuLink>
      </GlassNavigationMenuContent>
    </GlassNavigationMenuItem>
  </GlassNavigationMenuList>
</GlassNavigationMenu>

Props

GlassNavigationMenu

PropTypeDefaultDescription
valuestring—Controlled active item value
defaultValuestring—Default active item value
onValueChange(value: string) => void—Fired when active item changes
orientation"horizontal" | "vertical""horizontal"Orientation of the menu
delayDurationnumber200Hover delay before content opens
PropTypeDefaultDescription
activebooleanfalseMark the link as currently active
onSelect(event) => void—Fired when the link is selected

All Radix NavigationMenu props are also supported.

Previous

GlassMenubar

Next

GlassPagination

On this page