ObjectUIComponentsBasic
Navigation Menu
Accessible navigation menu with dropdown support
The Navigation Menu component provides an accessible menu for site navigation.
Basic Usage
Site Navigation
{
"type": "navigation-menu",
"items": [
{
"label": "Home",
"href": "/"
},
{
"label": "Products",
"items": [
{
"label": "All Products",
"href": "/products"
},
{
"label": "New Arrivals",
"href": "/products/new"
},
{
"label": "Best Sellers",
"href": "/products/popular"
}
]
},
{
"label": "About",
"href": "/about"
},
{
"label": "Contact",
"href": "/contact"
}
]
}With Descriptions
Documentation Nav
{
"type": "navigation-menu",
"items": [
{
"label": "Getting Started",
"items": [
{
"label": "Introduction",
"description": "Learn the basics",
"href": "/docs/intro"
},
{
"label": "Installation",
"description": "Install the package",
"href": "/docs/install"
},
{
"label": "Quick Start",
"description": "Build your first app",
"href": "/docs/quick-start"
}
]
}
]
}Schema
interface NavigationMenuItem {
label: string;
href?: string;
description?: string;
icon?: string;
items?: NavigationMenuItem[]; // Submenu items
}
interface NavigationMenuSchema {
type: 'navigation-menu';
items: NavigationMenuItem[]; // Menu items
className?: string;
}