Skip to main content

​
Basic Usage

​
Static Links

​
Full Example

​
Usage in Gaia

A polished navigation experience. Smooth animations, flexible layouts, and support for both dropdown menus and direct links.

​
Installation

    ​
    Usage

    import { NavbarWithMenu } from "@/components/ui/navbar-menu";
import { HugeiconsIcon, Message01Icon } from "@/components/icons";

export default function Example() {
  const sections = [
    {
      id: "product",
      gridLayout: "grid w-full grid-cols-2 gap-4",
      links: [
        {
          label: "Get Started",
          href: "/login",
          description: "Sign Up / Login",
          icon: <HugeiconsIcon icon={Message01Icon} size={20} />,
        },
        {
          label: "Pricing",
          href: "/pricing",
          description: "Choose your plan",
        },
      ],
    },
  ];

  return (
    <NavbarWithMenu
      sections={sections}
      navItems={[
        { type: "dropdown", label: "Product", menu: "product" },
        { type: "link", label: "About", href: "/about" },
      ]}
    />
  );
}

    ​
    Examples

    ​
    With Background Images

    Links can include background images for a more visual experience: 
    const sections = [
  {
    id: "features",
    gridLayout: "grid w-full grid-cols-2 gap-4",
    links: [
      {
        label: "AI Assistant",
        href: "/features/ai",
        description: "Powered by GPT-4",
        backgroundImage: "/images/ai-feature.jpg",
        rowSpan: 2,
      },
      {
        label: "Analytics",
        href: "/features/analytics",
        description: "Real-time insights",
      },
    ],
  },
];

    ​
    Custom Grid Layouts

    Customize the grid layout for each section: 
    const sections = [
  {
    id: "resources",
    gridLayout: "grid w-full grid-cols-3 gap-3",
    links: [
      { label: "Docs", href: "/docs" },
      { label: "Blog", href: "/blog" },
      { label: "API", href: "/api" },
    ],
  },
];

    ​
    Mixed Navigation Items

    Combine dropdown menus with direct links: 
    <NavbarWithMenu
  sections={sections}
  navItems={[
    { type: "dropdown", label: "Product", menu: "product" },
    { type: "link", label: "Pricing", href: "/pricing" },
    { type: "dropdown", label: "Resources", menu: "resources" },
    { type: "link", label: "Contact", href: "/contact" },
  ]}
/>

    ​
    Custom Logo and CTA

    <NavbarWithMenu
  sections={sections}
  navItems={navItems}
  logo={<img src="/logo.svg" alt="Logo" />}
  cta={<Button>Sign Up Free</Button>}
/>

    ​
    Span Multiple Rows

    Make important links take up more space: 
    const links = [
  {
    label: "Featured Product",
    href: "/featured",
    description: "Our latest innovation",
    backgroundImage: "/featured.jpg",
    rowSpan: 2, // Takes up 2 rows
  },
  {
    label: "Other Link",
    href: "/other",
  },
];

    ​
    Features

    • Smooth Animations: Uses Framer Motion for fluid dropdown animations
    • Flexible Layouts: Customizable grid layouts for menu sections
    • Mixed Navigation: Support for both dropdown menus and direct links
    • Background Images: Rich visual links with optional background images
    • Icon Support: Add icons to menu items for better visual hierarchy
    • Keyboard Navigation: Full keyboard accessibility with arrow keys
    • Hover States: Polished hover effects with background highlights
    • External Links: Automatic handling of external links with proper attributes
    • Theme Support: Automatic dark/light mode theme detection
    • Responsive: Adapts to different screen sizes

    ​
    Props

    ​
    NavbarWithMenu

    PropTypeDefaultDescription
    sectionsNavbarMenuSection[]-Array of menu sections
    navItemsNavItem[]-Navigation items (links or dropdowns)
    logoReact.ReactNode-Custom logo component
    ctaReact.ReactNode-Call-to-action button

    ​
    NavbarMenuSection

    PropertyTypeDefaultDescription
    idstring-Unique identifier for section
    linksNavbarMenuLink[]-Array of links in this section
    gridLayoutstring”grid w-full grid-cols-2 gap-4”CSS classes for grid layout

    ​
    NavbarMenuLink

    PropertyTypeDefaultDescription
    labelstring-Link text
    hrefstring-Link URL
    iconReact.ReactNode-Icon component to display
    externalbooleanfalseWhether link opens in new tab
    descriptionstring-Subtitle text under the label
    backgroundImagestring-URL to background image
    rowSpannumber1Number of grid rows to span

    ​
    NavItem

    Can be either a link or dropdown: Link: 
    {
  type: "link";
  label: string;
  href: string;
}
    Dropdown: 
    {
  type: "dropdown";
  label: string;
  menu: string; // ID of the section to display
}

    ​
    Accessibility

    • Keyboard Navigation: Use arrow keys to navigate between menu items
    • Enter/Space: Activate menu items
    • Escape: Close open menus
    • Focus Management: Proper focus indicators and tab order
    • ARIA Labels: Menu buttons have proper aria-expanded attributes
    • Screen Reader Support: Semantic HTML and proper roles

    ​
    Notes

    • The component automatically detects the theme (light/dark) and adjusts the logo if using default logo paths
    • Menu items are grouped in a hover container, so the menu stays open when moving between items
    • Background images use Next.js Image component for optimization
    • The component uses CSS variables for theming, ensuring consistency across your app

    Build docs developers (and LLMs) love

    Get started for freeTalk to us