Navigation (navigation)

Main site Navigation, containing Menu and Secondary Download Button components.

🔗 External documentation.

ID	Label	Description	Schema
logo	Logo	A renderable link, automatically replaced by the logo.
menu	Menu	A menu component.
download	Download	A button component.

            id: navigation
label: Navigation
description: 'Main site Navigation, containing Menu and Secondary Download Button components. '
group: Navigation
homepage: 'https://protocol.mozilla.org/components/detail/navigation--default.html'
slots:
    logo:
        id: logo
        label: Logo
        description: 'A renderable link, automatically replaced by the logo.'
    menu:
        id: menu
        label: Menu
        description: 'A menu component.'
    download:
        id: download
        label: Download
        description: 'A button component.'
library:
    js:
        'https://data.dilla.io/protocol_1/components/navigation/navigation_init.js': {  }
    dependencies:
        - menu
        - navigation
    id: navigation
examples:
    preview:
        id: preview
        label: Preview
        renderable:
            '@component': navigation
            logo:
                '@element': a
                '@content': Mozilla
                href: 'https://www.mozilla.org/'
            menu:
                '@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/'
            download:
                '@component': button
                '@variant': product__secondary
                label: 'Download firefox'
                size: md