Menus

CollapsibleMenu

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';
---

<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 button
• popoverClass - Additional CSS classes for the popover container
• menuItemsClass - Additional CSS classes for the dropdown menu container
• collapseAll - If this is set, none or all items are put in the overflow menu

VerticalMenu

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';
---

<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>

Custom Button

<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 prefixing
  • true - Prefix items with menu name + ” – ”
  • string - Prefix items with custom string + ” – ”
• buttonClass - Additional CSS classes for the trigger button
• itemsClass - Additional CSS classes for the dropdown menu items container
• class - 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

Combining CollapsibleMenu with VerticalMenu

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.