This page doesn’t seem to implement working examples
The CollapsibleMenu component automatically moves menu items into an overflow dropdown when there isn’t enough horizontal space to display them all. Perfect for responsive navigation bars and headers.
Features:
- Responsive behavior - Automatically collapses items when space is limited
- Customizable button - Style the overflow menu button with
buttonClass
- Customizable dropdown - Style the menu items container with
menuItemsClass
- Flexible content - Works with any child elements (links, buttons, etc.)
- Customizable overflow behavior - Decide if all items should be put in overflow menu if the menu overflows.
Basic Usage
---
import { CollapsibleMenu } from '@dynamic-type/ddi/server';
---
<CollapsibleMenu
buttonClass="custom-button-style"
popoverClass="custom-popover-style"
menuItemsClass="custom-menu-style"
collapseAll
>
<a href="/item-1" class="button tertiary">Item 1</a>
<a href="/item-2" class="button tertiary">Item 2</a>
<a href="/item-3" class="button tertiary">Item 3</a>
</CollapsibleMenu>
Attributes
buttonClass - Additional CSS classes for the overflow menu buttonpopoverClass - Additional CSS classes for the popover containermenuItemsClass - Additional CSS classes for the dropdown menu containercollapseAll - If this is set, none or all items are put in the overflow menu
The VerticalMenu component creates a dropdown menu triggered by a button. It displays menu items in a vertical popover when activated, perfect for navigation submenus and grouped actions.
Features:
- Customizable button - Style the trigger button with
buttonClass or replace entirely with a custom slot
- Customizable items container - Style the menu items container with
itemsClass
- Popover positioning - Automatically positions the dropdown menu relative to the trigger
- Flexible content - Works with any child elements (links, buttons, etc.)
- Collapsible menu integration - Automatically unwraps items when used inside CollapsibleMenu overflow
- Smart unwrapping - Use
unwrapPrefix to add context when menu items are moved to overflow
Basic Usage
---
import { VerticalMenu } from "@dynamic-type/ddi/server";
---
<VerticalMenu
name="Menu Name"
buttonClass="custom-button-style"
itemsClass="custom-items-style"
>
<a href="/item-1" class="button tertiary">Item 1</a>
<a href="/item-2" class="button tertiary">Item 2</a>
<a href="/item-3" class="button tertiary">Item 3</a>
</VerticalMenu>
<VerticalMenu name="Custom Menu">
<button slot="vertical-menu-button" class="custom-trigger-button">
Custom Trigger
<svg><!-- custom icon --></svg>
</button>
<a href="/item-1">Item 1</a>
<a href="/item-2">Item 2</a>
</VerticalMenu>
With Unwrap Prefix
<VerticalMenu name="Services" unwrapPrefix={true}>
<a href="/web-design" class="button tertiary">Web Design</a>
<a href="/development" class="button tertiary">Development</a>
<a href="/consulting" class="button tertiary">Consulting</a>
</VerticalMenu>
When this menu is moved to overflow in a CollapsibleMenu, items become “Services – Web Design”, “Services – Development”, etc.
Attributes
name - Text displayed on the default button (required)unwrapPrefix - Controls item prefixing when menu is unwrapped in overflow:
false (default) - No prefixingtrue - Prefix items with menu name + “ – “string - Prefix items with custom string + “ – “
buttonClass - Additional CSS classes for the trigger buttonitemsClass - Additional CSS classes for the dropdown menu items containerclass - Additional CSS classes for the root element
Slots
- default - Menu items to display in the dropdown
vertical-menu-button - Custom button to replace the default trigger button
When you combine these components, VerticalMenu items can be automatically unwrapped and prefixed when the CollapsibleMenu moves them to overflow. This provides better UX by showing users which submenu the items came from.
