Menu item (menu_item)

A menu item with link, title, description, icon and a list of secondary links. Each Menu Item should have a link destination. To use only in a menu component.

🔗 External documentation.

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

                      

                        type: integer
enum:
    - 2
    - 3
    - 4
    - 5
    - 6

                      

            id: menu_item
label: 'Menu item'
description: 'A menu item with link, title, description, icon and a list of secondary links. Each Menu Item should have a link destination. To use only in a menu component. '
group: Navigation
homepage: 'https://protocol.mozilla.org/components/detail/menu-item.html'
slots:
    title:
        id: title
        label: Title
        description: 'Menu item title'
    desc:
        id: desc
        label: Description
        description: 'Menu item description'
    icon:
        id: icon
        label: Icon
        description: 'A renderable image'
props:
    items:
        id: items
        label: 'Menu items'
        description: 'A nested list of links'
        schema:
            type: array
            items:
                type: object
                properties:
                    title:
                        type: string
                    attributes:
                        $ref: '#/$defs/attributes_value'
                    below:
                        type: object
    heading_level:
        id: heading_level
        label: 'Heading level'
        schema:
            type: integer
            enum:
                - 2
                - 3
                - 4
                - 5
                - 6
examples:
    preview:
        id: preview
        label: Preview
        renderable:
            '@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