Menubar

A visually persistent menu common in desktop applications that provides quick access to a consistent set of commands.

Usage

  • Menubar component takes in triggers prop and renders a Menubar based on it.
  • triggers takes in list of objects that represent the Menus.
    • trigger: Name of Menu. Opens menu on clicked. It is a required prop.
    • items: It is an array of objects that represent the items in the menu. Each object can have the following properties:
      • label: The text to display for the item.
      • href: The URL to navigate to when the item is clicked.
      • icon: An optional icon to display next to the item.
      • onClick: A function to call when the item is clicked.
      • items: An array of objects representing sub-items in a nested menu.

Interface for MenubarProps

interface MenubarTriggerProps {
  trigger: string;
  items: MenubarItemType[];
}
interface MenubarItemType {
  label: string;
  href?: string;
  onClick?: () => void;
  items?: MenubarItemType[];
  icon?: React.ReactNode;
}
interface MenubarProps {
  className?: string;
  triggers: MenubarTriggerProps[];
}

Example of triggers prop

const triggers: MenubarTriggerProps[] = [
    {
      trigger: "File",
      items: fileItems,
    },
    {
      trigger: "Edit",
      items: editItems,
    },
  ];
const fileItems: MenubarItemType[] = [
    { label: "Home", href: "/", icon: <Cloud className="mr-2 h-4 w-4" /> },
    {
      label: "Products",
      icon: <CreditCard className="mr-2 h-4 w-4" />,
      items: [
        {
          label: "Electronics",
          href: "/products/electronics",
          icon: <Github className="mr-2 h-4 w-4" />,
        },
        {
          label: "Clothing",
          href: "/products/clothing",
          icon: <Keyboard className="mr-2 h-4 w-4" />,
        },
        {
          label: "More Categories",
          icon: <LifeBuoy className="mr-2 h-4 w-4" />,
          items: [
            {
              label: "Books",
              href: "/products/books",
              icon: <MessageSquare className="mr-2 h-4 w-4" />,
            },
            {
              label: "Furniture",
              href: "/products/furniture",
              icon: <Mail className="mr-2 h-4 w-4" />,
            },
          ],
        },
      ],
    },
    {
      label: "About Us",
      href: "/about",
      icon: <User className="mr-2 h-4 w-4" />,
    },
    {
      label: "Contact",
      href: "/contact",
      icon: <Mail className="mr-2 h-4 w-4" />,
    },
    {
      label: "Settings",
      icon: <Settings className="mr-2 h-4 w-4" />,
      items: [
        {
          label: "Profile",
          href: "/settings/profile",
          icon: <User className="mr-2 h-4 w-4" />,
        },
        {
          label: "Preferences",
          icon: <UserPlus className="mr-2 h-4 w-4" />,
          items: [
            {
              label: "Language",
              href: "/settings/preferences/language",
              icon: <Cloud className="mr-2 h-4 w-4" />,
            },
            {
              label: "Theme",
              href: "/settings/preferences/theme",
              icon: <LifeBuoy className="mr-2 h-4 w-4" />,
            },
          ],
        },
      ],
    },
    {
      label: "Actions",
      icon: <PlusCircle className="mr-2 h-4 w-4" />,
      items: [
        {
          label: "Action 1",
          onClick: () => alert("Action 1"),
          icon: <Plus className="mr-2 h-4 w-4" />,
        },
        {
          label: "Action 2",
          onClick: () => alert("Action 2"),
          icon: <Plus className="mr-2 h-4 w-4" />,
        },
      ],
    },
  ];
 
  const editItems: MenubarItemType[] = [
    //populate with items
    {
      label: "Users",
      icon: <Users className="mr-2 h-4 w-4" />,
      items: [
        {
          label: "List",
          href: "/users/list",
          icon: <User className="mr-2 h-4 w-4" />,
        },
        {
          label: "Add",
          href: "/users/add",
          icon: <UserPlus className="mr-2 h-4 w-4" />,
        },
      ],
    },
    {
      label: "Logout",
      icon: <LogOut className="mr-2 h-4 w-4" />,
      onClick: () => alert("Logout"),
    },
  ];

Customizable Design

More granular components provide you with more control over the design of the Menubar component. You can customize the design of the Menubar component by using the following sub-components:

  • Style of every sub-component of the Menubar component can be customized using the className prop.
  • Pass in a CSS class or use Tailwind CSS utility classes to style the Menubar component.
Hover CardPopover

    Theme

    Presets

    Background

    Custom:

    Primary

    Custom:

    Secondary

    Custom:

    Border

    Custom:

    Mode

    Light
    Dark