diff --git a/app/docs/components/mega-menu/index.tsx b/app/docs/components/mega-menu/index.tsx new file mode 100644 index 000000000..355f8ecc7 --- /dev/null +++ b/app/docs/components/mega-menu/index.tsx @@ -0,0 +1,16 @@ +'use client'; + +import type { FC } from 'react'; +import { DocsContentLayout } from '~/app/components/docs-content-layout'; +import MegaMenuDocs from './mega-menu.mdx'; + +const MegaMenuPage: FC = () => ( + + + +); + +export default MegaMenuPage; diff --git a/app/docs/components/mega-menu/mega-menu.mdx b/app/docs/components/mega-menu/mega-menu.mdx new file mode 100644 index 000000000..3b3a2c679 --- /dev/null +++ b/app/docs/components/mega-menu/mega-menu.mdx @@ -0,0 +1,511 @@ +import { CodePreview } from '~/app/components/code-preview'; +import { Button, MegaMenu, Navbar, theme } from '~/src'; +import { HiArrowRight, HiChevronDown } from 'react-icons/hi'; + +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. + +Start using the list group component by first importing it from Flowbite React: + +```jsx +'use client'; + +import { MegaMenu } from 'flowbite-react'; +``` + +## Table of Contents + +## Default mega menu + +Use this example to show a list of links aligned on three columns inside the mega menu dropdown. + + + +
+ + + Flowbite + +
+ + Login + + + +
+ + Home + + + + + + Team + Contact + +
+ + + +## 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. + + + +
+ + + Flowbite + +
+ + Login + + + +
+ + Home + + + + + + Team + Contact + +
+ + + +## Full width dropdown + +Use this example to show a mega menu dropdown that spans the entire width of the document page. + + + + + + Flowbite + + + + Home + + + Company + + + + Marketplace + Resources + Contact + + + + + + + +## 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. + + + + + + Flowbite + + + + Home + + + Company + + + + Marketplace + Resources + Contact + + +
+ + +
+

Our brands

+

+ At Flowbite, we have a portfolio of brands that cater to a variety of preferences. +

+ + Explore our brands + Explore our brands + + +
+
+ + + + +## Full width with image + +This example can be used to also show a CTA with a backdround image inside the dropdown next to the other menu items and links. + + + + + + Flowbite + + + + Home + Company + + + Marketplace + + + + Resources + Contact + + +
+
+ + + +

+ Preview the new Flowbite dashboard navigation. +

+ + +
+
+ + + + +## Theme + +**This component is a work in progress, and currently doesn't have a theme.** It may in future updates. + +To learn more about how to customize the appearance of components, please see the [Theme docs](/docs/customize/theme). + +
+  {JSON.stringify(theme.megaMenu, null, 2)}
+
+ +## References + +- [Flowbite Mega Menu](https://flowbite.com/docs/components/mega-menu/) diff --git a/app/docs/components/mega-menu/page.tsx b/app/docs/components/mega-menu/page.tsx new file mode 100644 index 000000000..a37f7cad5 --- /dev/null +++ b/app/docs/components/mega-menu/page.tsx @@ -0,0 +1,14 @@ +import type { Metadata, NextPage } from 'next'; +import MegaMenuPageContent from '.'; + +export const metadata: Metadata = { + 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', + title: 'React Mega Menu - Flowbite', +}; + +const MegaMenuPage: NextPage = () => { + return ; +}; + +export default MegaMenuPage;