Submenu

The Submenu component provides accordion-style navigation for nested menu items, ideal for mobile menus or compact navigation structures.

Preview

• Item
  • Subitem 1
  • Subitem 2
• Another Item
  • Subitem A
  • Subitem B
• Third Item
  • Subitem X
  • Subitem Y

HTML

<li data-submenu>
  <a href="#">
    Menu Item Title
    <svg><!-- Optional icon that rotates --></svg>
  </a>
  <ul>
    <li><a href="#">Submenu Link 1</a></li>
    <li><a href="#">Submenu Link 2</a></li>
  </ul>
</li>

Astro

---
import SubMenu from "../../components/submenu/Submenu.astro";

const items = [
  {
    title: "Menu Item Title",
    href: "#",
    target: "_self",
    scroll: false,
    submenu: [
      { title: "Submenu Link 1", href: "#" },
      { title: "Submenu Link 2", href: "#" },
    ],
  },
];
---
<SubMenu
  items={items}
  className="submenu-nav"
/>

Props

Prop Name	Type	Default	Description
items	Array	[]	Array of menu items with optional nested submenus.
className	String	""	Additional CSS classes for custom styling.