MenuBar

A flexible navigation menu bar component that supports dropdown menus, grid layouts, and featured sections. Built for responsive navigation with support for both Next.js and React Router.

Features

Multiple Layout Types - Support for simple links, dropdowns, grids, and featured sections
Router Compatibility - Works with Next.js Link, React Router, and standard anchor tags
Responsive Design - Mobile-friendly with collapsible viewport option
Accessible Navigation - Built on Radix UI NavigationMenu with proper ARIA support
Customizable Styling - Flexible styling options for different menu types
Icon Support - Built-in support for icons in menu items and featured sections

Installation

pnpm add @helgadigitals/vera-ui

npm install @helgadigitals/vera-ui

yarn add @helgadigitals/vera-ui

Usage

components/navigation-examples/menubar-examples.tsx→BasicMenuBarExample()✓ Auto-extracted

import { MenuBar } from "@helgadigitals/vera-ui";
import {
  Users,
  Settings,
  FileText,
  Package,
  Info,
  Mail,
  Image,
  Video,
  Star,
  Zap,
  BookOpen,
  Lightbulb,
  MessageCircle,
  Palette,
  Camera,
  Headphones,
  Globe,
  Phone,
} from "lucide-react";
function BasicMenuBarExample() {
  const basicItems = [
    {
      trigger: "Home",
      type: "link" as const,
      href: "/",
    },
    {
      trigger: "Products",
      type: "dropdown" as const,
      items: [
        { title: "All Products", href: "#" },
        { title: "Featured", href: "#" },
        { title: "New Arrivals", href: "#" },
      ],
    },
    {
      trigger: "About",
      type: "link" as const,
      href: "#",
    },
    {
      trigger: "Contact",
      type: "link" as const,
      href: "#",
    },
  ];

  return (
    <div className="relative overflow-visible z-10">
      <div className="flex justify-center mb-80 overflow-visible">
        <MenuBar items={basicItems} />
      </div>
    </div>
  );
}

import { MenuBar } from "@helgadigitals/vera-ui";import {  Users,  Settings,  FileText,  Package,  Info,  Mail,  Image,  Video,  Star,  Zap,  BookOpen,  Lightbulb,  MessageCircle,  Palette,  Camera,  Headphones,  Globe,  Phone,} from "lucide-react";function BasicMenuBarExample() {  const basicItems = [    {      trigger: "Home",      type: "link" as const,      href: "/",    },    {      trigger: "Products",      type: "dropdown" as const,      items: [        { title: "All Products", href: "#" },        { title: "Featured", href: "#" },        { title: "New Arrivals", href: "#" },      ],    },    {      trigger: "About",      type: "link" as const,      href: "#",    },    {      trigger: "Contact",      type: "link" as const,      href: "#",    },  ];  return (    <div className="relative overflow-visible z-10">      <div className="flex justify-center mb-80 overflow-visible">        <MenuBar items={basicItems} />      </div>    </div>  );}

components/navigation-examples/menubar-examples.tsx→DropdownMenuBarExample()✓ Auto-extracted

import { MenuBar } from "@helgadigitals/vera-ui";
import {
  Users,
  Settings,
  FileText,
  Package,
  Info,
  Mail,
  Image,
  Video,
  Star,
  Zap,
  BookOpen,
  Lightbulb,
  MessageCircle,
  Palette,
  Camera,
  Headphones,
  Globe,
  Phone,
} from "lucide-react";
function DropdownMenuBarExample() {
  const dropdownItems = [
    {
      trigger: "Services",
      type: "dropdown" as const,
      items: [
        {
          title: "Web Development",
          href: "#",
          description: "Custom web applications and websites",
          icon: <Package className="h-4 w-10" />,
        },
        {
          title: "Consulting",
          href: "#",
          description: "Technical consulting and strategy",
          icon: <Info className="h-4 w-4" />,
        },
        {
          title: "Support",
          href: "#",
          description: "24/7 customer support",
          icon: <Mail className="h-4 w-4" />,
        },
      ],
    },
    {
      trigger: "Company",
      type: "dropdown" as const,
      items: [
        {
          title: "About Us",
          href: "#",
          description: "Learn about our mission and team",
          icon: <Users className="h-4 w-4" />,
        },
        {
          title: "Careers",
          href: "#",
          description: "Join our growing team",
          icon: <Star className="h-4 w-4" />,
        },
        {
          title: "Contact",
          href: "#",
          description: "Get in touch with us",
          icon: <Phone className="h-4 w-4" />,
        },
      ],
    },
  ];

  return (
    <div className="relative overflow-visible z-10 w-auto">
      <div className="flex justify-center mb-80 overflow-visible">
        <MenuBar items={dropdownItems} />
      </div>
    </div>
  );
}

