feat: add <MegaMenu>

content/docs/components/mega-menu.mdx

@@ -0,0 +1,50 @@
+---
+title: React Mega Menu - Flowbite
+description: Use the mega menu component as a full-width dropdown inside the navbar to show a list of menu items based on multiple sizes, variants, and styles
+---
+
+The mega menu component is a full-width dropdown that can be triggered by clicking on the menu item and it shows a list of links that you can use to navigate through the pages on a website.
+
+Import the mega menu component from Flowbite React to use it:
+
+```jsx
+import { MegaMenu } from 'flowbite-react';
+```
+
+## Default mega menu
+
+Use this example to show a list of links aligned on three columns inside the mega menu dropdown.
+
+<Example name="megaMenu.root" />
+
+## Mega menu with icons
+
+This example of a mega menu dropdown can be used to also show an icon near the text of the link.
+
+<Example name="megaMenu.icons" />
+
+## Full width dropdown
+
+Use this example to show a mega menu dropdown that spans the entire width of the document page.
+
+<Example name="megaMenu.fullWidth" />
+
+## Full width with CTA
+
+This example can be used to also show a CTA button or link next to the menu items inside the dropdown.
+
+<Example name="megaMenu.fullWidthCTA" />
+
+## Full width with image
+
+This example can be used to also show a CTA with a background image inside the dropdown next to the other menu items and links.
+
+<Example name="megaMenu.fullWidthImage" />
+
+## Theme
+
+**This component is currently in development, and does not yet support a theme.**
+
+## References
+
+- [Flowbite Mega Menu](https://flowbite.com/docs/components/mega-menu/)

data/docs-sidebar.ts

@@ -54,6 +54,7 @@ export const DOCS_SIDEBAR: DocsSidebarSection[] = [
       { title: 'Forms', href: '/docs/components/forms' },
       { title: 'KBD', href: '/docs/components/kbd', isNew: true },
       { title: 'List group', href: '/docs/components/list-group' },
+      { title: 'Mega menu', href: '/docs/components/mega-menu', isNew: true },
       { title: 'Modal', href: '/docs/components/modal' },
       { title: 'Navbar', href: '/docs/components/navbar' },
       { title: 'Pagination', href: '/docs/components/pagination' },

examples/index.ts

@@ -18,6 +18,7 @@ export * as forms from './forms';
 export * as kbd from './kbd';
 export * as listGroup from './listGroup';
 export * as list from './list';
+export * as megaMenu from './megaMenu';
 export * as modal from './modal';
 export * as navbar from './navbar';
 export * as pagination from './pagination';

examples/megaMenu/index.ts

@@ -0,0 +1,5 @@
+export { root } from './megaMenu.root';
+export { icons } from './megaMenu.icons';
+export { fullWidth } from './megaMenu.fullWidth';
+export { fullWidthCTA } from './megaMenu.fullWidthCTA';
+export { fullWidthImage } from './megaMenu.fullWidthImage';