Lambda UI
v1.3.4
Stable

Navigation Menu

Navigation Menu component displays a hierarchical list of links for site navigation.

Playground

Experiment with all the properties of the NavigationMenu component in real time.

Properties
size

Controls the size of the menu items.

styleLines

Style of the connecting lines (if shown).

selectedStyle

Visual style for the selected item.

showLines

Displays connecting lines between parent and child items.

alwaysOpen

Keeps all menu items expanded by default.

Usage

import { NavigationMenu, NavigationMenuData } from "lambda-ui-components";
import { Home, User, Settings } from "lucide-react";

const menuData: NavigationMenuData[] = [
	{
		id: "home",
		label: "Home",
		path: "/home",
		icon: <Home size={16} />,
	},
	{
		id: "account",
		label: "Account",
		icon: <User size={16} />,
		children: [
			{
				id: "profile",
				label: "Profile",
				path: "/account/profile",
			},
		],
	},
];

export default function App() {
	return (
		<NavigationMenu 
			data={menuData} 
			currentPath="/home" 
			size="medium" 
		/>
	);
}

Custom Label Rendering

You can customize how menu labels are rendered using the renderLabel prop.

API Reference

Props

Prop
Default
Type
data
[]
NavigationMenuData[]
currentPath
undefined
string
size
"medium"
"small" | "medium" | "large"
showLines
false
boolean
styleLines
"solid"
"solid" | "dashed" | "dotted"
alwaysOpen
false
boolean
selectedStyle
"highlight"
"highlight" | "border"
defaultExpanded
[]
string[]
onNodeSelect
undefined
(id: string) => void
renderLabel
undefined
(node: NavigationMenuData) => ReactNode
The modern React component library.
© 2026 Lambda UI. Made with in Mexico by AletzMan.