MegaMenu
Horizontal navigation with large dropdown panels and columns
Accessibility
- Use concise, descriptive labels so navigation items are understandable when announced out of context.
- Preserve the expected keyboard model and expose current or selected state where relevant.
- Keep the opening control labeled, ensure focus moves predictably on open and close, and expose the popup type truthfully.
Styled quick start
Copy this entrypoint first. It includes the imports required to get the component on screen.
svelte
<script lang="ts">
import '@dryui/ui/themes/default.css';
import '@dryui/ui/themes/dark.css';
import { MegaMenu } from '@dryui/ui';
</script>
<MegaMenu.Root>
<MegaMenu.Trigger>Products</MegaMenu.Trigger>
<MegaMenu.Panel>
<MegaMenu.Column title="Platform">
<MegaMenu.Link href="/analytics">Analytics</MegaMenu.Link>
<MegaMenu.Link href="/automation">Automation</MegaMenu.Link>
</MegaMenu.Column>
</MegaMenu.Panel>
</MegaMenu.Root>Import options
Root package
ts
import { MegaMenu } from '@dryui/ui'Per-component subpath
ts
import { MegaMenu } from '@dryui/ui/mega-menu'API
Props, CSS variables, and the public data attributes you can target when styling.
| Prop | Type | Description | Default | Required | Bindable |
|---|---|---|---|---|---|
MegaMenu.Root | |||||
| children | Snippet | Content rendered inside the component. | — | ✓ | — |
MegaMenu.Item | |||||
| children | Snippet | Content rendered inside the component. | — | ✓ | — |
MegaMenu.Trigger | |||||
| children | Snippet | Content rendered inside the component. | — | ✓ | — |
MegaMenu.Panel | |||||
| fullWidth | boolean | — | false | — | — |
| children | Snippet | Content rendered inside the component. | — | ✓ | — |
MegaMenu.Column | |||||
| title | string | Primary heading or label text. | — | — | — |
| children | Snippet | Content rendered inside the component. | — | ✓ | — |
MegaMenu.Link | |||||
| href | string | Destination URL when the component renders as a link. | — | — | — |
| rel | string | Relationship between the current document and the linked resource. | — | — | — |
| target | string | Browsing context used for link navigation. | — | — | — |
| download | boolean | string | Requests download behavior when the component renders as a link. | — | — | — |
| type | buttonsubmitreset | HTML type attribute or component-specific type selector. | 'button' | — | — |
| icon | Snippet | — | — | — | — |
| description | Snippet | Supporting copy that explains the current control or section. | — | — | — |
| children | Snippet | Content rendered inside the component. | — | ✓ | — |