HamburgerMenu

The HamburgerMenu component provides a mobile-friendly menu with an icon button trigger.

Import

import { HamburgerMenu } from "amvasdev-ui";

Examples

Basic Usage

import { Menu } from "lucide-react";
  import { HamburgerMenu } from "amvasdev-ui";

  <HamburgerMenu icon={Menu} buttonId="open-hamburger-menu" buttonAriaLabel="Open Hamburger Menu">
    <li><a>Profile</a></li>
    <li><a>Settings</a></li>
    <li><a>Logout</a></li>
  </HamburgerMenu>

With Custom Position

<HamburgerMenu icon={Menu} position="right">
  <li><a>Option 1</a></li>
  <li><a>Option 2</a></li>
</HamburgerMenu>

Custom Icon Size and Styling

<HamburgerMenu
  icon={Menu}
  iconSize={24}
  iconButtonClassName="text-primary"
  menuClassName="min-w-48"
>
  <li><a>Dashboard</a></li>
  <li><a>Analytics</a></li>
  <li><a>Reports</a></li>
</HamburgerMenu>

Notes

Available positions: left, right