(Menu panel) (menu_panel)

An expandable menu used in the Navigation organism, consisting of Menu Items and an optional Card molecule.

🔗 External documentation.

                        type: string

                      

            id: menu_panel
label: '(Menu panel)'
description: 'An expandable menu used in the Navigation organism, consisting of Menu Items and an optional Card molecule. '
group: Navigation
homepage: 'https://protocol.mozilla.org/components/detail/menu.html'
slots:
    first_col:
        id: first_col
        label: 'First columnn'
        description: 'List of menu items components.'
    second_col:
        id: second_col
        label: 'Second columnn'
        description: 'List of menu items components.'
    card:
        id: card
        label: Card
        description: 'A card component.'
props:
    panel_id:
        id: panel_id
        label: ID
        description: 'Used by menu component to trigger panel opening. Must start with a letter. Random value if missing.'
        schema:
            type: string
examples:
    preview:
        id: preview
        label: Preview
        renderable:
            '@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