React components
Navbar
A responsive navigation bar component with dropdown menus and mobile support.
Overview
The Navbar component provides a top-level navigation system. It supports multi-level dropdown menus, active state indication, and responsive behavior for mobile devices. It automatically highlights the current active link based on the URL.
Usage
import { Navbar } from '@/components/core/navbar';
function Header() {
const currentUrl = new URL(window.location.href);
return (
<header className="fixed top-0 w-full z-50">
<Navbar currentUrl={currentUrl} />
</header>
);
}Props
| Prop | Type | Default | Description |
|---|---|---|---|
currentUrl | URL | Required | The current URL object, used to determine the active menu item. |
className? | string | - | Optional CSS class names to apply to the navigation menu list. |
Configuration
The menu items are typically defined in a constant file (e.g., MENU in @/consts). The structure for menu items is:
interface NavItem {
label: string;
link: string;
items?: NavItem[]; // Optional submenu items
cols?: number; // Optional number of columns for submenu
desc?: string; // Optional description for submenu items
icon?: React.ComponentType; // Optional icon component
}