Type Alias: NavigationItem

@arolariu/website

---

@arolariu/website / types / NavigationItem

Type Alias: NavigationItem

NavigationItem = object

Defined in: types/index.ts:403

Represents a navigation menu item with optional nested children.

Remarks

Purpose: Defines the structure for hierarchical navigation menus, supporting both flat and nested menu structures.

Properties:

• label: Display text for the navigation item (e.g., "Home", "Invoices", "Profile")
• href: Type-safe Next.js route path (enforced by Route type)
• children: Optional array of nested navigation items for dropdown/submenu support

Recursive Structure: The children property allows for arbitrary nesting depth, enabling complex menu hierarchies (e.g., "Products → Electronics → Laptops").

Type Safety: The href property uses Next.js's Route type, providing compile-time validation that routes exist in the application.

Usage Context:

• Header navigation menus
• Sidebar navigation
• Footer site maps
• Breadcrumb trails
• Mobile navigation drawers

Internationalization: Labels should be translated using next-intl. Store translation keys instead of hardcoded text for multi-language support.

Accessibility: When rendering, ensure:

• Proper ARIA attributes for dropdowns (aria-haspopup, aria-expanded)
• Keyboard navigation support (arrow keys for nested items)
• Focus management for interactive elements

Example

// Flat navigation
const simpleNav: NavigationItem = {
  label: "Home",
  href: "/"
};

// Nested navigation with children
const nestedNav: NavigationItem = {
  label: "Invoices",
  href: "/invoices",
  children: [
    { label: "All Invoices", href: "/invoices" },
    { label: "Create Invoice", href: "/invoices/create" },
    { label: "Archive", href: "/invoices/archive" }
  ]
};

// Deep nesting example
const deepNav: NavigationItem = {
  label: "Settings",
  href: "/settings",
  children: [
    {
      label: "Account",
      href: "/settings/account",
      children: [
        { label: "Profile", href: "/settings/account/profile" },
        { label: "Security", href: "/settings/account/security" }
      ]
    }
  ]
};

See

Route - Next.js type-safe route type

Properties

label

label: string

Defined in: types/index.ts:404

---

href

href: Route

Defined in: types/index.ts:405

---

children?

optional children?: NavigationItem[]

Defined in: types/index.ts:406