import { MenuBar } from "@helgadigitals/vera-ui";import {  Users,  Settings,  FileText,  Package,  Info,  Mail,  Image,  Video,  Star,  Zap,  BookOpen,  Lightbulb,  MessageCircle,  Palette,  Camera,  Headphones,  Globe,  Phone,} from "lucide-react";function DropdownMenuBarExample() {  const dropdownItems = [    {      trigger: "Services",      type: "dropdown" as const,      items: [        {          title: "Web Development",          href: "#",          description: "Custom web applications and websites",          icon: <Package className="h-4 w-10" />,        },        {          title: "Consulting",          href: "#",          description: "Technical consulting and strategy",          icon: <Info className="h-4 w-4" />,        },        {          title: "Support",          href: "#",          description: "24/7 customer support",          icon: <Mail className="h-4 w-4" />,        },      ],    },    {      trigger: "Company",      type: "dropdown" as const,      items: [        {          title: "About Us",          href: "#",          description: "Learn about our mission and team",          icon: <Users className="h-4 w-4" />,        },        {          title: "Careers",          href: "#",          description: "Join our growing team",          icon: <Star className="h-4 w-4" />,        },        {          title: "Contact",          href: "#",          description: "Get in touch with us",          icon: <Phone className="h-4 w-4" />,        },      ],    },  ];  return (    <div className="relative overflow-visible z-10 w-auto">      <div className="flex justify-center mb-80 overflow-visible">        <MenuBar items={dropdownItems} />      </div>    </div>  );}

Grid Layout

components/navigation-examples/menubar-examples.tsx→GridMenuBarExample()✓ Auto-extracted

import { MenuBar } from "@helgadigitals/vera-ui";
import {
  Users,
  Settings,
  FileText,
  Package,
  Info,
  Mail,
  Image,
  Video,
  Star,
  Zap,
  BookOpen,
  Lightbulb,
  MessageCircle,
  Palette,
  Camera,
  Headphones,
  Globe,
  Phone,
} from "lucide-react";
function GridMenuBarExample() {
  const gridItems = [
    {
      trigger: "Resources",
      type: "grid" as const,
      items: [
        {
          title: "Documentation",
          href: "/docs",
          description: "Complete API documentation and guides",
        },
        {
          title: "Templates",
          href: "#",
          description: "Ready-to-use component templates",
        },
        {
          title: "Examples",
          href: "#",
          description: "Live examples and code samples",
        },
        {
          title: "Community",
          href: "#",
          description: "Join our developer community",
        },
      ],
      gridClassName: "md:grid-cols-2 lg:grid-cols-2",
    },
    {
      trigger: "Tools",
      type: "grid" as const,
      items: [
        {
          title: "Design System",
          href: "#",
          description: "Complete design tokens and guidelines",
        },
        {
          title: "Icon Library",
          href: "#",
          description: "Thousands of beautiful icons",
        },
        {
          title: "Color Palette",
          href: "#",
          description: "Curated color combinations",
        },
        {
          title: "Typography",
          href: "#",
          description: "Font combinations and styles",
        },
      ],
      gridClassName: "md:grid-cols-2",
    },
  ];

  return (
    <div className="relative overflow-visible z-10">
      <div className="flex justify-center mb-80 overflow-visible">
        <MenuBar items={gridItems} />
      </div>
    </div>
  );
}

import { MenuBar } from "@helgadigitals/vera-ui";import {  Users,  Settings,  FileText,  Package,  Info,  Mail,  Image,  Video,  Star,  Zap,  BookOpen,  Lightbulb,  MessageCircle,  Palette,  Camera,  Headphones,  Globe,  Phone,} from "lucide-react";function GridMenuBarExample() {  const gridItems = [    {      trigger: "Resources",      type: "grid" as const,      items: [        {          title: "Documentation",          href: "/docs",          description: "Complete API documentation and guides",        },        {          title: "Templates",          href: "#",          description: "Ready-to-use component templates",        },        {          title: "Examples",          href: "#",          description: "Live examples and code samples",        },        {          title: "Community",          href: "#",          description: "Join our developer community",        },      ],      gridClassName: "md:grid-cols-2 lg:grid-cols-2",    },    {      trigger: "Tools",      type: "grid" as const,      items: [        {          title: "Design System",          href: "#",          description: "Complete design tokens and guidelines",        },        {          title: "Icon Library",          href: "#",          description: "Thousands of beautiful icons",        },        {          title: "Color Palette",          href: "#",          description: "Curated color combinations",        },        {          title: "Typography",          href: "#",          description: "Font combinations and styles",        },      ],      gridClassName: "md:grid-cols-2",    },  ];  return (    <div className="relative overflow-visible z-10">      <div className="flex justify-center mb-80 overflow-visible">        <MenuBar items={gridItems} />      </div>    </div>  );}

