Menu (menu)

An expandable menu used in the Navigation organism, consisting of menu panels.

🔗 External documentation.

                        type: array
items:
    type: object
    properties:
        title:
            type: string
        attributes:
            $ref: '#/$defs/attributes_value'
        below:
            type: object

                      

            id: menu
label: Menu
description: 'An expandable menu used in the Navigation organism, consisting of menu panels. '
group: Navigation
homepage: 'https://protocol.mozilla.org/components/detail/menu.html'
slots:
    panels:
        id: panels
        label: 'Menu panels.'
        description: 'Menu panels components'
props:
    items:
        id: items
        label: 'Menu items.'
        schema:
            type: array
            items:
                type: object
                properties:
                    title:
                        type: string
                    attributes:
                        $ref: '#/$defs/attributes_value'
                    below:
                        type: object
library:
    js:
        'https://data.dilla.io/protocol_1/components/menu/menu_init.js': {  }
    dependencies:
        - menu
    id: menu
examples:
    preview:
        id: preview
        label: Preview
        renderable:
            '@component': menu
            panels:
                '@component': menu_panel
                first_col:
                    -
                        '@component': menu_item
                        title: 'A headline with 30 characters '
                        desc: 'This is a short description with only a single sentence and no more.'
                        icon:
                            '@element': img
                            src: 'https://protocol.mozilla.org/protocol/img/icons/image.svg'
                            alt: 'Useful alt text where appropriate'
                        items:
                            -
                                title: Home
                                url: '#'
                            -
                                title: Library
                                url: '#'
                            -
                                title: Data
                        heading_level: 4
                    -
                        '@component': menu_item
                        title: 'A headline with 30 characters '
                        desc: 'This is a short description with only a single sentence and no more.'
                        icon:
                            '@element': img
                            src: 'https://protocol.mozilla.org/protocol/img/icons/image.svg'
                            alt: 'Useful alt text where appropriate'
                        items:
                            -
                                title: Home
                                url: '#'
                            -
                                title: Library
                                url: '#'
                            -
                                title: Data
                        heading_level: 4
                second_col:
                    -
                        '@component': menu_item
                        title: 'A headline with 30 characters'
                    -
                        '@component': menu_item
                        title: 'A headline with 30 characters'
                    -
                        '@component': menu_item
                        title: 'A headline with 30 characters'
                card:
                    '@component': card
                    image:
                        '@element': img
                        src: 'data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAASwAAADIAQMAAABoEU4WAAAAA1BMVEXt7fBQLQGUAAAAHklEQVRYw+3BMQEAAADCIPunNsReYAAAAAAAAAAQHB54AAEGlim3AAAAAElFTkSuQmCC'
                    tag: 'Card tag'
                    title: 'This example headline has 40 characters'
                    desc: 'A description with a maximum of 140 characters. That means we usually only have room for one or two sentences. Here is what that looks like.'
                    meta: '6 hours ago'
                    cta: 'A short inline text cta'
                    link: '#'
                    heading_level: 2
                panel_id: menu-panel_2a745173
            items:
                -
                    title: 'Sample link'
                    url: 'https://www.mozilla.org/'
                -
                    title: 'Sample Link with Popup'
                    attributes:
                        aria-controls: menu-panel_2a745173
                -
                    title: 'Sample link again'
                    url: 'https://www.mozilla.org/'