Featured Section

components/navigation-examples/menubar-examples.tsx→FeaturedMenuBarExample()✓ Auto-extracted

import { MenuBar } from "@helgadigitals/vera-ui";
import {
  Users,
  Settings,
  FileText,
  Package,
  Info,
  Mail,
  Image,
  Video,
  Star,
  Zap,
  BookOpen,
  Lightbulb,
  MessageCircle,
  Palette,
  Camera,
  Headphones,
  Globe,
  Phone,
} from "lucide-react";
function FeaturedMenuBarExample() {
  const featuredItems = [
    {
      trigger: "Solutions",
      type: "featured" as const,
      featured: {
        href: "#",
        title: "Enterprise Solutions",
        description:
          "Scalable solutions for large organizations with advanced security and support.",
        className: "bg-gradient-to-br from-blue-500 to-purple-600 text-white",
      },
      items: [
        {
          title: "Startup Plan",
          href: "#",
          description: "Perfect for growing startups",
        },
        {
          title: "Business Plan",
          href: "#",
          description: "Advanced features for businesses",
        },
        {
          title: "Developer Tools",
          href: "#",
          description: "APIs and integrations for developers",
        },
      ],
    },
    {
      trigger: "Products",
      type: "featured" as const,
      featured: {
        href: "#",
        title: "Premium Suite",
        description:
          "Our flagship product with all premium features and priority support.",
        className: "bg-gradient-to-br from-orange-400 to-red-500 text-white",
      },
      items: [
        {
          title: "Basic Plan",
          href: "#",
          description: "Essential features for individuals",
        },
        {
          title: "Pro Plan",
          href: "#",
          description: "Advanced features for professionals",
        },
        {
          title: "Team Plan",
          href: "#",
          description: "Collaboration tools for teams",
        },
      ],
    },
  ];

  return (
    <div className="relative overflow-visible z-10">
      <div className="flex justify-center mb-80 overflow-visible">
        <MenuBar items={featuredItems} />
      </div>
    </div>
  );
}

import { MenuBar } from "@helgadigitals/vera-ui";import {  Users,  Settings,  FileText,  Package,  Info,  Mail,  Image,  Video,  Star,  Zap,  BookOpen,  Lightbulb,  MessageCircle,  Palette,  Camera,  Headphones,  Globe,  Phone,} from "lucide-react";function FeaturedMenuBarExample() {  const featuredItems = [    {      trigger: "Solutions",      type: "featured" as const,      featured: {        href: "#",        title: "Enterprise Solutions",        description:          "Scalable solutions for large organizations with advanced security and support.",        className: "bg-gradient-to-br from-blue-500 to-purple-600 text-white",      },      items: [        {          title: "Startup Plan",          href: "#",          description: "Perfect for growing startups",        },        {          title: "Business Plan",          href: "#",          description: "Advanced features for businesses",        },        {          title: "Developer Tools",          href: "#",          description: "APIs and integrations for developers",        },      ],    },    {      trigger: "Products",      type: "featured" as const,      featured: {        href: "#",        title: "Premium Suite",        description:          "Our flagship product with all premium features and priority support.",        className: "bg-gradient-to-br from-orange-400 to-red-500 text-white",      },      items: [        {          title: "Basic Plan",          href: "#",          description: "Essential features for individuals",        },        {          title: "Pro Plan",          href: "#",          description: "Advanced features for professionals",        },        {          title: "Team Plan",          href: "#",          description: "Collaboration tools for teams",        },      ],    },  ];  return (    <div className="relative overflow-visible z-10">      <div className="flex justify-center mb-80 overflow-visible">        <MenuBar items={featuredItems} />      </div>    </div>  );}

Responsive Navigation

Try resizing your browser

components/navigation-examples/menubar-examples.tsx→ResponsiveMenuBarExample()✓ Auto-extracted

import { MenuBar } from "@helgadigitals/vera-ui";
import {
  Users,
  Settings,
  FileText,
  Package,
  Info,
  Mail,
  Image,
  Video,
  Star,
  Zap,
  BookOpen,
  Lightbulb,
  MessageCircle,
  Palette,
  Camera,
  Headphones,
  Globe,
  Phone,
} from "lucide-react";
function ResponsiveMenuBarExample() {
  const responsiveItems = [
    {
      trigger: "Dashboard",
      type: "link" as const,
      href: "#",
    },
    {
      trigger: "Quick Actions",
      type: "dropdown" as const,
      items: [
        {
          title: "Create Project",
          href: "#",
          description: "Start a new project",
          icon: <Zap className="h-4 w-4" />,
        },
        {
          title: "Upload Files",
          href: "#",
          description: "Upload media files",
          icon: <Image className="h-4 w-4" />,
        },
        {
          title: "Invite Team",
          href: "#",
          description: "Add team members",
          icon: <Users className="h-4 w-4" />,
        },
      ],
    },
    {
      trigger: "Workspace",
      type: "featured" as const,
      featured: {
        href: "#",
        title: "Premium Workspace",
        description: "Unlock advanced collaboration features and unlimited storage.",
        className: "bg-gradient-to-br from-purple-500 to-pink-600 text-white",
      },
      items: [
        {
          title: "Projects",
          href: "#",
          description: "Manage your projects",
        },
        {
          title: "Team",
          href: "#",
          description: "Collaborate with team members",
        },
        {
          title: "Settings",
          href: "#",
          description: "Configure workspace settings",
        },
      ],
    },
  ];

  return (
    <div className="relative overflow-visible z-10">
      <div className="bg-gradient-to-r from-gray-50 to-gray-100 dark:from-gray-900 dark:to-gray-800 p-4">
        <div className="flex items-center justify-between mb-4 overflow-visible">
          <h3 className="text-sm font-medium text-muted-foreground">
            Responsive Navigation
          </h3>
          <span className="text-xs text-muted-foreground">
            Try resizing your browser
          </span>
        </div>
        <div className="flex justify-center">
          <MenuBar items={responsiveItems} viewport={true} />
        </div>
      </div>
    </div>
  );
}

import { MenuBar } from "@helgadigitals/vera-ui";import {  Users,  Settings,  FileText,  Package,  Info,  Mail,  Image,  Video,  Star,  Zap,  BookOpen,  Lightbulb,  MessageCircle,  Palette,  Camera,  Headphones,  Globe,  Phone,} from "lucide-react";function ResponsiveMenuBarExample() {  const responsiveItems = [    {      trigger: "Dashboard",      type: "link" as const,      href: "#",    },    {      trigger: "Quick Actions",      type: "dropdown" as const,      items: [        {          title: "Create Project",          href: "#",          description: "Start a new project",          icon: <Zap className="h-4 w-4" />,        },        {          title: "Upload Files",          href: "#",          description: "Upload media files",          icon: <Image className="h-4 w-4" />,        },        {          title: "Invite Team",          href: "#",          description: "Add team members",          icon: <Users className="h-4 w-4" />,        },      ],    },    {      trigger: "Workspace",      type: "featured" as const,      featured: {        href: "#",        title: "Premium Workspace",        description: "Unlock advanced collaboration features and unlimited storage.",        className: "bg-gradient-to-br from-purple-500 to-pink-600 text-white",      },      items: [        {          title: "Projects",          href: "#",          description: "Manage your projects",        },        {          title: "Team",          href: "#",          description: "Collaborate with team members",        },        {          title: "Settings",          href: "#",          description: "Configure workspace settings",        },      ],    },  ];  return (    <div className="relative overflow-visible z-10">      <div className="bg-gradient-to-r from-gray-50 to-gray-100 dark:from-gray-900 dark:to-gray-800 p-4">        <div className="flex items-center justify-between mb-4 overflow-visible">          <h3 className="text-sm font-medium text-muted-foreground">            Responsive Navigation          </h3>          <span className="text-xs text-muted-foreground">            Try resizing your browser          </span>        </div>        <div className="flex justify-center">          <MenuBar items={responsiveItems} viewport={true} />        </div>      </div>    </div>  );}

Router Integration

The MenuBar component automatically detects and works with different routing libraries:

Next.js

import Link from 'next/link'
import { MenuBar } from '@helgadigitals/vera-ui'

const items = [
  { type: 'link', trigger: 'Home', href: '/' },
  { type: 'link', trigger: 'About', href: '/about' }
]

function Navigation() {
  return (
    <MenuBar 
      items={items} 
      LinkComponent={Link}
    />
  )
}

React Router

import { Link } from 'react-router-dom'
import { MenuBar } from '@helgadigitals/vera-ui'

const items = [
  { type: 'link', trigger: 'Dashboard', href: '/' },
  { type: 'link', trigger: 'Profile', href: '/profile' }
]

function Navigation() {
  return (
    <MenuBar 
      items={items} 
      LinkComponent={Link}
    />
  )
}

Standard HTML

import { MenuBar } from '@helgadigitals/vera-ui'

const items = [
  { type: 'link', trigger: 'Home', href: '/' },
  { type: 'link', trigger: 'Contact', href: '/contact' }
]

function Navigation() {
  return <MenuBar items={items} /> // Uses anchor tags by default
}

API Reference

MenuBar

Prop

Type

MenuItemConfig

Prop

Type

MenuLink

Prop

Type

FeaturedSection

Prop

Type

Use Cases

Main navigation - Primary site navigation with dropdowns
Product menus - Showcase products with featured sections
Service navigation - Organize services into logical groups
Documentation navigation - Structure docs with grid layouts

Application Headers

Dashboard navigation - Quick access to app sections
Admin panels - Organize admin functions by category
User menus - Profile, settings, and account actions
Tool navigation - Group related tools and features

Category menus - Product categories with grid layouts
Featured products - Highlight special offers or new items
Quick links - Direct access to cart, wishlist, account
Brand navigation - Showcase different product lines

Content Platforms

Content categories - Articles, videos, tutorials organized by topic
Creator tools - Dashboard, analytics, content management
Community features - Forums, groups, events navigation
Help and support - Documentation, contact, FAQ sections

Accessibility

The MenuBar component follows WAI-ARIA guidelines for navigation menus:

Keyboard Navigation - Full keyboard support with arrow keys and Enter/Space
Focus Management - Proper focus indicators and focus trapping
Screen Readers - Descriptive labels and role attributes
ARIA States - Proper expanded/collapsed states for dropdowns

Keyboard Navigation: Use arrow keys to navigate between menu items, Enter/Space to activate items, and Escape to close dropdowns.

Best Practices

Content Organization

Structure menu items logically and limit nesting depth:

// Good: Logical grouping with clear hierarchy
const items = [
  { type: 'link', trigger: 'Home', href: '/' },
  {
    type: 'dropdown',
    trigger: 'Products',
    items: [
      { title: 'Web Apps', href: '/products/web', description: 'Modern web applications' },
      { title: 'Mobile Apps', href: '/products/mobile', description: 'iOS and Android apps' }
    ]
  }
]

// Avoid: Too many nested levels or unclear grouping

Performance Optimization

Use featured sections strategically to highlight important content:

// Good: Use featured sections for key destinations
{
  type: 'featured',
  trigger: 'Solutions',
  featured: {
    href: '/enterprise',
    title: 'Enterprise Solutions',
    description: 'Scalable solutions for large organizations'
  },
  items: [
    { title: 'Small Business', href: '/solutions/small' },
    { title: 'Startups', href: '/solutions/startup' }
  ]
}

Responsive Design

Consider mobile users with appropriate viewport settings:

// Enable viewport for complex dropdown content
<MenuBar items={items} viewport={true} />

// Keep it simple for mobile-first designs
<MenuBar items={simpleItems} viewport={false} />

Styling

The MenuBar component uses Tailwind CSS classes and can be customized:

<MenuBar 
  items={items}
  className="bg-primary text-primary-foreground"
  // Custom grid layouts for dropdown content
  items={[
    {
      type: 'grid',
      trigger: 'Services',
      gridClassName: 'grid-cols-3 gap-4',
      items: services
    }
  ]}
/>

NavigationMenu - Lower-level navigation menu primitive
Breadcrumb - Hierarchical navigation trail
Sidebar - Vertical navigation for applications
DropdownMenu - Context menus and actions

MenuBar

Features

Installation

Usage

Basic Menu Bar

Grid Layout

Featured Section

Responsive Menu

Responsive Navigation

Router Integration

Next.js

React Router

Standard HTML

API Reference

MenuBar

MenuItemConfig

MenuLink

FeaturedSection

Use Cases

Website Navigation

Application Headers

E-commerce Navigation

Content Platforms

Accessibility

Best Practices

Content Organization

Performance Optimization

Responsive Design

Styling

On this page